ASP.NET Web应用程序的简单AJAX实现_[Asp.Net教程]
提要 本文描述了使用一种简单的方式来实现在ASP.NET web应用程序中加入AJAX功能。
一、 简介 本文描述了一种简单的方式来实现在ASP.NET web应用程序中加入AJAX功能。我们还将讨论使用AJAX的优缺点。为了说明问题，本文还提供了一些可用的JavaScript和C#.NET代码。
二、 为什么使用AJAX 大多数读者可能已经知道，AJAX代表了异步JavaScript+XML。这种技术首先由微软在1999年引入，并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是，允许一个互联网浏览器向一个远程页面/服务作异步的HTTP调用，并且用收到的结果更新一个当前web页面而不必刷新整个页面。根据这种技术创建者的意见，这种技术应能够改进客户端的体验-使得HTTP页面外观与使用感觉很类似于Windows桌面应用程序。
因为这种技术的核心实现是基于互联网浏览器功能，所以其用途在当时是很有限的。但是，几年过去了，随着新一代浏览器的支持和大量的应用实践（例如Google，Amazon.com，eBay等），这种技术已经重新焕发生机。
今天，它以AJAX著名，被作为任何提供高级用户体验的动态页面的自然的构成部分。
三、 方案描述 在本文中我们所推荐的方案尽管很简单，然而却十分有效地实现了AJAX功能。这个程序很容易维护和修改，不要求开发者具备任何特别的技巧；而且，根据我们的经验，它还是跨浏览器兼容的。
基本上，一个常规的类似AJAX的实现包括两个主要组成部分：一个使用JavaScript代码进行AJAX调用并接收响应的客户端HTML页面；一个远程页面-它能够接收一个请求并对请求的信息加以响应。在客户端页面中的JavaScript代码负责实例化一个XmlHttp对象，然后提供给这个对象一个回调方法-它负责处理收到的信息，最后把请求经由XmlHttp对象发送到远程页面。所有这些都是通过JavaScript代码来实现的。
我们的方法主要是针对于ASP.NET应用程序中的应用，并且考虑下列可能的情形：
· AJAX调用可以发生于web应用程序的不同的ASP.NET页面上甚至是远程页面上；
· 一远程页面URL可能包含动态计算的参数，并且可能在ASP.NET页面的code-behind处构建一个URL字符串更为方便些；
· 在更新一个HTML页面之前，一个远程页面可能响应于一个复杂的数据分析要求；
· 一远程页面可能或者是一个外部的第三方页面，或者是该Web应用程序自己的页面或服务。
所有的这些考虑都显示在下图中：
四、 实现 (一) 基本AJAX JavaScript方法
我把所有的JavaScript方法分成两部分：调用页面特定的JavaScript方法，和通用于所有调用页面的AJAX JavaScript方法。特定的方法还包括一个回调函数，由于它负责更新页面内容。通用的AJAX方法负责实例化一个XmlHttp对象并向远程页面发送异步请求。
得到一个XmlHttp对象的过程因浏览器的不同而有所不同。我把它们区分为两种不同的基本类型：微软浏览器（IE家族之一）和Mozilla浏览器（它是指Mozilla Firefox，Netscape，或Safari之一）。我还在Opera浏览器上测试了本文中的代码，但是我不可能保证它会一直工作良好。
function GetXmlHttpObject(handler){
var objXmlHttp = null;
if (!window.XMLHttpRequest) {
//微软
objXmlHttp = GetMSXmlHttp();
if (objXmlHttp != null) {
objXmlHttp.onreadystatechange = handler;
}
}
else {
// Mozilla | Netscape|Safari
objXmlHttp = new XMLHttpRequest();
if (objXmlHttp != null) {
objXmlHttp.onload = handler;
objXmlHttp.
onerror = handler;
}
}
return objXmlHttp;
}
function GetMSXmlHttp(){
var xmlHttp = null;
var clsids = ["Msxml2.XMLHTTP.6.0"，"Msxml2.XMLHTTP.5.0"，
"Msxml2.XMLHTTP.4.0"，"Msxml2.XMLHTTP.3.0"，
"Msxml2.XMLHTTP.2.6"，"Microsoft.XMLHTTP.1.0"，
"Microsoft.XMLHTTP.1"，"Microsoft.XMLHTTP"];
for(var i=0; i
xmlHttp = CreateXmlHttp(clsids[i]);
}
return xmlHttp;
}
function CreateXmlHttp(clsid) {
var xmlHttp = null;
try {
xmlHttp = new ActiveXObject(clsid);
lastclsid = clsid;
return xmlHttp;
}
catch(e) {}
}
如你所见，GetXmlHttpObject方法接受一个处理器参数-它是一个应该在页面特定的代码定义的回调方法的名字。现在，既然我们已经有了一个XmlHttp对象，那么我们就可以发送异步的请求了。
function SendXmlHttpRequest(xmlhttp， url) {
xmlhttp.open('GET'， url， true);
xmlhttp.send(null);
}
我使用一个指向一个给定URL的GET HTTP方法，但是这可以通过修改上面的JS代码加以改变。
(二) 页面特定的方法
现在，我们已经建立起实现一个到远程页面调用的所有方法。为此，我们需要把回调函数名传递给GetXmlHttpObject方法，然后把URL串传递给SendXmlHttpRequest方法。
var xmlHttp;
function ExecuteCall(url){
try {
xmlHttp = GetXmlHttpObject(CallbackMethod);
SendXmlHttpRequest(xmlHttp， url);
}
catch(e){}
}
//当状态改变时（例如收到数据时），CallbackMethod将激发
function CallbackMethod() {
try {
//readyState＝4 或'complete' 代表了数据已经返回
if (xmlHttp.readyState == 4 ||
xmlHttp.readyState == 'complete') {
var response = xmlHttp.responseText;
if (response.length > 0) {
//更新页面
document.getElementById("elementId").innerHTML= response;
}
}
}
catch(e){}
}
CallbackMethod负责更新页面内容。在我们的示例中，它只是简单地更新给定HTTP元素的内部HTML。但是，在实际开发中，它可能更为复杂些。
有关于调用页面实现的最后一个问题是，我们如何调用ExecuteCall JS方法。其实，这依赖于这个页面正在做什么。在一些情况中，ExecuteCall方法在JS事件被激发时被调用。但是，如果情况不是这样，我们可以把这个方法注册为这个页面的一个启动脚本-使用在该页面的code-behind中的相应的C#代码。
Page.RegisterStartupScript("ajaxMethod"，
String.Format(""， url));
我们可以把这一行代码添加到ASP.NET code-behind文件的Page_Prerender或Page_Load方法中。
(三) 远程页面
下面，让我们分析一下过程页面看起来的样子。如果这是一个ASP.NET页面(我们假定如此)，那么我们仅对它的code-behind感兴趣。我们可以很容易地从这个.aspx文件中移去所有代码：它不会以任何方式影响这个页面的行为。
例如，我们使用一个公共的web服务-它能够把温度值从摄氏转换为华氏（以及相反的实现）。此处提供了一个这样的可用的服务。如果你把这个URL作为一个web引用添加到你的工程中，那么Visual Studio将在你的当前的命名空间中生成一个名为com.developerdays.ITempConverterservice的代理类。我们的远程ASP.NET页面（假设命名为getTemp.aspx），将接收一个查询串参数（名为"temp"）-它应该包含一个要转换的摄氏温度的整型值。所以，到远程页面的目标URL看上去类似于：http://localhost/getTemp.aspx?temp=25。下面显示了这个页面的code-behind：
private void Page_Load(object sender， EventArgs e){
Response.Clear();
string temp = Request.QueryString["temp"];
if (temp != null) {
try {
int tempC = int.Parse(temp);
string tempF = getTempF(tempC);
Response.Write(tempF);
}
catch { }
}
Response.End();
}
private string getTempF(int tempC){
com.developerdays.ITempConverterservice
svc = new ITempConverterservice();
int tempF = svc.CtoF(tempC);
return tempF.ToString();
}
根据我们的惯例，现在我们可以为将传递到RegisterStartupScript方法中的远程页面构建一个URL字符串，象下面这样：
int tempC = 25;
string url=String.Format("http://localhost/"+"getTemp.aspx?temp={0}"， tempC);
使用这种方法并结合一个中间ASP.NET页面调用允许简化响应处理，特别是在请求分析的时候。在简单的情况中，当响应仅包含文本数据时，我们可以把远程服务URL直接传递给JS ExecuteCall方法。
五、结论
本文意在向你展示把AJAX技术使用于任何ASP.NET应用程序的简单性。然而，AJAX也有一些缺点，从用户体验角度来看，它也提供了一些优点。这完全要由开发者来决定是否使用AJAX技术，但是我在本文中仅向你展示了简单的情形，它不需要花费很长时间且不需要任何特定技巧。
作者：朱先忠编译 来源：天极网
