详解AJAX核心 —— XMLHttpRequest 对象
摘要：XMLHttpRequest 对象是AJAX功能的核心，要开发AJAX程序必须从了解XMLHttpRequest 对象开始。
我要说的内容都是非常基础的内容，高手就免看了，如果看了欢迎给点意见啊。新手或者对低层还不是很了解的人可以看看，帮助理解与记忆。
XMLHttpRequest 对象是AJAX功能的核心，要开发AJAX程序必须从了解XMLHttpRequest 对象开始。
了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始，在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法：
先看看IE创建XMLHttpRequest 对象的方法（方法1）：
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象（Msxml2.XMLHTTP）
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象（Microsoft.XMLHTTP）
而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法（方法2）创建XMLHttpRequest 对象：
var xmlhttp = new XMLHttpRequest();
实际上Internet Explorer 使用了一个名为 XMLHttp 的对象，而不是 XMLHttpRequest 对象，而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者（下文统称 XMLHttpRequest 对象）。IE7开始也开始使用XMLHttpRequest 对象了。
在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错，并且无法使用该对象。所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法：
创建兼容多浏览器的 XMLHttpRequest 对象方法
判断是否创建成功就很简单了
if (!xmlhttp){
//创建XMLHttpRequest 对象失败!
}
else{
//创建成功!
}
创建好了XMLHttpRequest 对象我们再来看看这个对象的方法、属性以及最重要的onreadystatechange事件句柄吧。
方法：
· open() 说明：初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
· abort() 说明：取消当前响应，关闭连接并且结束任何未决的网络活动。
· getAllResponseHeaders() 说明：把 HTTP 响应头部作为未解析的字符串返回。
· getResponseHeader() 说明：返回指定的 HTTP 响应头部的值。
· send() 说明：发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
· setRequestHeader() 说明：向一个打开但未发送的请求设置或添加一个 HTTP 请求。
属性：
· readyState 说明：HTTP 请求的状态。
· responseText 说明：目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
· responseXML 说明：对请求的响应，解析为 XML 并作为 Document 对象返回。
· status 说明：由服务器返回的 HTTP 状态代码。
· statusText 说明：这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。
onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数。
下面从发送请求并处理请求结果的过程来理解一下XMLHttpRequest 对象吧。
发送请求之前自然就是生成一个XMLHttpRequest 对象，代码上面有了就不多写了。
生成一个XMLHttpRequest 对象
var xmlhttp = CreateXMLHttp();
创建好XMLHttpRequest 对象了，那我们要送请求到哪个网站呢，就选择博客园首页的RSS吧。那怎么设置我要请求的网站地址呢，使用open()方法。
open(method, url, async, username, password)
该方法有5个参数，具体什么意思可以看这里：http://www.w3school.com.cn/xmldom/dom_http.asp
我们用的就是这个了。
xmlHttp.open("get","http://www.cnblogs.com",true);
get参数表示用get方法，第二个自然就是目标地址，博客园首页，第三个就是表示是否异步了，我们当然使用true了。具体的参数说明还都可以到http://www.w3school.com.cn上面看了。
好了，目标定好了，怎么发送呢。用send()方法。
send(body)，send()方法只有一个参数，表示DOM对象，这个DOM对象需要说明的内容很多，下次说，今天我们只要写
xmlhttp.send(null);
就可以了。好了，发送了，那怎么处理返回的结果呢，这个时候就用到XMLHttpRequest 对象最重要的东西了，那就是onreadystatechange事件句柄。什么意思呢，那就需要说明一下XMLHttpRequest 对象的readyState了，readyState有5种状态，分别用数字的 0 到 4 来表示。
状态 名称 描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建（未调用open()之前）或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
但是需要注意的是，onreadystatechange事件句柄不同的浏览器能处理的状态并不一致，IE和FireFox能处理1到4，而Safari能处理2到4的状态，Opera 能处理3、4两中状态。0的状态基本没什么用，因为创建了XMLHttpRequest 对象后都会马上调用open() 方法，这时候状态就变成1了，当然除非你要判断对象是否已经被 abort() 取消，可是这样的情况依然很少。大部分情况下判断是不是4（已经接受完成）这个状态就够了。
好了，明白了readyState有5种状态了，那处理返回结果就是看状态变更到不同的状态我们做不同的处理就可以了，怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢。有两种写法，一种是用匿名方法，另一种是指定方法，其实只是不同的写发，作用都一样，看下代码：
xmlhttp.onReadyStateChange = function (){
//处理状态变化的代码
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
///处理状态变化的代码
}
//顺便说一下，句柄的名称比较长，可以这样记忆 on ReadyState Change 表示在读取状态改变时
请求发送了，也指定处理方法了，怎么获取返回的内容呢，有responseText和responseXML两个属性可供使用，responseXML是返回对象，需要再解析，后面再说，这里先用responseText，看看返回什么。
alert(xmlhttp.responseText); //看看是不是返回了首页的HTML代码啊。是你就成功了。
整个过程是：创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意，我们正常的思路理解是这样的，可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好，否则无法处理状态变化事件。
所以我们应该按照下面的流程来记忆：创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求，请求发送后状态变化了就会自动调用指定的处理方法。
好了，看看完成的代码吧。
完成的代码
看似一切都OK了，可是有没有想过，如果HTML代码在网络传输过程中出错了，或者我们指定的地址失效会怎么样呢。这个时候就需要用到status属性，即由服务器返回的 HTTP 状态代码。 xmlhttp.status 等于200时表示传输过程完整没有错误。具体的HTTP状态代码什么意思可以到W3C组织网站上看看，地址http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 。
把getResult()方法写成下面这样我觉的就真的OK了。
function getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
}
好了，一个本来挺简单的东西，被我写的这么多，好象很罗嗦。不过我觉的编程对基础内容的理解很重要，现在很多时候开发AJAX的程序都使用很多JS的库，不需要直接编写这么基础的代码。如使用著名的jQuery，但是如果我们对基础的东西有很好的理解，那这些库报告错误，或者出现问题我们可以很好很快的知道错在哪里，更快的做出改变使程序正常运行。
上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式，没有说Post方式的。那是因为要说Post方式就需要先说另外一个东西，那就是DOM（Document Object Model）文档对象模型。JavaScript通过DOM读取、改变或者删除 HTML、XHTML 以及 XML中的元素，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目，而且这样的操作会马上显示在页面上。另外，所有浏览器执行W3C 发布的 DOM 标准规范，DOM的跨浏览器的兼容问题也就不是问题了。
先来看看下面的这个HTML文档
<html>
<head>
<title>文档标题title>
head>
<body>
<h1>我的标题h1>
<a href="">我的链接a>
body>
html>
这个HTML文档转换成对象表示就是下图这个DOM树。
从这个树就能看出来，HTML中的每一项对应到DOM中都是一个节点，包括属性和文本。
而每个节点都包含某些信息的属性。节点属性包括下面三种：
· nodeName（节点名称）
· nodeValue（节点值）
· nodeType（节点类型）
nodeName
nodeName 属性含有某个节点的名称。
· 元素节点的 nodeName 是标签名称
· 属性节点的 nodeName 是属性名称
· 文本节点的 nodeName 永远是 #text
· 文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
· 对于文本节点，nodeValue 属性包含文本。
· 对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
主要常用节点类型有下面几种：
· 元素节点类型是1
· 属性节点类型是2
· 文本节点类型是3
· 文档节点类型是9
使用DOM从取得DOM对象开始，看看怎么访问DOM对象本身吧：
var domTree = document;
实际中我们更多的是直接使用 document 而来表示DOM对象。
从这里开始，我们可以通过DOM对象访问文档中的所有内容了。
再看看取的节点所使用的方法吧。
我们重点来看看getElementById() 和 getElementsByTagName()
· document.getElementById("ID"); 返回通过 ID 指定的节点；
· document.getElementsByTagName("标签名称"); 返回指定的标签名所有的节点（作为一个节点列表）；
在本文我们用到的主要用到的就是上面这些方法，具体详细的内容可以上网搜索，或者可以到这里查看：具体的详细信息可以看http://www.w3school.com.cn/htmldom/index.asp；
下面做一个简单的例子，看看怎么使用DOM以Post方法发送内容给服务器，并把结果显示出来。
看看这个HTML页面
<html>
<head>
<title>AJAX and the DOMtitle>
head>
<body>
<div id="Content">
<input type="text" id = "name" value="myname" />
<br/>
<input type="text" id = "age" value="99" />
div>
<input type="button" value="Tell me!" />
<div id = "result">div>
body>
html>
我们的目标就是简单的把名字和年龄发送给服务器进行处理，并把结果显示在result这个DIV中。
XMLHttpRequest 对象 就使用上一篇的方法创建，这里就不再多说了。
首先就是要取得名字和年龄的值
var name = document.getElementById("name").value; //取名字
var age = document.getElementById("age").value; //取年龄
然后再将名字和年龄按照通信格式拼接
var info = name+"|"+age; //简单的将姓名和年龄用竖线分割交给服务器处理
好了，整理好要发送的内容，确定发送的地址，以及方式；看，这里就是用Post方式了，地址自然就是要进行处理服务器的地址了。
xmlhttp.open("Post","http://localhost/WebForm1.aspx",true);
这个时候我们就可以使用send方法将info对象发送给服务器了。
xmlhttp.send(info);
处理返回的结果也很简单了，直接把结果显示在result中
var result = document.getElementById("result").firstChild;
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
result.nodeValue = xmlhttp.responseText;
}
}
顺带说一下，把结果显示在result这个DIV中，为什么是 getElementById("result").firstChild 而不是直接getElementById("result")。这就跟开始时说的DOM对象有关系了，前面也说过，在DOM中文本也是一个节点，这里DIV中的文本就是result这个DIV的子节点，而又是唯一一个节点，所以用firstChild就可以取到了。
<html>
<head>
<title>AJAX and the DOM</title>
<script language="JavaScript">
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //较新版本的IE
if(!xmlhttp) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //较旧版本的IE
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
function send()
{
xmlhttp.open("Post","http://localhost/WebForm1.aspx",true);
var name = document.getElementById("name").value; //取名字
var age = document.getElementById("age").value; //取年龄
var info = name+"|"+age; //简单的将姓名和年龄用竖线分割交给服务器处理
var result = document.getElementById("result").firstChild;
xmlhttp.send(info);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && newxmlhttp.status == 200){
result.nodeValue = newxmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<div id="Content">
<input type="text" id = "name" value="myname" />
<br/>
<input type="text" id = "age" value="99" />
</div>
<input type="button" value="Test me!" onClick="send();" />
<div id = "result"></div>
</body>
</html>
服务器端就做最近简单的处理，代码如下：
<%@ Page language="c#" AutoEventWireup="true" %>
<script language="C#" runat="server">
public string result;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
System.IO.StreamReader sr = new System.IO.StreamReader(Page.Request.InputStream,System.Text.Encoding.UTF8);
string[] gets = sr.ReadToEnd().Split('|');
result = string.Format(@"Your name is {0},{1} years old!",gets[0],gets[1]);
}
</script>
<%=result%>
一个简单的以Post方式发送的例子就完成了。
最后，在不同的情况需要使用setRequestHeader来修改请求头来不是直接发送就可以了。
posted on 2009-11-15 10:52 jay.windows 阅读(243) 评论(0) 编辑 收藏 举报
