理解 AJAX

• 下载源代码 - 1.21 KB

引言

想象一下一个非常庞大的网页，提供了很多功能和大量数据，所有数据都来自服务器。现在，用户想要从服务器获取一些信息，这些信息可能只会影响该页面的很小一部分，但是当他提交请求时，整个页面会不必要地重新渲染，花费大量时间并再次填充每一项内容。
过去，这是一个非常令人恼火的问题，但是现在，AJAX（Asynchronous JavaScript And XML，异步 JavaScript 和 XML）已经出现，可以解决整个页面渲染的问题。借助 AJAX 的优势，我们可以仅更新/刷新网页的必要部分，而无需渲染整个页面本身。

本示例中的目标

我们的目标是熟悉 AJAX。因此，我们将创建一个非常简单的示例，重点是 AJAX 的使用，而不是通过涉及数据库连接或其他复杂的逻辑来使业务逻辑和表示复杂化。（当然，我们都已经了解数据库。即使我们不了解，我们也会在其他时间学习。）

我们将在服务器上生成随机数（generateRandomNos.asp），然后我们将通过 AJAX 在我们的简单 HTML 页面（showRandomNos.html）上调用此服务器端代码。我们会注意到，只有我们的 HTML 页面（showRandomNos.html）的一部分会被更新，而不是整个页面都被刷新。

Using the Code

我们的第一个页面只是一个 HTML 页面，当用户点击“生成随机数”按钮时，它会显示随机生成的数字，但是这里使用的技术是 AJAX。只有一小部分被更新，而不是渲染整个页面来完成用户的请求。

   onclick='JavaScript:generateRandomNumbers("generateRandomNos.asp")'

在按钮的 Onclick 事件中，我们调用一个 JavaScript 函数，并传递 *.asp 页面的 URL（这将在服务器上生成随机数），如上所示

function generateRandomNumbers(targetURL) 
{
     var xmlHttpReq = false;
     // FOR IE
     if (window.ActiveXObject) {
         xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
     }
     // FOR OTHER BROWSERS
     else if (window.XMLHttpRequest) {
         xmlHttpReq = new XMLHttpRequest();
     }

     xmlHttpReq.open('POST', targetURL, true);
     xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xmlHttpReq.onreadystatechange = 
         function() { // START OF Callback function
             if (xmlHttpReq.readyState == 4) {
                 document.getElementById("result").innerHTML = 
					xmlHttpReq.responseText;
                 document.getElementById("generationStatus").innerHTML= "Done !!";
             }
             else
             {
                 document.getElementById("generationStatus").innerHTML= 
					"Generating Random numbers...";
             }
         } // END OF Callback function
     xmlHttpReq.send();
  }

为了处理服务器端代码，我们需要向服务器发送一个请求。由于 AJAX 是一种特定于浏览器的技术，因此我们必须创建一个特定于浏览器的对象，例如在 Internet Explorer 中；我们将如下所示创建它

new ActiveXObject("Microsoft.XMLHTTP");

现在，我们将使用 XMLHttpRequest 对象调用服务器端代码

xmlHttpReq.open('POST', targetURL, true);

我们的 xmlHttpRequest 对象的不同状态将让我们知道我们已经走了多远。它的 readyState 4 告诉浏览器我们的请求已成功完成，并且控制已返回给浏览器。readyState 可以是四种不同的类型，如下所示

• 0 = 未初始化
• 1 = 正在加载
• 2 = 已加载
• 3 = 正在处理       
• 4 = 完成

if (xmlHttpReq.readyState == 4) {
    document.getElementById("result").innerHTML = xmlHttpReq.responseText;
    document.getElementById("generationStatus").innerHTML= "Done !!";
}
else
{
    document.getElementById("generationStatus").innerHTML= 
				"Generating Random numbers...";
}

我们还可以以 TEXT 或 XML 的形式获得服务器的响应，例如

// FOR TEXT Response
xmlHttpReq.responseText;

// FOR XML Response
xmlHttpReq.responseXML;      

最后，让我们看一下下面的服务器端代码。它只是使用 rnd 方法生成随机数

for i = 1 to 9999
      Randomize()
      response.Write(rnd)
next

我们已经成功地完成了我们的第一个 AJAX 示例，为了品尝它，只需将这两个文件放在您的 Web 服务器上，然后运行网页 showRandomNos.html...

尽情享用！

历史

• 2006 年 10 月 8 日：首次发布