AJAX核心—XMLHttpRequest 对象

超、凢脫俗 2022-04-16 03:00 267阅读 0赞

我要说的内容都是非常基础的内容，老手就免看了，如果看了欢迎给点意见啊。新手或者对低层还不是很了解的人可以看看，帮助理解与记忆。  
  
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 Exp lorer 运用了一个名为 XMLHttp 的对象，而不是 XMLHttpRequest 对象，而 Mozilla、Opera、Safari 和 大部分非 Microsoft 阅读器都运用的是后者（下文统称 XMLHttpRequest 对象）。IE7开始也开始运用 XMLHttpRequest 对象了。  
  
在建立 XMLHttpRequest 对象的时候如果不同的阅读器运用了不正确的要领阅读器都将会报错，并且不能运用该对象。所以我们须要一种可以兼容不同阅读器的建立 XMLHttpRequest 对象的要领：  
  
建立兼容多阅读器的 XMLHttpRequest 对象要领  
var xmlhttp = false; //建立一个新变量 request 并赋值 false。运用 false 作为判断条件，它表示还没有建立 XMLHttpRequest 对象。  
function CreateXMLHttp()\{  
try\{  
xmlhttp = new XMLHttpRequest(); //尝试建立 XMLHttpRequest 对象，除 IE 外的阅读器都支持这个要领。  
\}  
catch (e)\{  
try\{  
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //运用较新版本的 IE 建立 IE 兼容的对象（Msxml2.XMLHTTP）  
\}  
catch (e)\{  
try\{  
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //运用较老版本的 IE 建立 IE 兼容的对象（Microsoft.XMLHTTP）。  
\}  
catch (failed)\{  
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。  
\}  
\}  
\}  
return xmlhttp;  
\}  
判断能不能建立成功就很基本了  
  
  
  
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",");  
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 对象 -> 指定发送地址及发送要领 -> 指定状态变化处理要领 -> 发送请求，请求发送后状态变化了就会自动调用指定的处理要领。  
好了，看看完成的代码吧。  
  
  
  
完成的代码  
  
var xmlhttp = false; //建立一个新变量 request 并赋值 false。运用 false 作为判断条件，它表示还没有建立 XMLHttpRequest 对象。  
function CreateXMLHttp()\{  
try\{  
xmlhttp = new XMLHttpRequest(); //尝试建立 XMLHttpRequest 对象，除 IE 外的阅读器都支持这个要领。  
\}  
catch (e)\{  
try\{  
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //运用较新版本的 IE 建立 IE 兼容的对象（Msxml2.XMLHTTP）  
\}  
catch (e)\{  
try\{  
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //运用较老版本的 IE 建立 IE 兼容的对象（Microsoft.XMLHTTP）。  
\}  
catch (failed)\{  
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。  
\}  
\}  
\}  
return xmlhttp;  
\}  
xmlhttp = CreateXMLHttp();  
xmlhttp.open("get",");  
xmlhttp.onReadyStateChange = getResult;  
xmlhttp.send(null);  
function getResult()\{  
if(xmlhttp.readyState == 4)\{  
alert(xmlhttp.responseText);  
\}  
\}  
看似一切都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，但是如果我们对基础的东西有很好的理解，那这些库报告不正确 ，或者出现疑问我们可以很好很快的知道错在哪里，更快的做出改动使程序正常运行。