Ajax原生详解-学习笔记

1、ajax的简介：

      Ajax（Asynchronous JavaScript and XML）异步的javascript和XML，就是发送异步请求，不仅局限于XML文档，可以接受任何形式的文本文档，最大的优点就是在不需要重新加载整个页面的情况下，异步请求一些数据，对局部页面内容进行更新，所以会需要一个异步对象（XMLHttpRequest）去服务器请求数据并返回。

2、ajax原生兼容

      ajax支持IE7以上版本，所以在用原生写ajax的时候需要进行能力测试：

var xhr;

if(window.XMLHttpRequest){

      // IE7+,火狐,谷歌等执行代码

      xhr = new XMLHttpRequest();

}else{

      // IE7以下浏览器执行代码

      xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

3、属性和方法

      （1）属性

           readyState:HTTP请求状态

 当一个XMLHTTPRequest初次创建时候，这个属性的值从0开始，直到接收到完整的HTTP响应，这个值增加到4。

状态	名称	描述
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Sent	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded	HTTP 响应已经完全接收。

readyState的值不会递减，除非当一个请求在处理过程中的时候调用了abort()或者open()方法，每次这个值增加的时候，都会触发onreadystatechange事件句柄。

            responseText:响应体

服务器接收到的响应体（不包括头部），如果还没有接收到数据，就是一个空的字符串。如果readyState的值小于3，那这个属性就是个空字符串，当readyState的值为3的时候，这个属性的值是目前接收到的响应部分，当readyState的为4，这个属性保存了完整的响应体。

           responseXML

对请求的响应，解析为XML并作为Document对象返回 。

           status：服务器返回的HTTP状态码

例如200表示成功，404表示“Not Found”错误，当readyState小于3的时候，这个属性会读取一个异常。

           statusText：用名称指定了服务器响应的HTTP状态码

 例如状态码为200时，则该属性的值是“OK”，状态码为404时，该属性的值就是“Not Found”，和status属性一样，当readyState的值小于3时候，该属性会导致一个异常

---

      （2）事件句柄

           onreadystatechange

 每当readyState属性的值发生改变的时候，调用的事件句柄函数，当readyState为3 时，它也可能调用多次

---

      （3）方法

           abort()

取消当前响应，关闭连接并且结束任何未决的网络活动。

这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

      getAllResponseHeaders()

把 HTTP 响应头部作为未解析的字符串返回。

如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。

      getResponseHeader()

返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。

该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

      open()

初始化HTTP请求的参数，例如URL（请求的地址）或者请求的方法，但是并不发送请求。

       send()

发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体。

       setRequestHeader()

向一个打开但未发送的请求设置或添加一个HTTP请求

---

4、请求步骤

   

// 创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else {
    //为了兼容IE6
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

// 连接服务器 open(方法GET/POST，请求地址， 异步传输)
xhr.open('GET',  'data.txt',  true);

// 发送请求
xhr.send();

// 处理返回数据
/*
** 每当readyState改变时，就会触发onreadystatechange事件
** readyState属性存储有XMLHttpRequest的状态信息
** 0 ：请求未初始化
** 1 ：服务器连接已建立
** 2 ：请求已接受
** 3 : 请求处理中
** 4 ：请求已完成，且相应就绪
*/
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        /*
        ** Http状态码
        ** 1xx ：信息展示
        ** 2xx ：成功
        ** 3xx ：重定向
        ** 4xx : 客户端错误
        ** 5xx ：服务器端错误
        */
        if(xhr.status == 200){
            success(xhr.responseText);
        } else {
            if(failed){
                failed(xhr.status);
            }
        }
    }
}