【AJAX】——XMLHttpRequest对象的使用

    AJAX即Asynchronous Javascript And XML，也就是异步的JavaScript和XML，是指一种创建交互式网页应用的网页开发技术，用于创建快速动态网页。传统网页如果需要更新内容，必须重载整个页面。如果使用AJAX，就可以实现网页的异步更新，也就是说不重新加载网页的情况下，对网页的某部分进行更新。

AJAX的工作原理：

                                                                                                                                                                                                                                                    

    AJAX的核心对象是XMLHttpRequest对象，即可扩展超文本传输请求。XML是可扩展标记语言，Http超文本传输协议，Request请求。实质上是因为XMLHttpRequest对象，才实现了在不向服务器提交整个页面的情况下，实现局部的网页更新。

XMLHttpRequest对象的属性和方法：

XMLHttpRequest对象的属性属性描述readyState表示XMLHttpRequest对象的状态，0=未初始化；1=open方法调用成功；2=send方法已经调用；3=正在接受数据；4=完成onreadystatechange请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的JavaScript函数）。

XMLHttpRequest对象的方法方法参数描述openString methord,String url,boolean asynch,String username,String password指定和服务器端交互的HTTP方法，URL地址以及其他请求信息sendcontent向服务器发出请求，如果采用异步方式，该方法会立即返回setRequestHeaderString header,String value设置HTTP请求中的指定头部header的值为valuegetAllRequestHeaders
返回包含HTTP的所有响应头信息，其中响应头包括Content-Length，Date，URL等内容getResponseHeaderString header返回HTTP响应头中指定的键名header对应的值abort
停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态responseText
服务器响应的文本内容responseXML
服务器响应的XML内容对应的DOM对象status
服务器返回的http状态码statusText
服务器返回状态码的文本信息

五步使用法：

1、建立XMLHttpRequest对象

    IE7以上IE浏览器、Firefox、Opera等浏览器可以直接创建XMLHttpRequest对象，而IE6以及IE6以下浏览器使用ActiveXObject方式创建。

2、注册回调函数

<span style="font-family:KaiTi_GB2312;font-size:18px;">xmlhttp.onreadystatechange = callback;</span>

回调函数的调用不需要后面的括号，只需要写函数名即可。

3、使用open方法设置和服务器端交互的基本信息

    open方法有五个参数，前三个是必须有的，其余两个可以为null。

4、设置发送的数据，开始和服务器端交互

    交互方式有两种，一种是POST方式，一种是GET方式。

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

    通过readyState()方法可判断与服务器端的交互是否完成；利用status()可以判断服务器响应代码，服务器端是否返回正确数据。如果readyState=4，表示交互已完成；status=200，表示服务器响应代码是200，正确返回数据。

<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">        var xmlhttp;        function submit() {            //1.创建XMLHttpRequest对象            //IE7、Firefox等            if (window.XMLHttpRequest) {                xmlhttp = new XMLHttpRequest();                if (xmlhttp.overrideMimeType) {                    xml.overrideMimeType("text/xml");                }                //IE6以下            } else if (window.ActiveXObject) {                var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.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对象，请更换浏览器");                }                            }            //2.注册回调方法            xmlhttp.onreadystatechange = callback;            /*            //GET方式交互            //3.设置和服务器端交互的相应参数            xmlhttp.open("GET", "AJAX?name=" + document.getElementById("UserName").value, true);            //4.设置向服务器端发送的数据，启动和服务器端的交互            xmlhttp.send(null);            */            //POST方式交互            //3.设置和服务器端交互的相应参数            xmlhttp.open("POST", "AJAX", true);            //post方式交互需要增加的代码            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            //4.设置向服务器端发送的数据，启动和服务器端的交互            xmlhttp.send("name=" + document.getElementById("UserName").value);                    }        function callback() {            //5.判断和服务器端的交互是否完成，以及服务器端是否正确返回数据            if (xmlhttp.readyState == 4) {                //表示和服务器端交互已完成                if (xmlhttp.status == 200) {                    //表示服务器响应代码是200，正确的返回了数据                    //纯文本数据的接收方法                    var message = xmlhttp.responseText;                    //XML数据对应的对象的接收方法                    //使用前提是服务器端需要设置content-type为text/xml                    //var domXml=xmlhttp.responseXML;                    //向div标签中填充文本内容的方法                    var div = document.getElementById("message");                    div.innerHTML = message;                }            }        }</span></span>

总结

    AJAX其实是JavaScript编写的，在前台，通过编写JavaScript语言，使得页面实现不刷新就能实现和服务器端的交互。再专业一点来看，其实这些JavaScript代码可以直接写到JS文件里面，进行封装后，在页面上引用即可，而不是在网页上编写JavaScript脚本。