Ajax原理与使用

一、什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，
然后用javascript来操作DOM而更新页面。AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、AJAX请求过程

ajax 请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接收响应数据；基本上所有现代浏览器均支持XMLHttpRequest 对象（IE5 和 IE6 使用
ActiveXObject），具体实例如下：

    function ajax(options){
        //创建 - 非IE6 - 第一步
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }

        //IE浏览器创建XmlHttpRequest对象
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                try {
                    xhr = new ActiveXObject("msxml2.XMLHTTP");
                }
                catch (ex) { }
            }
        }
        if (!xhr) {
            alert("创建xmlhttp对象异常！");
            return false;
        }
        
        //接收 - 第三步
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                var status = xhr.status;
        //此处不判断304，因为增加随机数后，不命中缓存
                if (status >= 200 && status < 300) {
                    document.getElementById("selector").innerHTML= xmlhttp.responseText(或者xhr.responseXML);
                } else {
                    document.getElementById("selector").innerHTML= status;
                }
            }
        }
        
        //连接 和 发送 - 第二步 (根据实际情况使用请求方式，GET或POST)
        if (options.type == "GET") {
            xhr.open("GET", options.url + "?" + params, true);
            xhr.send(null);
        } else if (options.type == "POST") {
            xhr.open("POST", options.url, true);   //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
            //设置表单提交时的内容类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
        
        
        
    }

三、XMLHttpRequest 对象的三个重要的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: “OK” ， 404: 未找到页面

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
XMLHttpRequest.readyState: 状态码的意思
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

四、AJAX同步和异步

同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。 相当于执行两个线程互不干扰

五、jQuery中ajax错误处理

 当通过ajax异步调用出错时，会调用 error函数 。error函数语法为：

error：function (XMLHttpRequest, textStatus, errorThrown) { }

（1）参数有三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。
（2）如果发生了错误，错误信息（第二个参数：textStatus）除了得到null之外，还可能是"timeout", “error”, “notmodified” 和 “parsererror”

发送error可能有下面两条引起的，或者其他程序问题，需要我们认真仔细。
1、data:"{}", data为空也一定要传"{}"；不然返回的是xml格式的。并提示parsererror.
2、parsererror的异常和Header 类型也有关系。及编码header(‘Content-type: text/html; charset=utf8’);