一、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（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了用户...
本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体...他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。作者对ajax做了深入浅出讲解，很适合初学者学习，在这里和大家共同分享了。
**XMLHttpRequest**（简称XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换。这个技术是Ajax（Asynchronous JavaScript and XML）的核心组成部分，尽管XML最初是...
### XMLHTTPRequest对象详解 在现代Web开发中，客户端与服务器之间的数据交换是非常常见的需求之一。为了实现这种异步数据通信，JavaScript提供了一种强大的工具——`XMLHTTPRequest`对象。通过这个对象，开发者...
### XMLHTTPRequest属性与方法 #### 一、XMLHTTPRequest概述 **XMLHTTPRequest** 是一套重要的 API，它允许在浏览器端利用 JavaScript、VbScript 或 Jscript 等脚本语言通过 HTTP 协议发送请求和接收 XML 及其他...
### Ajax之XMLHttpRequest详解 #### 一、引言 随着互联网技术的发展，用户对Web应用的体验要求越来越高。传统的Web应用程序通常采用请求/响应模型，这意味着每次用户与页面交互（例如点击按钮）都会触发一个新的...
XMLHttpRequest对象是Ajax技术的核心，它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下，XMLHttpRequest允许开发者通过JavaScript动态更新网页内容，极大地提升了用户...
XMLHttpRequest（XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行数据交互，实现了页面的异步更新，极大地提升了用户体验。本教程将通过一个简单的例子来探讨XMLHttpRequest...
在GWT（Google Web Toolkit）开发中，XMLHttpRequest（XHR）是实现客户端与服务器间异步数据交换的关键技术。...在阅读《GWT揭秘》的8.1节时，读者将能更深入地理解这些概念，并学会如何在自己的项目中灵活运用。
XMLHttpRequest（简称XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换，这种技术被称为AJAX（Asynchronous JavaScript and XML）。XMLHttpRequest中文参考手册...
### window.XMLHttpRequest详解与AJAX工作原理 #### 引言 在现代Web开发中，**AJAX**（Asynchronous JavaScript and XML）技术是一项至关重要的技术，它允许网页在不重新加载整个页面的情况下从服务器获取数据并...
### 全面剖析XMLHttpRequest对象 #### 引言：AJAX与XMLHttpRequest的革命 XMLHttpRequest对象是现代网络开发中不可或缺的一部分，它是AJAX（Asynchronous JavaScript and XML）技术的核心，使得网页能够在不重新...
XMLHttpRequest（XHR）是JavaScript中的一个关键对象，它允许Web页面在不刷新整个页面的情况下，与服务器进行异步数据交换，从而实现网页的动态更新。当我们结合C#和XMLHttpRequest，可以创建强大的客户端-服务器...
在源网页加载之前，实现一个XMLHttpRequest的代理对象，然后覆盖全局的XMLHttpRequest，这样一但上层调用 new XMLHttpRequest这样的代码时，其实创建的是Ajax-hook的代理对象实例
XMLHttpRequest（XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换，这就是我们常说的AJAX（Asynchronous JavaScript and XML）。本压缩包文件"创建...
这一技术的核心是XMLHttpRequest（XHR）对象，它是JavaScript原生提供的一种用于在后台与服务器通信的API。在这篇深度剖析中，我们将揭开XMLHttpRequest对象的神秘面纱，探讨其工作原理、常用方法和实际应用。 ...