MrYang's Blog

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.mryang.org/logs/16101549.html

XMLHttpRequest对象简介
XMLHttpRequest对象在我看来是AJax的核心， XMLHttpRequest 是XMLHTTP 组件的对象，通过这个对象，AJAX 可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加 快了响应速度、缩短了用户等待的时间。

IE5.0 开始，开发人员可以在Web 页面内部使用XMLHTTP ActiveX 组件扩展自身的功能，不用从当前的Web 页面导航就可以直接传输数据到服务器或者从服务器接收数据。,Mozilla1.0 以及NetScape7 则是创建继承XML 的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest 对象和XMLHTTP 组件很相似，方法和属性类似，只是部分属性不同。

XMLHttpRequest对象的方法：

XMLHttpRequest对象的属性：

AJAX开发步骤（框架）
AJAX 实质上也是遵循Request/Server 模式，所以这个框架基本的流程也是：对象初始化->发送请求->服务器接收->服务器返回->客户端接收->修改客户端页面内容。只不过这个过程是异步的。

A、初始化对象并发出XMLHttpRequest 请求
为了让Javascript 可以向服务器发送HTTP 请求，必须使用XMLHttpRequest 对象。使用之前，要先将XMLHttpRequest 对象实例化。之前说过，各个浏览器对这个实例化过程实现不同。IE 以ActiveX 控件的形式提供，而Mozilla 等浏览器则直接以XMLHttpRequest 类的形式提供。为了让编写的程序能够跨浏览器运行，要这样写：

if (window.XMLHttpRequest) { // Mozilla, Safari, …
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject(”Microsoft.XMLHTTP”);
}

有些版本的Mozilla 浏览器处理服务器返回的未包含XML mime-type 头部信息的内容时会出错。因此，要确保返回的内容包含text/xml 信息。

http_request = new XMLHttpRequest();
http_request.overrideMimeType(’text/xml’);

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

http_request.onreadystatechange = processRequest;

需要指出的时，这个函数名称不加括号，不指定参数。也可以用Javascript 即时定义函数的方式定义响应函数。比如：

http_request.onreadystatechange = function() {};

C、发出HTTP 请求
指定响应处理函数之后， 就可以向服务器发出HTTP 请求了。这一步调用XMLHttpRequest 对象的open 和send 方法。

http_request.open(’GET’, ‘http://www.example.org/some.file’, true);
http_request.send(null);

open 的第一个参数是HTTP 请求的方法，为Get、Post 或者Head。
open 的第二个参数是目标URL。基于安全考虑，这个URL 只能是同网域的，否则会提示“没有权限”的错误。这个URL 可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL 处理请求XMLHttpRequest 请求则跟处理普通的HTTP 请求一样，比如JSP 可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL 参数值。
open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True，则不会继续执行，直到服务器返回信息。默认为True。
按照顺序，open 调用完毕之后要调用send 方法。send 的参数如果是以Post 方式发出的话，可以是任何想传给服务器的内容。不过，跟form 一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME 类别。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

D、处理服务器返回的信息
在第二步我们已经指定了响应处理函数，这一步，来看看这个响应处理函数都应该做什么。
首先，它要检查XMLHttpRequest 对象的readyState 值，判断请求目前的状态。参照前文的属性表可以知道，readyState 值为4 的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

if (http_request.readyState == 4) {
// 信息已经返回，可以开始处理
} else {
// 信息还没有返回，等待
}

服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200 代表页面正常。

if (http_request.status == 200) {
// 页面正常，可以开始处理信息
} else {
// 页面有问题
}

XMLHttpRequest 对成功返回的信息有两种处理方式：
responseText：将传回的信息当字符串使用；
responseXML：将传回的信息当XML 文档使用，可以用DOM 处理。
E、一个初步的开发框架
总结上面的步骤，我们整理出一个初步的可用的开发框架，供以后调用；这里，将服务器返回的信息用window.alert 以字符串的形式显示出来：

< script language=”javascript”>
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest 对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME 类别
http_request.overrideMimeType(”text/xml”);
}
}
else if (window.ActiveXObject) { // IE 浏览器
try {
http_request = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
http_request = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert(”不能创建XMLHttpRequest 对象实例.”);
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL 以及是否同步执行下段代码
http_request.open(”GET”, url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert(”您所请求的页面有异常。”);
}
}
}
< /script>