Ajax学习笔记

function createXHR(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest(); //主流浏览器
    }
    else{
        return new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6
    }
}

　　接下来我们将创建并发送 http 请求，然后服务器返回的数据将自动填充 XMLHttpRequest 对象的属性，下面是几个重要属性：

1. status：响应的 HTTP 状态
2. readyState：请求或响应过程的当前活动阶段——0，1，2，3，4
3. responseText：返回的文本
4. responseXML：返回的 XML 文档

二、建立并发送 http 请求

2.1 建立 http 请求：open(method, url, async)

　　open() 函数的三个参数分别是：

method：请求的类型——GET 或 POST
- GET 比 POST 快而且简单
- POST 用于更新服务器上的数据
- POST 不限制发送的数据量
- 发送密码时，POST 更安全
url：服务器上的文件地址，可以是任何类型的文件
async：true（异步）、false（同步）
- 若发送异步请求，在等待服务器响应的过程中可以继续执行其他脚本，响应就绪后对响应进行处理

2.2 发送 http 请求：send(content)

　　send() 函数只有一个参数，当使用 GET 方法时，该参数必须为 null；当使用 POST 方法时，该参数是要向服务器发送的数据——字符串。

三、接收服务器响应

3.1 响应阶段

　　当我们发出了一个 http 请求时，就开始等待响应了，那么我们怎么知道服务器响应什么时候来呢？那就要看前面提到的 XMLHttpRequest 对象的属性： readyState。

　　该属性表示请求或响应过程的当前活动阶段，总共分为 5 个阶段：

0：尚未调用 open() 方法
1：已调用 open() 方法，尚未调用 send() 方法
2：已调用 send() 方法，尚未收到响应
3：正在接收响应
4：响应接收完毕，可以在客户端使用

　　在请求和响应的过程中，这个属性的值会从 0 变化到 4，每一次发生变化时都会触发 XMLHttpRequest 对象的 onreadystatechange 事件，所以我们可以在该事件发生时监测 readyState 属性的值，从而确定是不是进行到了最后的阶段——因为我们只对它感兴趣。

　　但是必须在调用 open() 方法之前进行状态监测，这样才能确保跨浏览器的兼容性：

//创建对象
var xhr = createXHR();
//状态监测
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){    //这里务必不要使用 this
        //do some thing
    }
};
//建立http请求
xhr.open("get", "example.txt", true);
//发送http请求
xhr.send(null);

3.2 响应状态

　　但是要注意，并非所有的请求都会成功，所以 XMLHttpRequest 对象还有一个属性 status 用来表示响应的 HTTP 状态，它的值是 HTTP 状态码，常用的几个如下：

200——服务器响应正常。
304——该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
400——无法找到请求的资源。
401——访问资源的权限不够。
403——没有权限访问资源。
404——需要访问的资源不存在。
405——需要访问的资源被禁止。
407——访问的资源需要代理身份验证。
414——请求的URL太长。
500——服务器内部错误。

3.3 最终 Ajax 请求代码

　　如果我们要使用响应的数据来修改页面，则还需要检测状态码，所以最终使用 Ajax 的基本步骤是这样：

//创建对象
var xhr = createXHR();
//状态监测
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){    //务必不要使用 this
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //do something
            alert(xhr.responseText); //比如用弹出框显示返回的文本
        }
        else{
            //do something
            alert("Request was Unsuccessful: " + xhr.status);
        }
    }
};
//建立http请求
xhr.open("get", "example.txt", true);
//发送http请求
xhr.send(null);

四、小结：Ajax封装

现在，我们知道使用 Ajax 时需要确定以下几个因素：

请求的方式
请求的 URL
同步还是异步
请求成功时要做的事情
请求失败时要做的事情

那么，为什么不把这些封装成一个函数呢：

/**
 * 执行Ajax请求的通用函数，每一个参数都是必须的，除了最后一个参数
 * @param {string} method ："GET" 或 "POST"
 * @param {string} url ：服务器上的文件地址，可以是任何类型的文件
 * @param {boolean} async : true（同步），false(异步)
 * @param {string} content：如果是POST请求，可以传递一个字符串；如果是GET请求，必须传递 null
 * @param {function} whenSucceed : 要用函数内部创建的 XHR 对象做的事情
 * @param {function} whenFailed : 一些提示信息，可能会用到 XHR 对象
 */
 function ajaxApp(method, url, async, content, whenSucceed, whenFailed){
    /**
     * 创建 XMLHttpRequest 对象的通用函数
     * @return {object} XMLHttpRequest对象
     */
    function createXHR(){
        if(window.XMLHttpRequest){
            return new XMLHttpRequest(); //主流浏览器
        }
        else{
            return new ActiveXObject("Microsoft.XMLHTTP"); //IE5、IE6
        }
    }    
    
    //创建对象
    var xhr = createXHR();
    //状态监测
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){    //务必不要使用 this
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                //do something
                whenSucceed(xhr);
            }
            else{
                //do something
                if(whenFailed){ //该参数可选，如果有就调用一下
                    whenFailed(xhr);
                }
            }
        }
    };
    //建立http请求
    xhr.open(method, url, async);
    //发送http请求
    xhr.send(content);
}