原生的 XMLHttpRequest

创建XMLHttpReuqest

由于在IE7之前，IE不支持XMLHttpRequest，所以如果想要兼容IE7之前的版本，就需要做一些额外的工作来创建XMLHttpRequest对象。可以使用下面的代码来创建：

function createXHR(){
            //如果支持XMLHttpRequest，之间创建该对象
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } //否则就要判断要用哪个对象来创建了
            else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"],
                    var i, len;
                    //逐个试，一旦找到合适的，就去创建
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {//创建不成功
                throw new Error("No XHR object available.");
            }
        }

执行Ajax请求:

 var xhr = createXHR();
        //需要调用的第一个方法就是open()
        //第一个参数表示请求的方式get或post，第二个表示请求的资源，true表示异步
        xhr.open("get","../ajax/AjaxDataDemo",true);
        //自定义头部,推荐使用自定义的头部
        xhr.setRequestHeader("myheader","myheader");
        xhr.send(null);
        
        //请求完成后的回调函数，可能会调用很多次
        xhr.onreadystatechange = function() {
            //readyState表示请求的状态，为3时就会调用onreadystatechange
            //等于4时表示数据完成
             if(xhr.readyState == 4) {
                 //status表示http响应码，statusText是对应的说明
                 alert(xhr.status + ": " + xhr.statusText);
                 //返回的数据都放在responseText中
                 alert("data: " + xhr.responseText);
                 var allheaders = xhr.getAllResponseHeaders();
                 alert(allheaders);
             }
        }
        
        alert("ajax is async,so it's my time.");

XMLHttpRequest 对象的重要属性：

（1）readyState存有XMLHttpRequest 的状态，0~4。

         0——请求未初始化

         1——服务器连接已经建立

         2——请求已接受

         3——请求处理中

         4——请求已完成，且响应已就绪。

（2）status，HTTP的特定状态码：

100-199：信息性的标示用户应该采取的其他动作。

200-299：表示请求成功。

300-399：用于那些已经移走的文件，常常包括Location报头，指出新的地址。

400-499：表明客户引发的错误。

500-599：由服务器引发的错误。

（3）onreadystatechage:

　存储函数（或函数名）,每当readyState属性改变时，就会调用该函数

XMLHttpRequest 对象的常用方法：

open(method,url,async)	规定请求的类型,URL以及是否异步处理请求 1.method:请求的类型:GET或POST 2.url：文件在服务器上的位置 3.async：true（异步）或false（同步）
send(string)	将请求发送到服务器。 string:仅用于POST请求，表示传递的参数，格式为key1=val1&key2=val2 的查询字符串
setRequestHeader(header,value)	向请求添加HTTP头. header:规定头的名称 value:规定头的值