在ASP.NET中使用AJAX的简单方法

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

作者：highill 来源：赛迪网技术社区 2007年11月28日

在ASP.NET中使用AJAX的简单方法
来源：天极开发

介绍

　　本文介绍了使用AJAX和ASP.NET编写web应用程序的一个简单方法。同时，讨论了使用AJAX的好处和不足。为了举例说明，本文给出了相应的JavaScript代码和用C#.NET编写的ASP.NET代码。

　　为什么使用AJAX

　　也许大多数人已经知道AJAX的意思是异步JavaScript和XML（Asynchronous JavaScript and XML）。据我所知，这项技术最初是由Microsoft在1999年提出来的，也就是我们所熟知的"使用远程调用(remote calls)的DHTML / JavaScript web应用程序"。这项技术的核心就是通过浏览器发出一个异步的HTTP请求来调用服务端的网页或服务，在返回结果后，无需刷新就可以更新整个网页。这项技术经过不断地完善，到目前为此，使用AJAX的web程序从表现上看已经非常类似于Windows程序了。

　　由于这项技术的实现需要依赖于前端的浏览器，因此，它的使用受到了限制。但在最近的几年，由于浏览器功能的加强和一些公司，如Google、Amazon.com的许多基于AJAX的应用的不俗表现，终于使这项技术凤凰涅磐、欲火重生。

　　现在AJAX的使用已经非常广泛，任何带有丰富用户体验的动态网页都会不约而同地使用AJAX。

　　解决方案

　　本文所描述的使用AJAX的方法非常简单，而且效率很高。同时这种方法还非常容易维护，并且开发人员无需任何的特殊技巧就可以实现它，而且使用这种方法还可以跨浏览器。

　　一个基本的AJAX实现需要两个主要部分：一个使用JavaScript代码编写的客户端HTML页，这些JavaScript用来向服务端发送请求和接收响应；一个可以接收请求和向客户端发送响应信息的远程页面。客户端的JavaScript代码的任务是建立一个XmlHttp对象，然后向服务端发送请求信息，最后通过回调方式处理服务端返回的响应信息。这一切都是由JavaScript代码实现的。

　　本文的例子使用ASP.NET程序实现，在实现上要做到以下几点：

　　1、AJAX可以在不同的ASP.NET页上向不同的服务端页发送请求。

　　2、远程页面URL可以包含动态可计算的参数，这样做可以在ASP.NET的后端代码中更方便地建立URL字符串。

　　3、远程页在更新HTML页之前可以使用复杂的数据进行响应，这也可以由ASP.NET的后端代码完成。

　　4、一个服务端页面可以是一个扩展的第三方的页面，也可以是本身的web页或服务。

　　以上的几点如图1所示

实现基本的AJAX JavaScript方法

　　我将JavaScript方法分成两部分：调用特殊页的JavaScript方法和一般的JavaScript方法。特殊的方法包括一个回调方法，它的作用是更新页面内容。而其它的AJAX方法负责建立一个XmlHttp对象，并向服务端发出一个异步的HTTP请求。

　　建立的XmlHttp对象因客户端浏览器的不同而有所差异。本文只考虑两种浏览器：一个是Microsoft的IE系列浏览器；另一个是Mozilla系列浏览器，包括Mozilla Firefox、Netscape和Safari。我也在Opera浏览器上测试过，但我不能保证本文的代码可以很好地运行Opera浏览器上。下面是如何建立XmlHttp对象的代码：

function GetXmlHttpObject(handler)
{
　var objXmlHttp = null;
　if (!window.XMLHttpRequest)
　{
　　// Microsoft
　　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<clsids.length && xmlHttp == null; i++) {
　　xmlHttp = CreateXmlHttp(clsids); gtW7K* n
　} rFRp P03\<
　return xmlHttp; $rKqif~qIy
} Y. 1Z
(PH2+6U;
function CreateXmlHttp(clsid) { ?Ts<L@1
　var xmlHttp = null; s/2-vj4Y&
　try { ILc4utMDO
　　xmlHttp = new ActiveXObject(clsid); Y\5C KbEQ
　　lastclsid = clsid; yx^TNTpu
　　return xmlHttp; t<zf s??(
　} nh**>p1
　catch(e) {} w7Nd' i
} Pm)|_};
@>N\FAh64
　　由于MSXML5只是为Office设计的，因此，我们可以不考虑MSXML5。所以GetMSXmlHttp方法可以简化为以下形式： 3I|0X<Q
>^m}jj
function GetMSXmlHttp() { 9-\Ao ?:
　var xmlHttp = null; (QHEpV<9o
　var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0"]; Na'Vj5:}
　for(var i=0; i<clsids.length && xmlHttp == null; i++) { U NkOZX
　　xmlHttp = CreateXmlHttp(clsids); HK=@6Qg8
　} g5Y_ kt
　return xmlHttp; 0A&ro*s(A
} O?0HE{~4r
_1dy; vCb
　　我们可以看出，GetXmlHttpObject方法有一个handle参数，这个参数指向一个回调方法，这个回调方法将被定义在每一个需要刷新的aspx页中。现在我们已经有了一个XmlHttp对象，接下来我们可以发送一个异步的HTTP请求了。 WWllF,B
D<cFAn
function SendXmlHttpRequest(xmlhttp, url) { .t$&,B#
　xmlhttp.open('GET', url, true); Enu6-l
　xmlhttp.send(null); l0&GSV-jF}
} .W}d-%
PL!-O
　　在以上代码中我使用了一个GET HTTP请求发送了一个URL，你可以很容易修改以上的JavaScript代码，使其发送其它的HTTP方法。

查看本文来源

VIP专区

VIP用户

普通用户

邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题

往期文章

在ASP.NET中使用AJAX的简单方法

业界热点: