JavaScript—Ajax基础知识梳理（29）

Ajax用一句话来讲就是无须刷新页面便可从服务器取得数据。注意，虽然Ajax翻译过来叫异步JavaScript与XML，可是得到的数据不必定是XML数据，如今服务器端返回的都是JSON格式的文件。

完整的Ajax请求过程 完整的Ajax请求过程

1.建立XMLHttpRequest实例 2.发出HTTP请求 3.接收服务器传回的数据 4.更新网页数据
下面先看一个红宝书上给出的发起Ajax请求的例子，API的用法在后面章节给出。

var xhr = new XMLHttpRequest();  // 建立XMLHttpRequest实例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 判断请求响应过程阶段，4 阶段表明已接收到数据
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状态码
      console.log(xhr.responseText);   // 输出响应的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其余HTTP状态码
    }
  }
};

xhr.open('get', 'example.txt', true); // 初始化xhr实例，或者说启动请求
xhr.send(null);  // 设置HTTP请求携带参数，null为不带参数
复制代码

Ajax请求过程详解

1. 建立XMLHttpRequest实例 从上面的的代码能够看出，建立一个XHR实例方式为：

var xhr = new XMLHttpRequest();
复制代码

2. 发出HTTP请求 实例建立好后，首先须要启动一个HTTP请求，使用XHR的open()方法，open方法接受三个参数

XMLHttpRequest.open(method, url, isAsync)
// 例如
xhr.open('get', 'http://www.baidu.com', true)
复制代码

第一个参数为http请求使用方法，如（'get'，'post'等），第二是参数是请求的url, 第三个参数表明是否异步发送请求（可选）。调用open()方法后会启动一个http请求，但它不会当即发送请求，处于待命状态。须要注意的是：请求的url必需要跟请求源域(origin)同域，也就是说协议、域名、端口号要一致，跨域请求要使用别的方法。接着调用send()方法就会发出这个http请求。

xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)
复制代码

send()方法接受一个参数，为http请求发送的数据（一般用于'post'方法），若是为null，表示不发送数据。至此，一个异步的http请求就发送到了服务器。

3. 接收服务器传回的数据 3.1 发送同步请求 若是将open方法的第三个参数设为false，即为同步请求，当收到服务器的响应后，相应的数据会自动填充到XHR对象的属性中，主要包括如下四个：

• responseText：做为响应主体被返回的文本。

• responseXML: 响应返回的XML文档，能接收到的前提是，响应的Content-Type字段的值为text/xml或者application/xml。

• status: HTTP状态码。

• statusText: HTTP状态码说明。

当客户端收到以上信息后，首先要判断HTTP状态码来确认响应是否成功，状态码在200-300之间表示请求成功，同时304表明请求资源未被修改，可以使用浏览器本地缓存。若是成功就能够获取响应报文主体中的数据了。

xhr.open('get', 'http://www.baidu.com', false)
xhr.send(null)

if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状态码
  console.log(xhr.responseText);   // 输出响应的文本
} else {
  console.error(xhr.status, xhr.statusText); // 打印其余HTTP状态码
}
复制代码

3.2 发送异步请求 若是将open方法的第三个参数设为true，即为异步请求。那么就须要一个事件来通知程序异步请求的结果是否返回。XHR对象中的readyState属性，表示请求/响应整个过程所处的阶段，它有五个值分为对应五个阶段：

0：未初始化。未调用open()方法。 1：启动。已经调用open()方法，但未调用send()方法。 2：发送。已调用send()方法，但未收到响应。 3： 接收。已经接收到部分响应数据。 4：完成。已经接受到所有响应数据。

readyState的值每变化一次，都会触发一次readStatechange事件，咱们定义一个事件处理函数onreadStatechange()，并监听readyState == 4状态，就能够得知响应数据已所有收到，并进行下一步操做。那么就是文章开头给出的代码：

var xhr = new XMLHttpRequest();  // 建立XMLHttpRequest实例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 判断请求响应过程阶段，4 阶段表明已接收到数据
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状态码
      console.log(xhr.responseText);   // 输出响应的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其余HTTP状态码
    }
  }
};

xhr.open('get', 'example.txt', true); // 初始化xhr实例，或者说启动请求
xhr.send(null);  // 设置HTTP请求携带参数，null为不带参数
复制代码

补充XHR中三个有用的事件

timeout事件 当超出了设置时间还未收到响应，就会触发timeout事件，进而调用ontimeout事件处理程序。同时timeout也是XHR的一个属性，用于设置这个时间阈值。下面是用法：

xhr.ontimeout = function() {
  alert('timeout!')
}

xhr.open('get', 'http://www.baidu.com', true)
xhr.timeout = 1000 // 时间阈值设为1秒
xhr.send(null)
复制代码

load事件

load事件用于简化对readState值的判断，响应数据所有接收完毕后（也就是readState == 4）会触发load事件，使用onload事件处理函数进行后续操做，onload会接收一个event对象，它的target属性等于XHR对象，固然咱们在定义这个事件处理函数时也能够不传入这个参数，来看下面的用法：

var xhr = new XMLHttpRequest()
xhr.onload = function () {
  if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
    console.log(xhr.responseText);   // 输出响应的文本
  } else {
    console.error(xhr.status, xhr.statusText); // 打印其余HTTP状态码
  }
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)
复制代码

这样就不用去关心readyState值的变化状况了。固然若是想在特定readyState值上作一些逻辑处理，仍是要用以前的方法。

progress事件 这个是颇有用的一个事件，progress事件会在浏览器接收数据期间周期触发，表明整个请求过程的进度，它的事件处理程序onprogress接收一个event对象，event.target是XHR对象，另外event还有三个属性：

lengthComputable：Boolean值，进度信息是否可用。 position：已经接收到的字节数。 totalSize：总共要接收的字节数，被定义在响应报文的Content-Length字段中。

若是响应报文中有Content-Length字段，那么咱们就能够计算当前时刻响应数据的加载进度了，这也是以前看到的一个面试题。看下面的代码：

xhr.onprogress = function(event) {
  if(event.lengthComputable) {
    console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`);
  }
}
复制代码

其余还有不少有用的API，如FormData表单序列化，overrideMimeType()重写XHR响应的MIME类型等等

这里推荐一下个人前端学习交流群：784783012，里面都是学习前端的，若是你想制做酷炫的网页，想学习编程。本身整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工做中想提高本身能力的，正在学习的小伙伴欢迎加入学习。