【Ajax 2】封装Ajax的核心对象：XMLHttpRequest对象

导读：AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。那么，XMLHttpRequest对象是怎么创建和封装的呢？

一、简介

1.1，用途

该对象向服务器发送请求，并接收服务器响应，实现与服务器的异步通信

1.2，发展

在1999年上半年，微软利用ActiveX对象实现了XMLHTTP对象，随后，在2000年，Mozilla实现了相同接口的原生对象XMLHttpRequest对象，Opera，Safari也相继实现。

二、XMLHttpRequest的基本知识

2.1，属性

2.2，状态

2.3，status和statueText

2.4，方法

三、封装XMLHttpRequest对象

3.1，步骤

总结说来，对于XMLHttpRequest对象的封装，有五步：

1，创建一个XMLHttpRequest对象

2，调用对象的Open（）方法设置和服务器端交互的基本信息

3，使用对象的onReadystatechange属性注册回调函数，在函数中判断交互是否结束，响应是否正确，并根据需要获取服务器返回的数据，更新页面内容

4，通过对象的setRequestHeader（）方法设置相应的请求头（如果交互方式为：POST）

5，调用对象的send（）方法发起请求

3.2，封装

<span style="font-family:KaiTi_GB2312;font-size:18px;">/*
封装XMLHTTPRequest对象
*/
var XMLHTTPRequest=function(userName) {
    //1,创建XMLHTTPRequest对象
    var myXMLHttpRequest;
    if (window.XMLHttpRequest) {
        //IE7，IE8，Firefox，Mozillar，Safari，Opera
        myXMLHttpRequest = new XMLHttpRequest();
        //服务器发送回来的头部，不是text/xml,进行忽略
        if (myXMLHttpRequest.overrideMineType) {
            myXMLHttpRequest.overrideMineType("text/xml");
        }
    }//IE5，IE6，IE5.5
    else if (window.ActiveXObject) {
        //创建一个数组，包含所有能用于创建XMLHTTPRequest对象的ActiveXobject控件名称
        var activeName = ["XSXML2.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.6.0"];
        for (var i = 0; i < activeName.length; i++) {
            //没有可用的控件，捕捉异常
            try {
                myXMLHttpRequest = new ActiveXObject(activeName[i]);
                break;//创建成功，终止循环
            } catch (e) {

            }
        }
    }
    //对象创建失败
    if (myXMLHttpRequest == undefined || myXMLHttpRequest == null) {
        alert("当前浏览器不支持创建XMLHTTPRequest对象，请更换浏览器");
        return;
    }
    /*
    //GET方式交互
    //2，设置和服务器端交互的相应参数，打开资源
    myXMLHttpRequest.open("GET", "AJAX?name=" + userName, true);
    //3，注册回调函数
    myXMLHttpRequest.onreadystatechange = callback;
    //4，设置向服务器端发送的数据，启动和服务器端的交互
    myXMLHttpRequest.send(null);
    */

    //POST方式交互
    //2，设置和服务器端交互的相应参数，打开资源
    myXMLHttpRequest.open("POST", "AJAX",true);
    //3，注册回调函数
    myXMLHttpRequest.onreadystatechange = callback;
    //4,设置请求头（和GET方式的区别）
    myXMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //4，设置向服务器端发送的数据，启动和服务器端的交互
    myXMLHttpRequest.send("name="+userName);

    //3.1,实现回调函数
    function callback() {
        //判断和服务器端的交互是否完成，然后判断服务器端是否正确返回了数据
        if (myXMLHttpRequest.readyState == 4) {//和服务器端的交互已经完成
            if (myXMLHttpRequest.status == 200) {//服务器的响应代码为200，正确的返回了数据
                //纯文本的接收方法,使用前提：服务器端设置content-type为text/xml
                var message = myXMLHttpRequest.responseText;
                //向div标签中填充文本内容
                var div = document.getElementById("message");
                div.innerHTML = message;
            }
        }
    }
}
</span>

四、总结

Ajax还有很多需要探索和学习的，比如说例子的实现，我没有实现它，肯定是对于这个知识的掌握还不够，或者说别的关于BS的知识学习的还不够，不能放弃，遇到一个问题就是我的一次机会。还有包括Ajax的封装，还有其跨域问题、缓存问题等，都需要解决。