分享
 
 
 

ASP.NET Web应用程序的简单AJAX实现

王朝asp·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

提要 本文描述了使用一种简单的方式来实现在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<clsids.length && xmlHttp == null; 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("<script>ExecuteCall('{0}');</script>", 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技术,但是我在本文中仅向你展示了简单的情形,它不需要花费很长时间且不需要任何特定技巧。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有