XMLHttpRequest对象的使用

在Ajax应用程序中，XmlHttpRequest对象负责将用户信息以异步通信的方式发送到服务器端，并接收服务器返回的响应信息和数据。

AJAX与传统web开发的不同之处：

1.png 2.png 3.png 4.png 5.png

1.建立XMLHttpRequest对象

//1.创建XMLHttpRequest对象
            if (window.XMLHttpRequest) {
//                alert("IE7,IE8,FireFox,Mozilla,Safari,Opera");
                //IE7,IE8,FireFox,Mozilla,Safari,Opera
                xmlHttp = new XMLHttpRequest();
                if (xmlHttp.overrideMimeType) {//如果来自服务器的响应没有XML mime-type头部，则一些浏览器不能正常运行
                    xmlHttp.overrideMimeType("text/xml");
                }
            } else if (window.ActiveXObject) {
                //IE6,IE5,Ie5
                var activexName = ["MSXML2.XMLHTTP.6.0",
                    "MSXML2.XMLHTTP.5.0",
                    "MSXML2.XMLHTTP.4.0",
                    "MSXML2.XMLHTTP.3.0",
                    "MSXML2.XMLHTTP.2.0",
                    "Microsoft.XMLHTTP"];
                for (var i = 0; i < activexName.length; i++) {
                    try {
                        xmlHttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) {
                        continue;
                    }
                }
            }

 if (xmlHttp == undefined || xmlHttp == null) {
                alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
                return;
            }

不同浏览器中XMLHttpRequest对象的建立方式是不同的，其实只分为两类，主要是IE版本的问题：
　　一是IE6 及以下版本,需要通过ActiveXObject控件的方式。
　　二是IE7 及以上版本，firefox，chrome等非IE浏览器，直接new XMLHttpRequest()。

2.注册回调函数

xmlHttp.onreadystatechange = callBack;

设置回调函数时，不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性，正确的方式应该是将回调函数的名字注册给这个属性。

实际上每次readyState的值发生变化时，回调函数都会被调用，但是一般我们只关心状态4，表示响应已经完全接受。如果只关心正确的响应数据，只要在执行send方法之前设置回调函数即可，但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数，这样　　　回调函数还可以处理其他的状态。

3.设置和服务器端交互的相应参数

4.设置向服务器端发送的数据，启动和服务器的交互

var userName = document.getElementById("userName").value;
//            alert(userName);
            //3.设置和服务器端交互的相应参数
            //1个参数get方式交互，2个URL，3个采用异步还是同步交互，默认异步
            xmlHttp.open("GET", "AJAX?name=" + userName, true);

            //4.设置向服务器端发送的数据，启动和服务器的交互
            xmlHttp.send(null);//get方式不需要数据，null

open方法最多可以有五个参数，其中前三个参数是必须的。

使用GET方式时，请求数据位于url连接中，后面的send方法的参数直接写null。

使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置Content-Type的值，然后调用send方法，send的参数就是请求的数据。

回调函数中，最好将判断readyState和statue的两个if条件分来写，readyState的判断位于外层，status的位于内层。以便于分别处理服务器不是200响应的情况和readyState不是4的情况。

5.判断和服务器端交互是否完成，还要服务器端是否正确返回了数据

function callBack() {
            //5.判断和服务器端交互是否完成，还要服务器端是否正确返回了数据
            if (xmlHttp.readyState == 4) {
                //表示和服务器交互已经完成
                if (xmlHttp.status == 200) {
                    //表示服务器响应带啊200,正确返回了数据
                    //纯文本数据的接收方法
                    var message = xmlHttp.responseText;
                    alert(message);
                    //前提，服务器需要设置content-type为text/html
                    //var domXml = xmlHttp.responseXML;

                    //向div标签中填充文本内容
                    var div = document.getElementById("message");
                    div.innerHTML = message;
                }
            }
        }

测试

用户名：<input type="text" id="userName" value="123">
<br><br>
<input type="button" value="校验用户名" onclick="submit()">
<br><br>
<div id="message"></div>

XMLHttpRequest的详细属性和方法：

1.png 2.png 3.png 4.png 5.png