Ajax及其应用

Ajax即Asynchronous Javascript And XML（异步Javascript和XML）。

Ajax的原理：通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

 

Ajax相当于在用户和服务器之间加了一个中间层（Ajax引擎），使用户操作与服务器异步化，并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给了Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

XMLHttpRequest的常见属性

属性名	作用
readyState	返回请求状态	0（未初始化）1（初始化）2（发送数据）3（数据传送中）4（传送完成）
onreadystatechange	每个状态改变时都会触发这个事件处理器，指定readyState属性改变时的事件处理句柄，通常会调用一个JavaScript函数	xmlHttp.onreadystatechange=callback; function callback(){...}
responseBody	将服务器的响应信息正文以unsigned byte数据形式返回	unisigned byte表示直接从服务器返回的未经解码的二进制数据
responseStream	以Ado Stream形式返回服务器的响应信息
responseXML	将服务器的响应信息格式化为XML Document对象返回
status	返回当前HTTP请求的状态码	100：continue 200：ok 201：created  304：not modified 404：not found 500：Internet Server Error

XMLHttpRequest的常用方法

方法名	作用
abort（）	取消当前的请求，调用此方法，当前请求返回UNINITIALIZED状态
getAllResourceHeaders()	获取相应的全部的Http信息，返回的响应以键：值的形式返回，当send方法完成后方可调用此方法
getResourceHeader(‘header’)	获取指定的Http头信息
open()	新建一个Http请求，并设置请求的方法，URL以及验证信息
send()	发送请求到HTTP服务器并接受回应
setRequestHeader("header","value")	把指定的header值设置为指定的值，在设置任何http头信息必须先调用open()

XMLHttpRequest实例的事件

1.readyStateChange事件

readyState属性的值发生改变，就会触发 readyStateChange 事件。

我们可以通过onReadyStateChange属性，指定这个事件的监听函数，对不同状态进行不同处理。尤其是当状态变为4的时候，表示通信成功，这时回调函数就可以处理服务器传送回来的数据。

2.progress事件

上传文件时，XMLHttpRequest 实例对象本身和实例的upload属性，都有一个progress事件，会不断返回上传的进度。

let xhr = new XMLHttpRequest();
​
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    let percentComplete = oEvent.loaded / oEvent.total;
  } else {
    console.log('无法计算进展');
  }
}
​
xhr.addEventListener('progress', updateProgress);
​
xhr.open();

3.load事件，error事件，abort事件

load事件表示服务器传来的数据接收完毕，error事件表示请求出错，abort事件表示请求被中断

4.loadend事件

表示请求结束，但不知道其是否成功

xhr.addEventListener('loadend', loadEnd);
​
function loadEnd(e) {
  console.log('请求结束，状态未知');
}

5.timeout事件

服务器超过指定时间还没有返回结果，就会触发timeout事件

以下是一个简单的例子

var url = " http://localhost:3000/comments";
      var xhr = new XMLHttpRequest();//新建对象
      xhr.addEventListener("load", function () {//建立监听
        if (xhr.status === 200) {
          console.log(xhr.response);
        } else {
          console.log("error:", xhr.status);
        }
      });
      xhr.open("GET", url);//设置参数
      xhr.send();//发送