Ajax回顾

标签：style   blog   http   io   color   ar   os   使用   sp   

流程

创建并设置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;
            }
          }
        };

四、获取响应

就绪处理器确定readystate处于完成状态且请求成功完成后，可以从XHR实例获取响应主体。

无论响应主体的格式如何，都可以通过XHR实例的responseText属性获取。如果相应通过包含内容类型头（Content-type，指定MIME类型为text/xml、application/xml或者MIME类型以+xml结尾）来表明它的主体格式是XML，那么相应主体会解析为XML。

Ajax回顾

标签：style   blog   http   io   color   ar   os   使用   sp   

原文地址：http://www.cnblogs.com/surahe/p/4102717.html