Ajax 教程（初学者）：第 1 部分

• 下载源代码 - 2.1 KB

引言

大家好。这是我在 The Code Project 上的第一篇文章。我希望你们能从中受益。过去 5 个月我一直在学习 Ajax，现在我想和你们分享我的知识。如果我在文章中犯了任何错误，请提供反馈。相信我，各位，你们严厉的批评将受到欢迎并得到最高优先级的处理。

我在第二部分解释了带 XML 和 JSON 的 Ajax，你们可以在这里阅读。

市面上有很多书籍和文章解释了 Ajax 的 5W（谁、什么、在哪里、何时、为什么），但我将用我自己的方式简单解释。那么，什么是 Ajax？ AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML）这个术语已经存在三年了，由 Jesse James Garrett 在 2005 年创造。然而，实现 Ajax 所需的技术已经存在了近十年。Ajax 可以在不刷新页面的情况下更新页面。使用 Ajax，我们可以刷新页面的某个 DOM 对象，而无需刷新整个页面。

Ajax 的背景

在 Jesse Garrett 创造这个术语的原始文章中，它是 AJAX。AJAX 中的“X”实际上代表 XMLHttpRequest，而不是 XML。Jesse 后来承认 Ajax 应该是一个单词而不是首字母缩略词，并更新了他的文章以反映他的想法。所以“Ajax”才是正确的拼写。正如其名称所示，Ajax 主要依靠两种技术来工作：JavaScript 和 XMLHttpRequest。浏览器 DOM（Document Object Model）和 DHTML 的标准化在 Ajax 的成功中也扮演着重要角色，但出于讨论目的，我们不会深入探讨这些技术。

Ajax 的工作原理

Ajax 的核心在于能够在不影响用户与页面交互能力的情况下，与 Web 服务器进行异步通信。XMLHttpRequest 使这一切成为可能。Ajax 可以在不刷新页面的情况下更新页面。通过 Ajax，我们可以刷新页面的某个 DOM 对象，而无需刷新整个页面。现在让我们看看当用户提交请求时实际发生了什么。

1. Web 浏览器请求页面中它只需要的部分的内容。
2. Web 服务器分析收到的请求，构建一个 XML 消息，然后将其发送回 Web 浏览器。
3. Web 浏览器收到 XML 消息后，解析该消息以更新页面该部分的内容。

AJAX 通过 HTTP 协议使用 JavaScript 语言与 Web 服务器异步发送/接收 XML 消息。异步意味着数据不是按顺序发送的。

Ajax 应用程序遵循的通用步骤

下图描述了 HTML 页面的结构以及 Ajax Web 应用程序中的一系列操作。

1. 当 HTML 元素上发生事件时，将调用 JavaScript 函数 handEvent()。
2. 在 handEvent() 方法中，创建一个 XMLHttpRequest 对象实例。
3. XMLHttpRequest 对象组织一个关于 HTML 页面状态的 XML 消息，然后将其发送到 Web 服务器。
4. 发送请求后，XMLHttpRequest 对象监听来自 Web 服务器的消息。
5. XMLHttpRequest 对象解析从 Web 服务器返回的消息，并将其更新到 DOM 对象中。

让我们看看 Ajax 在代码中是如何工作的

让我们开始将这些想法用一些代码示例结合起来。

form id="form1" runat="server"

div
input type="text" id="lblTime"

br
input type="button" id="btnGetTime" value="Get Time" onclick="GetTime();"

div
form

1. 从上面的代码来看，我们的 DOM 对象是（input type="text" id="lblTime"），我们需要在不刷新整个页面的情况下刷新它。这将在我们按下按钮的事件时完成，即 onclick。
2. 在这段代码中，我们的 handEvent() 是上面的图 2 中的 GetTime()，如果你看一下的话。

现在让我们看看如何创建一个 XmlHttpRequest 对象并让 Ajax 为我们工作。

JavaScript 中 XMLHttpRequest 的基本实现如下所示：

var xmlHttpRequest;

function GetTime()
{
    //create XMLHttpRequest object
    xmlHttpRequest = (window.XMLHttpRequest) ? 
	new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

    //If the browser doesn't support Ajax, exit now
    if (xmlHttpRequest == null)
	return;

    //Initiate the XMLHttpRequest object
    xmlHttpRequest.open("GET", "Time.aspx", true);

    //Setup the callback function
    xmlHttpRequest.onreadystatechange = StateChange;

    //Send the Ajax request to the server with the GET data
    xmlHttpRequest.send(null);
}
function StateChange()
{
    if(xmlHttpRequest.readyState == 4)
    {
	document.getElementById('lblTime').value = xmlHttpRequest.responseText;
    }
}

1. 现在，从上面的图 2 中，handEvent() 即 GetTime() 在其中创建了一个 XMLHttpRequest 对象，如下所示：

   //create XMLHttpRequest object
   xmlHttpRequest = (window.XMLHttpRequest) ? 
   	new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

2. 如果浏览器不支持 Ajax，它将返回 false。

3. 接下来，我们使用新创建的 XMLHttpRequest 对象打开与服务器的连接。这里的 Time.aspx 页面是我们从中获取 XML 消息的页面，该消息存储在 Web 服务器上。

   //Initiate the XMLHttpRequest object
   xmlHttpRequest.open("GET", "Time.aspx", true);

4. 当您使用 Ajax 时，经常会听到“回调”（callback）一词代替“回发”（postback）。这是因为 Ajax 使用“回调”函数来捕获服务器完成 Ajax 请求处理时的响应。我们通过以下方式建立与该回调函数的引用。这里 StateChange 是一个函数，我们在其中更新或设置我们 DOM 对象即“lblTime”的新值。

   //Setup the callback function
   xmlHttpRequest.onreadystatechange = StateChange;

   让我们来看看我们的回调函数。

   function StateChange()
   {
       if(xmlHttpRequest.readyState == 4)
       {
   	document.getElementById('lblTime').value = xmlHttpRequest.responseText;
       }
   }

   onreadystatechange 在 Ajax 请求期间会多次触发，因此我们必须评估 XMLHttpRequest 的“readyState”属性来确定服务器响应何时完成，即 4。现在如果 readyState 是 4，我们可以用我们从 Web 服务器获得的响应消息更新 DOM 对象。

5. 由于我们发送的请求方法是“GET”（请记住它区分大小写），因此无需向服务器发送任何额外信息。

   //Send the Ajax request to the server with the GET data
   xmlHttpRequest.send(null);

   在 Time.aspx.cs 的 Page_Load 事件中，像这样写一个简单的响应，这就是我们的响应消息：

   Response.Write( DateTime.Now.Hour + ":" + DateTime.Now.Minute + 
   					":" + DateTime.Now.Second );

   就是这样。这就是 Ajax。真的。

Ajax 中需要记住的关键点

创建 Ajax 应用程序有三个关键点，这些点也适用于上述教程。

1. 使用 XMLHttpRequest 对象向 Web 服务器发送 XML 消息。
2. 创建一个在 Web 服务器上运行以响应请求的服务。
3. 解析 XMLHttpRequest 对象，然后更新到客户端 HTML 页面的 DOM 对象。

历史

• 2008年11月20日：初始版本