随着互联网技术的飞速发展,AJAX(Asynchronous JavaScript and XML)成为了Web 2.0时代的重要技术之一。尽管AJAX并非一项全新的技术,但近年来,随着谷歌、维基百科等众多网站的采用,它开始迅速占领市场份额。本文不会深入探讨AJAX是什么(可以访问维基百科了解更多信息),而是将介绍一些简单的概念,帮助轻松地将AJAX应用到下一个ASP.NET应用程序中。
背景:微软似乎在采用AJAX方面起步较慢,在.NET 1.1和VS2003中对它的支持非常有限。他们确实发布了ATLAS,这是一套帮助在.NET 2.0中实现AJAX的库。可以在维基百科上了解更多关于ATLAS的信息。但是,更倾向于通过示例来说明如何使用XMLHttpRequest对象,以及如何轻松地将其功能实现到网站中,而不需要太多的开销。
开始使用:喜欢AJAX的原因有两点。首先,喜欢网站不需要不断地进行回发来收集信息。其次,喜欢AJAX是一种“多面手”的技术。它需要一点HTML知识,一点JavaScript知识,一点服务器端脚本语言知识(PHP、ASP.NET等),以及一点CSS知识。因此,在开始之前,最好掌握这些工具。虽然要展示的代码并不复杂,但基础知识是绝对必要的。
概述:AJAX的核心功能在于XMLHttpRequest对象。使用这个对象有四个主要步骤:创建请求、发送请求、接收响应和处理响应。在Shoutbox示例中,使用一个单独的JavaScript函数来处理每个任务。所做的,用外行的话来说,就是访问XMLHttpRequest对象,添加一个委托来处理响应处理,给它一个包含服务器端脚本地址的URL(以及想要的任何查询字符串变量),然后等待服务器端脚本将响应传回给。响应的好处在于,它基本上只是要得到的文本,所以它可以是格式化的HTML、逗号分隔的列表、XML文档等。所以,一旦从服务器收到响应,就使用JavaScript将文本放入表格、div、span等。
使用代码:创建和使用代码有几个不同的步骤。因为AJAX使用多种技术来完成任务,将在这里简要解释,并使用包含的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shoutbox</title>
<link rel="stylesheet" type="text/css" href="shoutbox.css">
<script type="text/javascript" src="shoutBox.js"></script>
</head>
<body>
<div id="shoutbox">
<table>
<tbody>
</tbody>
</table>
</div>
<form id="form1">
<input type="text" id="name" name="name" />
<input type="text" id="message" name="message" />
<input type="button" value="Send" onclick="sendMessage()" />
</form>
</body>
</html>
shoutBox.aspx - 老实说,甚至不需要是一个ASP.NET页面。这可以只是一个标准的HTML文件。它包含了将用来激活JavaScript并显示响应的HTML。
shoutBox.js - 这是JavaScript文件(从shoutBox.aspx页面引用),它处理所有的请求处理。
shoutbox.xml - 以XML格式存储所有消息。
shoutbox.css - 样式表。这是可选的,但肯定会帮助应用看起来更酷。
saveXML.aspx - HTML页面本身没什么...只对代码后端感兴趣。这是处理XML请求、进行所有处理并返回响应的服务器端脚本。
不会在这篇文章中包含很多源代码,因为在源代码中提供的代码已经很好地记录了。如果对C#相当熟悉,提供的服务器端代码对来说应该是小菜一碟。如果不是,会解释三种方法:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string name = Request.QueryString["name"];
string message = Request.QueryString["message"];
saveNewMessage(name, message);
}
}
Page_Load() - 在这里,从XMLHttpRequest对象接收查询字符串,将消息保存到XML文件中(见下文),并写出响应(响应包含格式化的消息的HTML格式)。
private void saveNewMessage(string name, string message)
{
// 接受一个消息字符串和一个用户名。这在XML文件中添加一个新节点,包含消息,并在服务器端保存XML。
}
saveNewMessage() - 接受一个消息字符串和一个用户名。这在XML文件中添加一个新节点,包含消息,并在服务器端保存XML。
private string getMessages()
{
// 从XML文件中加载消息,创建一个数据表,并将消息加载为行,按时间戳对数据表进行排序,然后将所有行转换为格式化的HTML。这个方法返回一个字符串,是响应的输出。
}
getMessages() - 从XML文件中加载消息,创建一个数据表,并将消息加载为行,按时间戳对数据表进行排序,然后将所有行转换为格式化的HTML。这个方法返回一个字符串,是响应的输出。
感兴趣的点:尝试了几种JavaScript选项,最后选择了在这里提供的库。注意到最大的争议点是响应处理委托的确切编码(在代码中称为processResponse())。确保XMLHttpRequest对象永远不会失去作用域的关键是声明一个全局变量并一次性初始化它。之前试图在函数内创建对象,然后将对象作为参数传递给委托,结果失败了(不断地得到类型不匹配的错误)。
可能注意到处理了所有的格式化,然后返回一个格式化的字符串给客户端。这样做有几个原因。首先,不是JavaScript高手,所以对来说,客户端处理XML是有问题的。宁愿使用VS.NET,用信任的Intellisense在服务器端处理所有事情。其次,服务器有一个目的(引用最近的IBM广告):“服务!”所以,为什么不让它们做它们最擅长的事情呢?