XMLHttpRequest对象的五步使用

什么是XMLHttpRequest对象？

XMLHttpRequest对象用于后台与服务器的数交换数据。

为什么使用XMLHttpRequest对象？

在不重新加载页面的情况下更新网页

在页面已经加载后从服务器请求数据

在页面已经加载后从服务器接受数据

在后台想服务器发送数据

XMLHttpRequest对象的五步使用：

1.建立XMLHttpRequest对象

2.注册回调函数

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

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

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

1.建立XMLHttpRequest对象：

<span style="font-size:18px;"> var xmlhttp;
function submit(){
if(window.XMLHttpRequest){
//IE7,IE8,fireFox,Mozillar,Sarari,Opera
//alert("IE7,IE8,fireFox,Mozillar,Sarari,Opera");
//1.创建XMLHttpRequest对象
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");

}else if(window.ActiveXObject){
//IE6,IE5.5,IE5
//alert("IE6,IE5.5,IE5");
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对象");
}
//alert(xmlhttp);
 </span>

2.注册回调函数：

<span style="font-size:18px;"> //2.注册回调方法
xmlhttp.onreadystatechange=callback;

//记忆一个固定的用法，获取文本框中用户输入的内容
var userName=document.getElementById("UserName").value;
userName=encodeURI(encodeURI(userName));
//get 方式 ：
//url="http://192.168.24.103:8080/WebApplication1/AJAX?name="+userName;
//
//
//Post 方式
url="http://192.168.24.103:8080/WebApplication1/AJAX";
if(url.indexOf("http://")===0){

url=url.replace("?","&");
//一个里面不能有两个？要把？换成&符号
url="Proxy?url="+url;
}</span>

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

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

<span style="font-size:18px;">  //* GET方式交互
//3.设置和服务器交互的相应的参数
xmlhttp.open("GET",url,true);

//4.设置和服务器交互的数据，启动和服务器端的交互
xmlhttp.send(null);
*/

//POST 方式交互
//3.设置和服务器交互的相应的参数
//POST 方式
xmlhttp.open("POST",url,true);
//POST方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4.设置和服务器交互的数据，启动和服务器端的交互
xmlhttp.send("name="+userName);
</span>

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

<span style="font-size:18px;"> function callback(){
//5.判断和服务器端的交互是否完成，还要判断服务器端是否争取返回了数据
if(xmlhttp.readyState===4){
//表示和服务器端的交互已经完成
if(xmlhttp.status===200){
//表示服务器的响应代码是200，正确的返回来数据
//纯文本数据的接受方法
var message=xmlhttp.responseText;
//XML数据对应的DOM对象接受方法
//使用的前提是，服务器端需要设置content-type为text/xml
//var domXml=xmlhttp.responseXML;

//记忆向div标签中填充文本内容的方法
var div=document.getElementById("message");
div.innerHTML=message;

}
}</span>

XMLHttpRequest对象使用的注意事项：

1.不同浏览器中XMLHttpRequest对象建立的方式不同
2.设置回调函数时，不要在函数名后面添加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。
3.open方法最多可以有五个参数，其中头三个参数时必须的。使用GET方式时，请求数据位于URL连接中，后面的send方法的参数直接写null就可以。使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置ContentType的值，然后调用send方法，send的参数就是请求的数据。
4.回调函数中，最好将readyState和status的两个if条件分开来写，readyState的判断条件位于外层，status的位于内层。假如他们被放到了同一个if条件中，判断数据正常返回也是没有问题的，但是不便于分别处理辅乳期不是200响应的情况和readyState不是4的情况。