Ajax基础知识学习笔记

彤_姑娘
443 阅读5分钟

1. ajax：async JavaScript and xml

1.1 异步的js和xml

  • XML：可扩展的标记语言（基于标签结构存储数据）（用自己自定义的标签来存储一个数据结构）。最早的时候，基于ajax从服务器获取的数据一般都是xml格式数据，现在基本上应用更小巧，更方便操作的JSON格式处理。
  • HTML：超文本标记语言
  • XHTML：严谨的HTML

1.2 异步的js（基于ajax实现局部刷新）

  • 服务器渲染（一般都是同步：全局刷新）
  • 客户端渲染（一般都是异步：局部刷新）

2. Ajax的基础操作

2.1 发送ajax有四步操作

  1. 创建一个XHR对象
    • 不兼容XMLHTTPRequest的浏览器（IE6）使用ActiveXObject创建
  2. 打开请求连接（配置请求信息）
    • 参数1：请求方式
      • get：从服务器获取
      • post：向服务器发送信息
    • 参数2：请求地址
    • 参数3：async（是否为异步请求，默认true异步，false代表当前请求任务为同步）
      • user-name, user-pass:向服务器发送请求所携带的用户名和密码，只有在服务器设置了安全来宾账号的情况下需要（一般不用）
  3. 监听请求状态，在不同状态中做不同的事情。
  4. 发送Ajax请求（Ajax任务开始，知道响应主体信息返回【Ajax状态为4】代表当前任务结束）
let xhr = new XMLHTTPRequest;
xhr.open('get','./data.json')
xhr.onreadystatechange=function(){
    // ajax的状态发生改变
    console.log(xhr.readyState) //可以监听到状态码
}
xhr.send()
Ajax响应状态码：

0：new XMLHTTPRequest 后状态为 0

1：执行完open状态变为1

2：响应头回来

3：响应主体信息正在返回中

4：响应主体已经回来

监听函数放在open前可以监听到状态码：1,2,3,4。放在open后可以监听到：2,3,4

send后：响应头信息先回来，最后响应主体信息再回来

HTTP网络状态码（代表服务器返回新状态）

  1. 【2开头基本都是代表成功】

    • 200：OK 正常返回数据

  2. 【3开头一般也是成功，只不过中间做了一些额外处理】

    • 301：永久性重定向/转移（一般应用于网站域名更换，访问老域名，永久都跳转到新域名上）
    • 302：临时转移（老）
    • 307：临时重定向（新）（一般用于服务器的负载均衡）
    • 304：读取的是缓存中的数据 （客户端和服务器端共建的协商缓存，把不经常更新，请求过的资源文件做缓存，后期再访问这些资源直接走缓存数据，除非服务器端更新了此资源，或者客户端强制请缓存刷新等）

  3. 【4开头的都是失败，失败的原因一般都是客户端的问题】

    • 400：请求参数错误
    • 401：无权限访问
    • 404：地址错误
    • 405：当前请求方式服务器不支持

  4. 【5开头的都是失败，失败原因一般是服务器问题】

    • 500：未知服务器错误
    • 503：服务器超负荷

真实项目中，后台开发者可能不是按照这个规则来进行处理的，可由后台自行定义。

XHR属性，方式和事件汇总
  • xhr.response/xhr.respinseText/xhr.responseXML : 获取响应主体信息
  • xhr.status/xhr.statusText : 获取HTTP状态码和状态码描述
  • xhr.timeout : 设置服务器超时时间，超过设置时间自动中断
  • xhr.withCredentials : 是否在跨域的时候允许携带资源凭证
  • xhr.abort() : 强制中断Ajax请求
  • xhr.getAllResponseHeaders() : 获取请求头
  • xhr.getResponseHeader([key]) : 获取请求头指定属性值
  • xhr.open() : 打开请求连接
  • xhr.send() : 发送请求
  • xhr.setRequestHeader() : 设置请求头信息（属性值不能是中文和特殊字符，除非自己编码：encodeURLComponent('哈哈')）

2.2 get VS post

2.2.1 GET

  • get：偏向于拿数据，传的参数较少(拿多给少)
  • head：只获取响应头的信息，不获取响应主体内容
  • delete：一般代指删除服务器上指定的文件
  • options：试探性请求，在cross跨域请求中，所有正常请求发送前，先发送一个试探请求，验证是否可以和服务器正常的建立连接。

2.2.2 post

  • post：偏向于传递数据（给多拿少）
  • put：新增，一般代指向服务器中新增文件

2.2.3 基于get向服务器发送请求，传递给服务器的方式

  • 基于请求头传递给服务器（比如想把本地的cookie信息传递给服务器）
  • 请求URL地址后面的问号传参（主要方式）
xhr.open('get','./data.json?id=1&name=xxx')

2.2.4 基于post向服务器发送请求，传递给服务器的方式

  • 基于请求头传递给服务器
  • 基于请求主体，把信息传递给服务器（主要方式）
xhr.open('post','./data.json')
xhr.send(data)

2.2.5 两者区别

  1. get请求传递给服务器的信息有大小的限制（因为是基于地址问号传参方式传递信息，而URL是有长度限制的，IE浏览器只有2kb大小，谷歌有约4kb大小）。post请求理论上是没有大小的限制（实际操作中都会给与限制）
  2. get请求相对post请求来说不太安全，也是因为传参是基于地址栏问号传参，会被别人基于URL劫持的方式把信息获取到...所以真实项目中，涉及到安全的信息（例如：密码等）都是基于post方式传递的。
  3. get请求容易产生缓存，原因还是因为get是基于问号传参传递信息，浏览器在每一次获取数据后，一般会缓存一下数据，下一次如果请求地址和参数和上一次一样，浏览器直接获取缓存中的数据，所以基于get发送请求时，需要清除缓存时，一般会在地址栏中添加一个随机数
xhr.open('get','./data.json?id=1&_=' + Math.random())

2.2.6 传递给服务器的数据格式

  • application/x-www-form-urlencoded:xxx=xxx&xxx=xxx (最常用，如问号传参格式)。字符串形式
  • multipart/form-data：表单提交或文件上传，也很常用。对象形式
  • raw: 可以上传text，json，xml，HTML等格式的文本，富文本编辑器中的内容可以基于这种格式传递。字符串形式
  • binary：上传二进制数据或者编码格式的数据。二进制文件形式

avatar
文章
阅读
粉丝