AJAX 详解
4.35/5 (39投票s)
ASP.NET 应用程序的 AJAX 入门介绍。
引言
AJAX 不是一门编程语言，也不是一项新技术。自 Internet Explorer 5.0 包含 XMLHttpRequest 组件（它是 MSXML 的一部分）以来，AJAX 在技术上就已经可用了。这可以追溯到 1999 年。但是“AJAX”这个词是全新的。AJAX 代表“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），这个词是由 Adaptive Path 的创始人 Jesse James Garrett 创造的。
AJAX 依赖于 XMLHttpRequest、CSS、DOM 和其他技术。AJAX 的主要特点是其“异步”性，这意味着它可以在不刷新页面的情况下与服务器发送和接收数据。是的，您没听错……无需刷新页面。
那么什么叫异步？
在传统的网页中，当用户发送一个请求（例如单击“提交”按钮）时，用户会等待直到页面重新加载。在通常的等待期间，从几秒钟到“很久”，用户将看到一个空白的浏览器屏幕发呆。在异步模式下，客户端和服务器将独立工作并独立通信，允许用户继续与网页进行交互，而不会影响服务器上发生的事情。
那么 JavaScript 呢？
现在，秘密就在这里。JavaScript 用于向服务器发送异步请求。一旦从服务器收到响应，JavaScript 就用于修改显示给用户的页面内容，以表明用户发起的动作已成功。
还有 XML 呢？
从服务器异步发送到客户端的数据以 XML 格式打包，以便 JavaScript 轻松处理。虽然通常数据以 XML 格式发送到客户端，但也可以用许多其他格式（如纯文本）发送。
AJAX 并没有什么真正新颖的地方。通常，我们发出一个请求，然后收到一个页面作为响应。这就是 Web 的工作方式——唯一的区别是我们现在可以从 JavaScript 发出这些请求。
让我给您举个例子
让我们从一个简单的例子开始，获取服务器时间并使用 AJAX 将其显示在页面上。在这个例子中，为了让事情不那么复杂，我们将使用文本而不是 XML 来从服务器发送数据到客户端。创建一个新的 ASP.NET Web 应用程序。创建一个新的 WebForm，并将其重命名为“ClientServerTime.aspx”。将以下代码添加到页面的 <body> 中。
<form name="frmServerTime" id="frmServerTime">
<table border="0" cellpadding="4" cellspacing="0" id="Table2">
<tr>
<td><input type="button" name="btnTime"
value="Show Server Time" id="btnTime"
onclick="showServerTime();"></td>
</tr>
<tr>
<td><div id="serverTime"></div></td>
</tr>
</table>
</form>
这包含一个名为“serverTime”的 div，将用于显示服务器上的时间。showServerTime 是单击按钮时将调用的函数。此函数将包含检索服务器时间并显示它的代码。
为了让整个过程正常工作，首先我们需要创建一个请求对象。
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
//Send the xmlHttp get to the specified url
xmlHttp.open('GET', url, true);
xmlhttp.open 用于指定您用于发送请求的页面。在这种情况下，我们使用 GET 而不是 POST，因为我们只是从服务器获取一些值。
接下来，我们需要一个回调函数，它会一直等待直到从服务器发送响应。
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete')
{
//Gather the results from the callback
var str = xmlHttp.responseText;
}
readyState = 4 或“complete”表示响应已完成，我们可以继续处理接收到的数据。
看看完整的脚本。将其添加到您的 <script> 标签中
var xmlHttp;
var requestURL = 'getServerTime.aspx';
var is_ie5 = (navigator.appVersion.indexOf("MSIE 5.5")!=-1) ? 1 : 0;
function showServerTime()
{
//Append the name to search for to the requestURL
var url = requestURL;
var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';
xmlHttp = new ActiveXObject(strObjName);
xmlHttp.onreadystatechange = CallBackHandler;
//Send the xmlHttp get to the specified url
xmlHttp.open('GET', url, true);
xmlHttp.send(null);
}
// This function will be called when the state
// has changed, i.e. when data is returned from the server
function CallBackHandler()
{
// State of 4 or 'complete' represents that data has been returned
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){
//Gather the results from the callback
var str = xmlHttp.responseText;
//Populate the innerHTML of the div with the results
document.getElementById('serverTime').innerHTML = str;
}
}
创建另一个 WebForm，并删除 .aspx 页面中的所有行，除了 Page 指令。将 WebForm 重命名为“getServerTime.aspx”。在代码隐藏文件（getServerTime.aspx.vb）中，在 Page_Load 函数中添加以下行
Response.Write(Date.Now.ToString)
我们完成了
生成项目并运行它。单击按钮后，它会在不刷新页面的情况下显示服务器上的时间。
请注意，首次单击后的后续单击将不会显示正确的时间。这是因为页面被缓存了。要解决此问题，您需要在 showServerTime 函数的 requestURL 中添加一个小的查询字符串。
var url = requestURL + ‘?q=’ + Math.random();
源代码
您可以通过此页面顶部的链接下载源代码。在源代码中，数据以 XML 格式从服务器返回，而不是像上述示例中那样返回纯文本。这需要包含一个额外的页面“ServerTime.xslt”，该页面用作 XML 转换文件。您需要创建一个新的 ASP.NET 应用程序，将这些文件添加到项目中，生成它，然后运行“PageServerTime.aspx”页面。