XMLHttpRequest是Ajax技术体系中最为核心的技术。缺少了它,Ajax的其余技术就无法成为一个有机的整体,将会土崩瓦解。

复制代码 代码如下:

原理:

  1999年上半年,MS在IE
5.0版中首次支持这种技术,他们是通过一个名为XMLHTTP的ActiveX对象来支持这种技术的。XMLHTTP对象使得页面中的脚本具有了在不刷新页面的情况下直接与服务器通信的能力。在此之前,能够做到这件事的唯一技术是通过IFrame,然而这超越了IFrame最初设计的目标,是一种存在潜在危险的hack做法。既然已经有很多不守规矩的开发者做出了越轨的行为,并且事实证明这样的开发方式确实非常有价值,也不会对系统安全造成什么破坏。于是MS就从善如流地发明了XMLHTTP对象,专门用来为浏览器中的脚本(在IE中就是JScript和VBScript)提供这样的服务器通信能力。

function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
澳门葡萄京官方网站 ,CallBackObject.prototype.GetHttpObject = function()
//动态为CallBackObject的原型添加了GetHttpObject共有方法
{
//第一步:创建XMLHttpRequest对象
//进行兼容性判断
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
CallBackObject.prototype.DoCallBack = function(URL)
{
if( this.XmlHttp )
{
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
{
var oThis = this;
//第二步:注册回调方法,当服务器处理结束返回数据以后利用回调方法实现局部的页面刷新数据
//这个回调方法实际上在每次XMLHttpRequest对象的readyState属性的值发生变化的时候都会被调用
this.XmlHttp.onreadystatechange = function() {
//根据XmlHttp.readyState返回值不同调用不同的方法。
oThis.ReadyStateChange();
};
//第三步:设置和服务器交互的相应参数
this.XmlHttp.open(‘POST’, URL);
this.XmlHttp.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’);
//第四步:设置向服务器发送的数据,启动和服务器端交互
this.XmlHttp.send(null);
}
}
}
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
this.XmlHttp.abort();
}
CallBackObject.prototype.ReadyStateChange = function() {
//第五步:判断和服务器交互是否完成,还要判断服务器端是否正确返回数据
//this.XmlHttp.readyState == 0初始化状态。XMLHttpRequest
对象已创建或已被 abort() 方法重置。
if (this.XmlHttp.readyState == 1) {
//open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
this.OnLoading();
}
else if (this.XmlHttp.readyState == 2) {
//Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
this.OnLoaded();
}
else if (this.XmlHttp.readyState == 3) {
//Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
this.OnInteractive();
}
else if (this.XmlHttp.readyState == 4) {
//Loaded HTTP 响应已经完全接收。
if (this.XmlHttp.status == 0)
this.OnAbort();
else if (this.XmlHttp.status == 200 && this.XmlHttp.statusText ==
“OK”)
this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
else
this.OnError(this.XmlHttp.status, this.XmlHttp.statusText,
this.XmlHttp.responseText);
}
}
CallBackObject.prototype.OnLoading = function()
{
// Loading
}
CallBackObject.prototype.OnLoaded = function()
{
// Loaded
}
CallBackObject.prototype.OnInteractive = function()
{
// Interactive
}
CallBackObject.prototype.OnComplete = function(responseText,
responseXml)
{
// Complete
}
CallBackObject.prototype.OnAbort = function()
{
// Abort
}
CallBackObject.prototype.OnError = function(status, statusText)
{
// Error
}

通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。本质是js和服务器端交互。

  XMLHTTP对象大受欢迎,到了2000年它几乎已经成为了事实上的标准。Mozilla在这一年实现了具有相同接口的原生对象,称作XMLHttpRequest对象。后来Opera、Safari等浏览器也都相继实现了XMLHttpRequest对象。现在XMLHttpRequest是这个技术的正式名称。

调用方法如下:

创建

  Ajax所依赖的技术之中唯一一个尚未正式标准化的部分就是XMLHttpRequest,不过现在W3C已经将其列入了工作草案,应该很快就会成为正式的标准。

复制代码 代码如下:

相对于浏览器来说,分为俩种方式:
1.IE:
  其中IE相对于不同的版本又分为3种方式:
  (1).IE5.0:   var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
      (2).IE6.0:   var xhr=new ActiveXObject(“Msxml2.XMLHTTP”);
      (3).IE7.0以上: var xhr=new
