ajax——XMLHttpRequest

XMLHttpRequest对象，可以让ajax程序在不重新加载的页面的情况下更新页面数据，页面加载完成后从服务器接受发生数据，这样既减轻了服务器负担又回忆了响应速度，缩短了用户的等待时间，让web程序更类似于传统的桌面应用。

XMLHttpRequest对象4步使用方法：

1.建立XMLHttpRequest对象。

建立XMLHttpRequest对象时，要根据浏览器的不同版本去建立，因为IE5.0和iE6.0，开发人员就可以在WEB页面内部使用XMLHTTP
ActiveX组件扩展自身的功能；而从IE7版本以上以及其他厂商的浏览器，开始创建继承XML的代理类XMLHttpRequest，所以创建上会有不同。

var xmlhttp;//定义全局变量   

<span style="white-space:pre">	</span>//1.创建xmlhttprequest对象
            if (window.XMLHttpRequest) {
                //firefox等其他浏览器、ie7、8及以上版本适用
                    xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType("text/xml");
                } else if (window.ActiveXObject) {
                    //ie5、6版本版本适用
                    var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                    for (var i = 0; i < activexName.length; i++) {
                        try {
                                xmlhttp = new ActiveXObject(activexName[i]);
                            break;
                        } catch (e) {

                        }
                    }
                }
                if (xmlhttp==undefined || xmlhttp==null) {
                    alert("当前浏览器不支持创建xmlhttprequest对象");
                    return;
                }

2.注册回调函数

//2.注册一个回调方法
                xmlhttp.onreadystatechange = callback;

3.使用open方法设置和服务器交互的信息，并设置发送的数据，

open方法中的也有get和post的提交方式。post的方式时，要设置它的头文件，并且需要发送时需要将参数写的send中

//GET方式交互
                //3.设置和服务器交互的相应参数
                xmlhttp.open("GET", "HtmlPage1.ashx?username=" + userName, true);
                ////设置服务器端发送的数据。启动和服务器的交互
                xmlhttp.send(null);

//POST方式交互
                //3.利用open，设置和服务器交互的相应参数
                xmlhttp.open("POST", "HtmlPage1.ashx", true);
                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");              //POST方式所需要增加的代码，头文件
                //设置服务器端发送的数据。启动和服务器的交互，以及传递参数
                xmlhttp.send("username=" + userName);

4.在回调函数中判断交互是否完成，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。

//回调函数
                function callback()
                {
                    //5.判断和服务器器的交互是否完成,服务器端是否正确返回了数据
                    if (xmlhttp.readyState == 4) {//表示服务器端的交互已经完成
                        if (xmlhttp.status == 200) {//表示正确的返回了数据
                            //纯文本的方法接受方法
                            var message = xmlhttp.responseText;
                            //xml数据对应的dom对象的接受方法
                            //使用的前提是，服务器端需要设置
                            //记忆向div标签中添加文本内容
                            var div1 = document.getElementById("message");
                            div1.innerHTML = message;
                        }
                    }
                }

XMLHttpRequest的详细属性和方法：

open()	指定服务器端交互的http方法（post or get）、url地址、是否异步等信息
send()	向服务器发出请求，如果采用异步，该方法立即返回，其内容可以是null，dom对象，输入流，字符串
setRequestjeader()	设置http的头文件，在open方法以后调用。
getallResponseHeaders()	包含http的所有相应头文件信息。
getResponseHeader()	返回http相应头文件中指定的键名header对应值。
abort()	停止当前http请求，对应的xmlhttprequest对象复位到未初始化的状态
readyState	异步操作的状态：未初始化(0)，正在加载(1)，已加载(2)，交互(3)，已完成(4)
onreadystatechange()	请求状态改变的事件触发器。（可注册函数）
responseText	服务器响应的文本内容。
responseXML	服务器响应的XML内容对应的DOM对象
status	服务器返回的HTTP状态码。200成功。
statusText	服务器返回状态码的文本信息

总结：

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