五步学会XMLHttpRequest

一、XMLHttpRequest的由来

XMLHttpRequest是AJAX的核心技术，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。

二、 XMLHttpRequest对象的五步使用法

1. 创建XMLHttpRequest对象

初期由于各个浏览器在实现上有所不同：
1) IE6及以前的版本，是以ActiveX控件的方式来创建XMLHttpRequest对象。

2) IE7以后的版本和FireFox，Opera等浏览器则可以直接创建js的XMLHttpRequest对象。

在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对实例化过程的实现不同，所以不同浏览器实例化XMLHttpRequest对象的方式也不相同。

针对IE浏览器(IE6,IE5,IE5.5)：

Js代码

[javascript] view
plain copy

print?





<span style="font-size:18px;">var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); </span>

针对其他的浏览器：

Js代码

[javascript] view
plain copy

print?





<span style="font-size:18px;"> var xmlhttp = new XMLHttpRequest(); </span>

由于这两种实例化XMLHttpRequest的形式不同，所以在判断浏览器到底采用的是哪种实例化XMLHttpRequest对象，我就要做出判断，代码如下：

Js代码

[javascript] view
plain copy

print?





<span style="font-size:18px;"> var xmlhttp;

function submit(){

//1.创建XMLHttpRequest对象

if(window.XMLHttpRequest){

//IE7,IE8,FireFox,Mozilllar,Safari,Opera

//alert("IE7,IE8,FireFox,Mozilllar,Safari,Opera");

xmlhttp=new XMLHttpRequest();

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXObject){

//IE6.IE5,IE5.5

/* var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",

"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP",

"Microsoft.XMLHTTP"];*/

var activexName=["MSXML.2.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对象，请更换浏览器");

return;

}</span>

2. 注册回调函数

接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可，比如：

Js代码

[javascript] view
plain copy

print?





<span style="font-size:18px;">xmlHttp.onreadystatechange = callBack; </span>

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

创建新的HTTP请求，并制定此请求的方法，URL以及验证信息(用户名/密码)；设置和服务器端交互的方式有两种：get和post：

Get，js代码

[javascript] view
plain copy

print?





<span style="font-size:18px;">xmlhttp.open("GET","AJAX?name=" +userName,true);</span>

post，js代码

[javascript] view
plain copy

print?





<span style="font-size:18px;"> xmlhttp.open("POST","AJAX",true);

//POST方式交互所需要增加的代码

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");</span>

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

向服务器发出HTTP请求，并接受回应。

Get，js代码

[javascript] view
plain copy

print?





xmlhttp.send(null);

post，js代码

[javascript] view
plain copy

print?





xmlhttp.send("name=" + userName);

5. 处理服务器返回的信息

此时，我们需要在回调函数中，判断和服务器的交互是否完成，还要判断服务器端是否正确的返回了数据，并根据需要获取服务器返回的数据，更新页面内容。

Js代码

[javascript] view
plain copy

print?





function callBack(){

array.push(xmlhttp.readyState);

//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;

//alert(xmlhttp.responseXML.documentElement);

//判断返回的xml数据是否正确

/*

var rootElement =xmlhttp.responseXML.documentElement;

if(rootElement == null || rootElement.nodeName !=""){

}else{

//数据正确返回，可以进行相关处理

}

*/

}

}

}

三、 XMLHttpRequest对象的属性和方法

XMLHttpRequest对象的常用属性：

onreadystatechange：指定当readyState属性值改变时的事件处理句柄；

readyState：返回当前请求的状态；

responseText：将相应信息作为字符串返回；

XMLHttpRequest对象的常用方法：

open()：创建一个新的HTTP请求，并制定此请求的方法，URL以及验证信息(用户名/密码)；

send()：发送请求到HTTP服务器并接受回应。

四、 XMLHttpRequest五步使用注意事项

1、不同浏览器中XMLHttpRequest对象建立的方式不同

2、设置回调函数时，不要在函数名后面加 括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。

3、open方法最多可以有五个参数，其中头三个参数是必须的。并注意GET方式和POST方式在设置send方式的参数不同。

4、回调函数中，最好判断readyState和status的两个if条件，分开来写。readyState的判断条件位于外层，status位于内层。

5、当服务器没有正确返回XML数据时，在js中使用responseXML的方式获取返回的xml数据对应得DOM对象时，FireFox和IE的结果是有差别的。

下面是本示例的完整代码：

[javascript] view
plain copy

print?





<script type="text/javascript">

var xmlhttp;

function submit(){

//1.创建XMLHttpRequest对象

if(window.XMLHttpRequest){

//IE7,IE8,FireFox,Mozilllar,Safari,Opera

//alert("IE7,IE8,FireFox,Mozilllar,Safari,Opera");

xmlhttp=new XMLHttpRequest();

if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}else if(window.ActiveXObject){

//IE6.IE5,IE5.5

//alert("IE6.IE5,IE5.5");

/* var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",

"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP",

"Microsoft.XMLHTTP"];*/

var activexName=["MSXML.2.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对象，请更换浏览器");

return;

}

//2.注册回调方法

xmlhttp.onreadystatechange=callBack;

//错误的写法，加括号说明将返回值给了onreadystatechange，从服务器端返回的数据

//不能执行数据解析和更新的操作

// xmlhttp.onreadystatechange=callback();

// 记忆一个固定用法，获取文本框中用户输入的内容

var userName=document.getElementById("UserName").value;

userName=encodeURI(encodeURI(userName));

}

//GET方式交互

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

xmlhttp.open("GET","AJAX?name=" + userName,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=" + userName);

}

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;

//alert(xmlhttp.responseXML.documentElement);

//判断返回的xml数据是否正确

var rootElement =xmlhttp.responseXML.documentElement;

if(rootElement == null || rootElement.nodeName !=""){

}else{

//数据正确返回，可以进行相关处理

}

}

}

}

</script>