一、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代码
<span style="font-size:18px;">var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); </span>
针对其他的浏览器：
Js代码
<span style="font-size:18px;"> var xmlhttp = new XMLHttpRequest(); </span>
由于这两种实例化XMLHttpRequest的形式不同，所以在判断浏览器到底采用的是哪种实例化XMLHttpRequest对象，我就要做出判断，代码如下：
Js代码
<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代码
<span style="font-size:18px;">xmlHttp.onreadystatechange = callBack; </span>
3. 设置和服务器端交互的参数
创建新的HTTP请求，并制定此请求的方法，URL以及验证信息(用户名/密码)；设置和服务器端交互的方式有两种：get和post：
Get，js代码
<span style="font-size:18px;">xmlhttp.open("GET","AJAX?name=" +userName,true);</span>
post，js代码
<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代码
xmlhttp.send(null);
post，js代码
xmlhttp.send("name=" + userName);
5. 处理服务器返回的信息
此时，我们需要在回调函数中，判断和服务器的交互是否完成，还要判断服务器端是否正确的返回了数据，并根据需要获取服务器返回的数据，更新页面内容。
Js代码
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的结果是有差别的。
下面是本示例的完整代码：
<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>
相关推荐
本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体...他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。作者对ajax做了深入浅出讲解，很适合初学者学习，在这里和大家共同分享了。
XmlHttpRequest详解XmlHttpRequest详解XmlHttpRequest详解
在源网页加载之前，实现一个XMLHttpRequest的代理对象，然后覆盖全局的XMLHttpRequest，这样一但上层调用 new XMLHttpRequest这样的代码时，其实创建的是Ajax-hook的代理对象实例
AJAX(XMLHttpRequest)进行跨域请求方法详解
全面剖析XMLHttpRequest对象 全面剖析XMLHttpRequest对象
XMLHttpRequest中文参考手册 很详细，不懂XMLHttpRequest的可以看，高手就不要浪费时间了
全面剖析Ajax XMLHttpRequest对象
创建XMLHttpRequest对象的方法.rar创建XMLHttpRequest对象的方法.rar创建XMLHttpRequest对象的方法.rar
详解Ajax的核心对象XmlHttpRequest
问题的关键：如何使用XMLHttpRequest对象。尽管与其说Ajax是一种技术，不如说是一种技巧，但如果没有对XMLHttpRequest的广泛支持，Google Suggest和Ta-da List可能不会像我们看到的有今天这样的发展，而你可能也不会...
ajax工具，XMLHttpRequest调试工具
XMLHttpRequest方法和属性API，介绍了XMLHttpRequest的方法和属性
XMLHTTPREQUEST对象创建，交互，回调底层代码。。。
一般网上流传的创建XMLHttpRequest对象比较简单。跨浏览器能力非常有限。并不全面。 经测试，用此方法创建XMLHttpRequest对象，在运用AJAX的时候，可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流...
XMLHttpRequest使用小例子，将值异步传递，纯JS实现
快速理解XMLHttpRequest对象使用，理解ajax的使用原理
XMLHttpRequest.Status多种状态的含义 xmlHttpRequest的status的值的含义 xmlHttpRequest对象的status代表当前http请求的状态，是一个长整型数据，现在介绍一下它的含义。 http请求状态及其含义表 1xx - 信息...
XMLHttpRequest 提提提户端端http服务器器讯的协协 Example 下面的代码是在 JScript中创建一个 XmlhTtp对象并从服务器请求一个 XML文档。服务器返回XML文档并显示 var xmlHttpReq = new ActiveXObject("MSXML2....