AJAX 揭秘 - 第一部分 - AJAX Shoutbox

• 下载演示项目 - 16.2 Kb

引言

AJAX 代表异步 JavaScript 和 XML，它是网络上发展最快的一项技术，引领着“Web 2.0”一代的潮流。虽然它本身并不是一项“新”技术，但直到最近它才因 Google、Wikipedia 和无数其他网站的使用而获得了市场份额。本文不会深入探讨 AJAX 是什么（您可以通过访问 Wikipedia 找到更多信息），而是将探讨一些简单的概念，这些概念将帮助您轻松地在下一个 ASP.NET 应用程序中实现 AJAX。

背景

微软似乎在采用 AJAX 方面行动缓慢，在 .NET 1.1 和 VS2003 中对其支持非常有限。他们确实发布了 ATLAS，这是一套用于辅助在 .NET 2.0 中实现 AJAX 的库。您可以在 Wikipedia 上阅读更多关于 ATLAS 的信息。但是，我宁愿不只是给您一些库然后说“玩得开心”，而是更愿意演示 XMLHttpRequest 对象的用法，并展示如何在您的网站中轻松实现其功能，而开销却非常小。

入门

我之所以如此喜欢 AJAX，原因有二。首先，我喜欢网站不必进行持续的后期回发来收集信息。其次，我喜欢 AJAX 是一种“万金油”技术。它需要一点 HTML 知识、一点 JavaScript 知识、一点服务器端脚本语言（PHP、ASP.NET 等）知识，以及一点 CSS 知识。因此，在开始之前，最好拥有这些工具。虽然我将要提供的代码并不复杂，但上述四项技术的基础知识是必不可少的。

概述

AJAX 的核心功能在于 XMLHttpRequest 对象。使用此对象有四个主要步骤。

• 创建请求
• 发送请求
• 接收响应
• 处理响应

在聊天框示例中，我使用一个单独的 JavaScript 函数来处理每个任务。通俗地说，我们所做的就是访问 XMLHttpRequest 对象，添加一个委托来处理响应处理，给它一个包含我们服务器端脚本地址的 URL（并包含我们想要的任何查询字符串变量），然后等待服务器端脚本将响应传回给我们。响应的绝妙之处在于，我们基本上只是收到文本，它可以是格式化的 HTML、逗号分隔列表、XML 文档等。因此，一旦我们从服务器收到响应，我们就使用 JavaScript 将文本放入 table、div、span 等元素中。

使用代码

创建和使用代码有几个不同的步骤。因为 AJAX 使用多种技术来完成其任务，所以我将在此简要解释并使用我包含的示例。

• shoutBox.aspx - 老实说，它甚至不需要是一个 ASP.NET 页面。它可以只是一个标准的 HTML 文件。它包含我们将用于激活 JavaScript 并显示响应的 HTML。
• shoutBox.js - 这是（从 shoutBox.aspx 页面引用的）JavaScript 文件，它处理我们所有的请求处理。
• shoutbox.xml - 以 XML 格式存储所有消息。
• shoutbox.css - 样式表。这是可选的，但肯定能让您的应用程序看起来很酷。
• saveXML.aspx - HTML 页面什么都没有……我们只关心代码隐藏。这是处理 XML 请求、执行所有处理并返回响应的服务器端脚本。

我不会在本文中包含太多源代码，因为我提供的源代码文档已经相当齐全。如果您对 C# 比较熟悉，提供的服务器端代码应该对您来说是小菜一碟。如果不是，我将解释三个方法。

• Page_Load() - 在这里，我们接收来自 XMLHttpRequest 对象的查询字符串，将消息保存到我们的 XML 文件（见下文），并写出响应（响应包含我们格式化的 HTML 格式的消息）。
• saveNewMessage() - 接受一个消息字符串和一个用户名。这会将一个新节点添加到带有消息的 XML 文件中，并在服务器端保存 XML。
• getMessages() - 这会加载 XML 文件中的消息，创建一个数据表，并将消息加载为行，按时间戳对数据表进行排序，然后将数据表中的所有行转换为格式化的 HTML。此方法返回一个字符串，即响应中的输出。

关注点

在确定我提供的库之前，我尝试了几种 JavaScript 编码选项。我注意到的最大争议点是响应处理委托（在我的代码中称为 processResponse()）的确切编码。确保 XMLHttpRequest 对象永不丢失作用域的关键似乎是将变量声明为全局变量并初始化一次。我之前尝试在函数内创建对象，然后将对象作为参数传递给委托，但这完全失败了（我一直收到类型不匹配的错误）。

您可能会注意到，我所有的格式化都在服务器端处理，然后将格式化的字符串返回给客户端。我这样做的原因有几个。首先也是最重要的，我不是 JavaScript 大师，所以客户端处理 XML 对我来说很麻烦。我更愿意使用 VS.NET，并通过我信赖的 IntelliSense 在服务器端处理所有内容。其次，服务器有一个目的（引用最近的 IBM 广告）：“为服务”！那么，为什么不让它们做它们最擅长的事情呢？

功能建议

您真正需要关注此代码的就是使用提供的 CSS 来设置聊天框的样式。所有代码都应“开箱即用”。您可能想做的一些更改？嗯，首先，您可以轻松地将其变成一个 Web 控件。您还可以清理消息输入中的链接，并相应地格式化锚定标签。您可以创建一个用户登录，并在隐藏的 HTML 输入中捕获其登录名，这样他们就不需要输入名字了。有许多可能性。希望这能帮助您走上正确的道路。

安全问题

您可能想考虑的一些附加要点：聊天框应该在一定程度上防垃圾邮件。输入一条消息并单击几十次只会添加一次消息。有一个检查以确保姓名和消息框至少有 1 个字符长。聊天框不会过滤掉链接、JavaScript 或任何格式化的 HTML。

祝您编码愉快！