XMLHttpRequest();  //从7.0以上,向标准看齐

  目前在IE 5.0、IE 6.0中创建XMLHttpRequest对象的语法如下:

<script type=”text/javascript”>
function createRequest()
{
var name = escape(document.getElementById(“name”).value);
var cbo = new CallBackObject();
cbo.OnComplete = Cbo_Complete;
cbo.onError = Cbo_Error;
cbo.OnLoaded = OnLoading;
cbo.DoCallBack(“AjaxTest.aspx?name=” + name);
}

2.非IE: 
      var xhr=new XMLHttpRequest(); //IE7.0与此一样
  eg:

  var xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

function OnLoading() {
alert(“OnLoading ” );
}

 

  而在非IE浏览器中创建XMLHttpRequest对象的语法如下:

function Cbo_Complete(responseText, responseXML)
{
alert(“成功 “+responseText);
}

function newXMLHttpRequest()
{
  var xmlreq = false;
  // Create XMLHttpRequest object in non-Microsoft browsers
  if (window.XMLHttpRequest)  
  {  
    xmlreq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    try
    {
      // Try to create XMLHttpRequest in later versions of
Internet Explorer (ie6.0)
      xmlreq = new ActiveXObject(“Msxml2.XMLHTTP”);
    }
    catch (e1)
    {
      // Failed to create required ActiveXObject
      try
      {
        // Try version supported by older versions of Internet
Explorer (ie5.0)
        xmlreq = new ActiveXObject(“Microsoft.XMLHTTP”);
      }
      catch (e2)
      {
        // Unable to create an XMLHttpRequest by any means
        xmlreq = false;
      }
    }
  }
  return xmlreq;
}

  var xmlhttp = new XMLHttpRequest();

function Cbo_Error(status, statusText, responseText)
{
alert(responseText);
}
</script>

 

  M$在IE
7.0中将能够同时支持ActiveX对象和原生的XMLHttpRequest对象的创建方法,这是一个从善如流之举。因此,当IE
7.0普及之后,创建XMLHttpRequest对象将可以使用完全相同的语法。

onreadystatechange事件
  无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。
  responseText属性
  这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
  responseXML属性
  此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
  其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。
  status属性
  这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
  statusText属性
  这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

【方法】:

  XMLHttpRequest与服务器通信有两种方式:同步方式和异步方式。同步方式的调用非常简单,但是仅仅适用于数据量非常少的场合。如果数据量很大,会造成用户界面很长一段时间的停顿,这当然会损害Web应用的可用性。为了不影响可用性,Ajax应用中一般都使用异步方式来与服务器通信。用来设置同步和异步方式的是XMLHttpRequest对象的open方法的第3个参数,这个参数为true代表异步,为false代表同步。例如:

代码如下: function CallBackObject() {
this.XmlHttp = this.GetHttpObject(); }
CallBackObject.prototype.GetHttpObject = function()
//动态为CallBackObject的原型添…

XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求,下列将逐个展开详细讨论。

  xmlhttp.open(“GET”, “”,
true);

abort()

  如果是使用异步方式来进行通信,还需要设置一个回调函数,当数据返回时系统会调用这个回调函数。通过为XMLHttpRequest对象的onreadystatechange属性赋值来设置一个回调函数:

取消与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。 

  xmlhttp.onreadystatechange=function() {…};

open()
初始化一个XMLHttpRequest对象.

  此外,为了很好地支持中文和国际化,字符集一般都使用UTF-8,这可以通过调用XMLHttpRequest对象上的setRequestHeader方法来设置:

open(String
method,String url,boolean async,String username,String
password)

  xmlhttp.setRequestHeader(“Content-Type”,”text/xml;charset=utf-8″);

method:是必须提供的,用于指定发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD).其中,POST:向服务器发送数据。GET:从服务器检索数据。
url:请求的url地址和传递的参数。
async:指定是否请求是异步的。true:异步,false:同步。默认值是true。
username,password:对于要求认证的服务器,你可以提供可选的用户名和口令参数。

  如果服务器返回的是XML格式的数据,并且正确设置了HTTP头信息中的Content-Type,例如在Java中是这样设置的:

