Ajax回顾

浏览数：34 / 时间：2015年06月09日

流程

创建并设置XHR实例→将请求发送到服务器→将响应返回到客户端→计算响应主体

一、创建XHR实例

        var xhr;
        if (window.ActiveXObject) {
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        }
        else {
          throw new Error("Ajax is not supported by this browser");
        }

方法

abort() 导致当前正在执行的请求被取消

getAllresponseHeaders() 返回包含所有响应头的名称和值的单个字符串

getResponseHeader(name) 返回响应头指定名称的值

open(method, url, async, username, password) 设置HTTP方法（GET或者POST）和请求的目标URL

send(content) 发出带有主体内容的请求

setResuestHeader(name, value) 使用指定的名称和值设置请求头

属性

onreadystatechange 当请求状态改变时要调用的事件处理器

readyState 一个指示活动请求的当前状态的整数值

responseText 在响应中返回的主体内容

responseXML 如果主体内容被识别为XML，从主体内容创建XML DOM

status 从服务器返回的响应状态码。200表示成功，404表示未找到。

statusTest 响应返回的状态文本信息

二、发送请求

向服务器发送请求前需要的设置步奏：

（1）指定HTTP方法，GET或者POST

（2）提供要接触的服务器端资源的URL

//设置前两项
//可以向open()方法指定第三个布尔值参数，将请求设置为异步(true,也是默认值)或者同步，但一般不需要同步请求。
xhr.open(‘GET‘, ‘/some/resource/url‘)

（3）告诉XHR实例如何通报进度

//第三步将一个回调函数赋值给XHR对象的onreadystatechange属性，XHR实例会在其处理进程的各个阶段调用这个就绪状态处理器的函数。
xhr.onreadystatechange = function() {

};

（4）为POST请求提供任何主体内容

//GET请求不需要传递主体内容参数
xhr.send(null);

//向POST请求传递参数时，名称和值都进行URI编码
xhr.send(‘a=1&b=2&c=3‘);

三、保持跟踪进度

将作为就绪处理器的函数引用赋值给xhr实例的onreadystateschange属性

随着请求在不同状态之间转变，这个回调函数会被调用多次。

请求的当前状态可以通过readyState属性的数字代码来访问

        xhr.onreadystatechange = function() {
          if (this.readyState == 4) {                             //忽略除DONE状态以外的状态
            if (this.status >= 200 && this.status < 300) {
              document.getElementById(‘someContainer‘)
                .innerHTML = this.responseText;
            }
          }
        };