Ajax笔记分享|【青训营笔记啊】这是我参与「第四届青训营」笔记创作活动的第17天今天来分享一下我的Ajax笔记，外

这是我参与「第四届青训营」笔记创作活动的第17天 今天来分享一下我的Ajax笔记，外带一些Git命令，稍后会在此更新fetch笔记。

01-前缀知识

1.客户端和服务器

服务器：存放和对外提供资源的电脑客户端：获取和消费资源的电脑

2.两者通信过程

请求，处理，响应

3.资源的请求方式

（1）get请求通常用于获取服务端资源：例如：根据URL地址，从服务器获取HTML，css，js文件、图片文件，数据资源。 +（2）post请求通常用于向服务器提交数据：例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作。

4.Ajax 概念

利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax

02.请求方式

1.$.get()

 $.get(URL,[data],callback)
 url              string   要请求的资源地址
 data           object  请求资源期间要携带的参数
 callback    function 请求成功后的回调函数

2.$.post()

 $.post(URL,[data],callback)
 data      object         要提交的数据

3.$.ajax()

 $.ajax({type://请求的方式，
               url:,
                 data:,//这次请求要携带的数据
                       success:请求成功后的回调函数
 })

4.axios

 get请求
 // 直接在 URL 上添加参数 ID=12345
 axios.get('/user?ID=12345')
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });
  
 // 也可以通过 params 设置参数：
 axios.get('/user', {
     params: {
       ID: 12345
     }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });
 
 
 
 post请求：
 axios.post('/user', {
     firstName: 'Fred',        // 参数 firstName
     lastName: 'Flintstone'    // 参数 lastName
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

03-.form表单

（1）target属性用来规定在何处打开actionURL _blank:在新窗口中打开: _self：默认值，在相同的框架中打开： _parent：在父框架集中打开:不常用 _top：在整个窗口打开:不常用 framename:在指定的框架中打开：不常用 post方式后面不含参数；安全用一种隐藏的方式提交数据，用来提交大量的复杂的或包括文件上传的数据 get通过url来提交

enctype属性默认是 application/x-www-form-unlencoded 表示在发送前编码所有的字符

multipart/form-data 文件上传必须设置

表单的同步提交：整个页面会跳转到指定url，数据，状态全部丢失，提交和跳转是表单的默认行为；e.preventDefault(); 解决方法：用ajax负责将数据提交到服务器

快速获得表达数据serialize() $("form1").serialize() 所有表单元素必须添加name属性结果为键值对形式

04-art-template语法

标准语法：{{}} 原文输出：{{@ test}} 内容中包含html结构条件输出：{{if else if else /if}} if表示开始 /if表示结束 {{if value}}内容{{/if}} 循环输出 {{each hobby}}

索引是{{

index}}循环项是{{

value}} {{/eack}} 过滤器：本事是一个function处理函数 {{value | filterName}} 过滤器基本语法如下： template.default.imports.filterName=function(value) {/return 处理的结果/}

05-XMLHttpRequest()对象

1.发起get请求

  1.var xhr= new XMLHttpRequest();
  2.xhr.open("get","http://www.liulongbin.top:3006/api/getbooks")
  带参数xhr.open("get","http://www.liulongbin.top:3006/api/getbooks?id=1")  问号后面的叫做查询字符串
  3.xhr.send()
 4.xhr.onreadystatechange() 监听事件{
 if（xhr.readystate===4&&xhr.status===200){//表示数据请求成功
 xhr.status与返回数据中的status不是同一个东西
 }

readystate值表示当前Ajax请求所处的状态 0：unsent XMLHttpRequest 对象已经创立 1：opened open（）方法已经被调用 2：headers_received send（）方法已经被调用，响应头也已经接收 3:loading 数据接收中，此时response属性中已包含部分数据 4：done Ajax这意味着数据已经彻底完成或失败

$.get,$ .ajax携带参数的本质都是以查询字符串的方式拼接到url后面

url编码 url地址中只允许出现英文相关的字母，若包含则必须对其进行编码（转义） url编码原则：使用安全的字符，没有特殊用途获得特殊意义的可打印字符

encodeURL 编码函数 decodeURL解码函数

2.发起post请求

1.var xhr= new XMLHttpRequest();
2.xhr.open("post","www.liulongbin.top:3006/api/addbook")
3.设置content-type属性 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') 3.xhr.send('bookname=水浒传&author=施耐庵&publisher=上海出版社')
4.xhr.onreadystatechange() 监听事件{}

06-JSON

XML叫做可扩展标记语言，被设计用来传输和存储数据，是数据的载体，与HTML没用任何关系，HTML是网页内容的载体

JSON JavaScript object notation Javascript对象表示法本质是字符串

JSON的两种结构对象和数组对象结构：{key:value,key:value,...} key必须使用英文的双引号包裹 value可以是字符串，数字，布尔值，努力了，数组，对象六种类型数组结构：["java","javascript",30,true]

JSON语法注意事项

1.属性名必须使用双引号包裹 2.字符串类型的值必须使用双引号包裹 3.JSON中不允许使用单引号表示字符串 4.JSON中不能写注释 5.JSON最外层必须是对象或数组格式 6.不能使用undefined或函数作为JSON的值

JSON的作用：在计算机与网络之间存储和传输数据 JSON的本质：用字符串来表示JavaScript对象数据或数组数据

对象转换成字符串的过程叫做序列化，反之叫做反序列化

ajaxStart(callback)

监听Ajax请求开始时执行AjaxStart函数，可在callback中像是loading效果，Ajax Start监听所有的Ajax请求，只要一个发起请求就调用 $(document).ajaxStart(function(){ //jQuey1.8之后只能附加到文档中$ ("#loading").show() })

ajaxStop（callback)源监听到Ajax完成时调用函数

07-同源策略

同源：如果两个页面的协议，域名，和端口都相同，则两个页面的具有相同的源 www.test.com/index.html 端口号若没写出端口号默认是80

保证安全性 无法读取非同源网页的Cookie，LocalStorage和IndexedDB 无法接触非同源网页的DOM 无法向非同源地址发送Ajax请求

浏览器是可以跨域请求也能接收，只是被同源策略拦下来了。

JSONP只支持GET请求，不支持POST请求; 优点：出现的早兼容性强 CORS是W3C标准，get，post都支持；

JSONP ---JSON　With　Padding　　通过

节流策略：减少一段时间内时间的触发频率；

请求行：请求方式 URL HTTP协议版本组成

请求头部 User-Agent ：用来说明当前是什么类型的浏览器 Content-type：客服端告诉服务器实际发送的数据类型 Accept：客户端可识别的响应内容类型列表 Accept-Language：用户期望获得的自然语言的优先顺序空行用来分隔头部和请求体

请求体 中存放的是要通过post 方式提交到服务器的数据，get请求没有请求体的

状态行---响应头部--空行---响应体 状态行 ：传输协议版本-状态码-状态码描述文本 响应头部：描述服务器的基本信息；有多行键值对描述

PUT：修改）i向服务器提交资源，并使用提交的新资源替换服务器对应的旧资源 DELETE：（删除）请求服务器删除指定的资源

08-git的使用:

1.基本

1.git config --list --global 获得全局设置 2.git config user.name 获得用户名 3.git config user.email 获得邮箱 4.git help config 浏览器中获得config语句帮助 5.git config -h 终端中获得帮助

2.获取Git仓库的两种方式

1.将尚未进行版本控制的本地目录转换为Git仓库 2.从其它服务器克隆一个已存在的Git仓库

3.Git管理文件

git init 从根目录进入git bash git status 获取文件状态

跟踪文件： git add +要跟踪的文件名开始跟踪一个文件并使其处于暂存区状态

git add可以跟踪一个新文件，已跟踪的，已修改的文件放入暂存区，把冲突的文件标记为已解决的状态 git add . 将所有新增，修改的统一的加入暂存区

提交文件： git commit -m "提示语句" 将提交暂存区文件提交到仓库里

直接提交： git commit -a -m "描述信息" 将工作区文件直接提交到仓库，-a跳过暂存区

移除文件（暂存区）： git reset HEAD +要移除文件名称 git reset HEAD . 暂存所有文件从暂存区移除 撤销修改： git checkout --index.html 撤销对文件的修改

从仓库移除文件：

1.从仓库和工作区同时移除文件 git rm -index .js
2.只从仓库移除文件，保留工作区文件 git rm --cached index.css git rm --cached img/ -r 递归删除img文件夹中所有文件

状态提示字符：？？还未处于暂存区 A 已处于暂存区 M modified(红色) 已修改未暂存（绿色）已修改已暂存 D 已移除

4..gitignore忽略文件

忽略文件:有些文件无需纳入Git管理，也不希望他们总出现在未跟踪文件列表、创建一个名为:.gitignore 的配置文件，列出要忽略的文件匹配模式文件:.gitignore 的格式规范如下以#开头的是注释以/结尾的是目录名文件夹以/开头的防止递归以!开头表示取反

glob模式：简化了的正则表达式

1.星号 * 匹配零个或多个任意字符
2.[abc] 匹配任何一个列在方括号中的字符（此案例匹配一个a或一个b或一个c）
3.问号？只匹配一个任意字符
4.在方括号中使用短划线- 分割两个字符，表示所有在这两个字符范围内的都可以匹配（[0-9]表示匹配所有0到9的数字）
5.两个星号表示匹配任意中间目录（a/ /z 可以匹配a/z,a/b/z,a/b/c/z 等）

5.查看提交历史

1.按时间顺序列出所有的提交历史，最近的提交排在最上面 git log
2.只展示最新的两条提交历史，数字可以按需进行填写 git log -2
3.在一行上展示最近两条提交历史的信息 git log -2 --pretty=oneline
4.在一行上展示最近两条调教历史的信息，并自定义输出的格式 git log -2 --pretty=format:"%h | %an | %ar | %s" %h 标识 %an作者名 %ar 提交时间 %s 提交时携带的信息

6.回退版本：

1.打印提交历史 2.根据唯一的标识符退回指定版本 git reset --hard 3.使用git reflog --protty=oneline 查看命令操作历史 4.再次根据最新的提交ID,跳转到最新的版本： git reset --hard

7.常见的5种开源许可协议

1.BSD (Berkeley Software Distribution) 2.Apache Licence 2.0 3.GPL (GNU General Public License) 具有传染性的一种开源协议，不允许修改后个衍生的代码作为闭源的上演软解发布和销售使用GPL最著名的项目是：Linux 4.LGPL (GNU Lesser General Public License) 5.MIT(Massachsetts Institute of Tenchnology ) 是目前限制最少的系恶意，唯一的条件在修改后的代码或者发行包种，必须包含原作者的许可信息使用MIT的软件项目有：jquery，Node.js

远程仓库的两种访问方式 HTTPS：零配置，但是每次访问仓库时，需要重复输入Github的账号密码才能访问。 SSH：需要进行额外的配置，但配置成功后，每次访问不需要重复输入Github的账号密码.

8.本地仓库推送远程仓库

直接运行 git push

git clone 路径将仓库克隆到本地

9.管理Git分支

git branch 列出仓库所有的分支 git branch 分支名称基于当前所处分支创建一个新分支，执行完命令后仍然处于原来的分支 git checkout （login）分支名称切换到分支login git checkout -b 分支名称创建并切换到创建的分支 git checkout main 切换到主分支 git merge login(分支名称) 将login 合并到main主分支 git branch -d 分支名称删除分支，在删除之前，需跳到另一分支才能删除

遇到冲突时的分支合并：如果在两个不同的分支种，对同一个文件进行了不同的修改，Git就没办法干净的合并分支。此时我们需要打开这些包含冲突的文件然后手动解决冲突再重新git add . 和git commit - m""

将本地分支推送到远程仓库，需要运行如下命令：
git push -u 远程仓库的别名本地分支名称：远程分支名称
案例：git push -u payment:pay (pay是为远程分支命的名)
git push -u origin payment （运行此命令代表希望远程分支和本地分支名称保持一致） git remote show origin （查看远程仓库的所有分支）

跟踪分支： 从远程仓库中，把远程分支下载到本地

1.从远程仓库中，把对应的远程分支下载到本地仓库，保持本地分支和远程分支名称相同 git checkout 远程分支的名字示例：git checkout pay
2.从远程仓库中，把对应的远程分支下载到本地仓库，并把下载的本地分支进行重命名 git checkout -b 本地分支名称远程仓库名称/远程分支名称 git checkoug -b payment origin/pay

拉取远程分支的最新代码 从远程仓库，拉取当前分支最新的代码，保持当前分支的代码和远程分支代码一致 git pull

删除远程仓库的分支 git push 远程仓库名称 --delete 远程分支名称示例：git push origin --delete pay