在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些值。 

  resp.setContentType(“text/xml;charset=utf-8”);

send() 向服务器发送http请求。
send(content) content是可选的。可以显式地使用null参数,这与不用参数一样。对于大多数其它的数据类型,在调用send()方法之前,应该使用setRequestHeader()方法先设置Content-Type头部。
 

  那么客户端的回调函数可以通过XMLHttpRequest对象的responseXML属性中获得XML
DOM树形式的返回数据。

setRequestHeader()
setRequestHeader(DOMString header,DOMString
value)设置请求的头部信息。

  XMLHttpRequest其实是用语不当,它其实可以使用任何纯文本格式与服务器通信,而不限于XML格式。注意上面客户和服务器两端的Content-Type设置需要对应起来,如果它们都改成text/plain,那就是使用纯文本来进行通信,在回调函数中就需要访问XMLHttpRequest对象的responseText属性来获得纯文本形式的返回数据。

这个方法只有当readyState为1时,才能调用,即调用open之后,send之前。
如果open使用POST,则必须调用setRequestHeader方法设置content-type,setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”); 

  附:推荐的XMLHttpRequest相关书籍。

去掉缓存:

  《Ajax实战》(Ajax in Action中文版),Dave Crane、Eric
Pascarello、Darren James著。

xhr.setRequestHeader(‘If-Modified-Since’, ‘Thu, 1 Jan 1970 00:00:00
GMT’);

  《Ajax修炼之道》(Pragmatic Ajax中文版),Justin Gehtland、Ben
Galbraith、Dion Almaer著。

setRequestHeader(‘Cache-Control’,
‘no-cache’);

  《Ajax基础教程》(Foundations of Ajax中文版),Ryan
Asleson、Nathaniel T. Schutta著。

getResponseHeader()

  当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性:

getResponseHeader(DOMString
header)从响应信息中获取指定的http头信息。

  0
描述一种”未初始化”状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。

getAllResponseHeaders()

  1 描述一种”发送”状态;此时,代码已经调用了XMLHttpRequest
open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

以一个字符串形式返回所有的响应头信息。

  2
描述一种”发送”状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。

 

  3
描述一种”正在接收”状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。

【属性】:

  4 描述一种”已加载”状态;此时,响应已经被完全接收。

readyState

  System.xml.xmlDocument

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态,XMLHttpRequest对象有一个描述对象的当前状态的readyState属性。

  它的作用是解析xml文档,将其转换为对象,使你可以在程序中对其操作


描述一种”未初始化”状态; 
1  描述一种”发送”状态;
2  描述一种””状态; 

描述一种”正在接收”状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 
4  描述一种”已加载”状态;此时,响应已经被完全接收。 

  XmlDocument 成员请参见:

ReadyState取值 描述  备注
0 未初始化 此时,已经创建一个XMLHttpRequest对象,但是还没有初始化,尚未调用open方法。
1 初始化 此时,代码已经调用了open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器,尚未调用send方法。 
2 发送 此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
3 正在接收 此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
4 完成加载 此时,响应已经被完全接收(数据接收完毕),此时可以通过通过responseXml和responseText获取完整的回应数据。

  XMLHttpRequest对象的属性和事件

status 这个status属性描述了HTTP状态代码,而且其类型为short。比如常见的404(未找到)和200(已就绪)。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

  XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。

statusText 这个statusText属性描述了HTTP状态代码文本,是status的文本信息。

  readyState属性

responseText 以字符串的形式返回服务器响应信息。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。

  当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。

responseXML 将响应信息格式化为XML Document对象返回;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。 

  表格1.XMLHttpRequest对象的ReadyState属性值列表。

 responseBody 将回应信息正文以unsigned byte 数组形式返回。

  ReadyState取值 描述

 

  0
描述一种”未初始化”状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。

【事件】

  1 描述一种”发送”状态;此时,代码已经调用了XMLHttpRequest
open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

onreadystatechange

  2
描述一种”发送”状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。

无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。

  3
描述一种”正在接收”状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。

 

  4 描述一种”已加载”状态;此时,响应已经被完全接收。

  onreadystatechange事件

  无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。

  responseText属性

  这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。

  responseXML属性

  此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。

  其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。

  status属性

  这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

  statusText属性

  这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。