使用 xmlhttp 对象学习 Ajax

什么是 AJAX？

AJAX，是Asynchronous JavaScript and XML 的缩写，是一种用于创建交互式Web 应用程序的Web 开发技术。其目的是通过在后台秘密地交换少量数据来提高网页的响应速度，从而避免在用户进行更改时重新加载整个网页。这旨在提高网页的交互性、速度和可用性。

创建对象

创建 XMLHttpRequest 对象实例对于 Ajax 至关重要。不同浏览器有不同的创建方式。

适用于 Safari 和 Mozilla

var XmlHttp = new XMLHttpRequest();

适用于 Internet Explorer

var XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

两个构造函数返回的对象引用是指向一个abstract 对象，该对象完全在用户视野之外工作。它的方法控制所有操作，而它的属性则保存，除其他外，来自服务器的各种数据片段。

对象方法

在所有支持的环境中，XMLHttpRequest 对象的实例都共享一个简洁但强大的方法和属性列表。下表显示了支持的方法及其作用。

常用的 XMLHttpRequest 对象方法

方法	描述
abort()	中止当前请求
getAllResponseHeaders()	以 string 格式获取所有响应头（标签和值）
getResponseHeader("headerLabel")	获取单个头标签的 string 值
send(content)	传输请求，可选地包含可发送的 string 或 DOM 对象数据
setRequestHeader("label", "value")	设置要与请求一起发送的头部的标签/值对

创建 XMLHTTP 对象的示例

<script language="javascript">
  //Global XMLHTTP Request object
var XmlHttp;
//Creating and setting the instance of appropriate XMLHTTP Request object to 
//a "XmlHttp" variable  
function CreateXmlHttp()
{
 //Creating object of XMLHTTP in Internet Explorer
 try
 {
  XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch(e)
 {
  try
  {
   XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } 
  catch(oc)
  {
   XmlHttp = null;
  }
 }
 //Creating object of XMLHTTP in Mozilla and Safari 
 if(!XmlHttp && typeof XMLHttpRequest != "undefined") 
 {
  XmlHttp = new XMLHttpRequest();
 }
}
</script>

open 方法用于指定 URL、发送方法等属性。

方法	描述
open( method, URL ) open( method, URL, async ) open( method, URL, async, userName) open( method, URL, async, userName, password)	为待处理的请求分配目标 URL、方法和其他可选属性

两个主要必需参数是您打算用于请求的 HTTP 方法和连接的 URL。对于方法参数，在主要用于数据检索请求的操作中使用“GET”；在将数据发送到服务器的操作中使用“POST”，尤其是当传出数据的长度可能大于 512 字节时。URL 可以是完整 URL 或相对 URL。

一个重要的可选第三个参数是一个布尔值，用于控制即将进行的事务是否应异步处理。默认行为（true）是异步执行，这意味着脚本处理在调用 send() 方法后立即继续，而无需等待响应。

但是，如果您将此值设置为 false，脚本将等待请求发送并从服务器收到响应。虽然在继续处理之前等待响应似乎是个好主意，但如果网络或服务器问题导致事务无法完成，您将面临脚本挂起的风险。更安全的方法是异步发送，并围绕请求对象的 onreadystatechange 事件设计您的代码。

以下通用函数包括分支对象创建、事件处理程序分配和 GET 请求的提交。单个函数参数是包含所需 URL 的 string 。该函数假定全局变量 req 接收来自对象构造函数的返回值。在此处使用全局变量允许响应值在页面其他位置的其他函数中自由访问。此示例还假定存在一个 processReqChange() 函数，该函数将处理请求对象状态的变化。

var requestUrl = "WebForm2.aspx" + "?SelectedCountry=" + (selectedCountry);
 CreateXmlHttp();
 
 // If browser supports XMLHTTPRequest object
 if(XmlHttp)
 {
  //Setting the event handler for the response
  XmlHttp.onreadystatechange = HandleResponse;
  
  //Initializes the request object with GET (METHOD of posting), 
  //Request URL and sets the request as asynchronous.
  XmlHttp.open("GET", requestUrl,  true);
  
  //Sends the request to server
  XmlHttp.send(null);  
 }

至关重要的是，服务器返回的数据必须带有设置为 text/xml 的 Content-Type。虽然请求对象的实例可以接受以 text/plain 或 text/html 形式发送的内容，但这些内容只能通过 responseText 属性进行访问。

对象属性

属性	描述
onreadystatechange	每次状态更改时触发的事件的处理程序
readyState	对象状态整数 0 = 未初始化 1 = 加载中 2 = 已加载 3 = 交互中 4 = 已完成
responseText	来自服务器进程的返回数据的 String 版本
responseXML	来自服务器进程的返回数据的 DOM 兼容文档对象
statusText	与状态码一起出现的 String 消息

另一个属性是 status。

这将指示请求的状态。

有关状态的完整列表，请参阅文章“使用 AJAX 创建下拉列表”。

我希望这篇文章能帮助 Ajax 学习者理解 xmlhttp 对象。

历史

• 2007年8月28日：初次发布