在ASP.NET中使用AJAX(转译自www.asp.net网站)(一)
题记:
不久前在一份外国人的BLOG中看到这样的论述,关于为什么写BLOG,他说是为了忘却的记念,为了理解自己的思绪,为了让自己的想法获得一个文件式的记忆.这样说的很有道理.但是此篇文章,是译自别人的技术文章.也许,也是为了忘却的记念吧!
说明:
ASP.NET的页面是基于回传模式的,这也就竟味着,如果你想执行服务器端的事件,在客户端必须要回传页面.这种事件驱动模式,当然更强大,但是它必须每次回传都要重写页面.现在的大多数浏览器都支持JS和DHTML.AJAX 模式就为了让用户有更智能的体验到方便快捷的操作.在第一部分,我会用一人简单的例子来解释这个模型.
AJAX 是什么?
它就是异步JS和XML的缩写.它不是一项新技术.IE, HTML, XML, DOM, XMLHTTP 已经存在并使用好多年,AJAX就是让它们彼此分离的部分合到一起,来进行工作.
想像一下,如果有一个按钮,标签,和文本框的网页,文本框来执按受一个ID,当你点击BUTTON时会在标签里显示相关ID 的用户名,你会怎么做?
你会在你的按钮事件里写上获得相关ID用户信息的过程,再促发一个回传事件,可是你再想如果你的网页上有很多控件,那每次回传都要重写,是不是很费服务器资源,当然会影响处理速度.
AJAX解决了这个问题.利用它你不再需要上频繁的回传网页,相反你可以发送一个请求,在服务器端处理,然后返回,相应的控件也就会重写,显示所需要的值.
一方面,这种模式可以让用户有更好的体验,并能提高速度,但是另一方面你要考虑你的浏览器是否支持JS.
一个简单的例子:
为了体验这种模式的工作方式,我们来作一个例子,这个例子包括两个网页,其中一个有一个按钮和标签,这个网页将通过AJAX来调用第二个网页.第二个网页没有用户接口,不直接显示内容.当LOAD页面时它用来输出"HELLO WORLD" ,这个字符串会显示在第一个窗体的标签上.
1> 用VS.NET 新建一个WEB应用程序
2> 添加一个窗体,并放上按钮和标签各一个
3> 在写LOAD事件中写过程
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
Button2.Attributes.Add("OnClick",
"return GetDataViaAJAX();")
If Page.IsPostBack Then
Label1.Text = "Server Date Time :" & DateTime.Now
End If
End Sub
在这我们要对这个按钮添加一个客户端处理事件,我们让标签显示出服务器的日期,但是它不会出现在标签上,因为根本没有回传事件,这样写只是为了验证一下,然后,在HTML页面文件的<HEAD>里面加上如下的JS方法:
var obj;
function GetDataViaAJAX()
{
try
{
obj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e1)
{
obj = null;
}
}
if(obj!=null)
{
obj.onreadystatechange = ProcessResponse;
obj.open("GET",
"http://localhost/AJAXDemo/helloworld.aspx", true);
obj.send(null);
}
return false;
}
在这我们实例化一个XMLHTTP类,这是AJAX模型的关键所在,它可以异步获取服务器资源.TRY...CATCH块是为了防止,MSXML不同版本而出现的异常.
该类onreadystatechange这个属性是用来调用ProcessResponse方法,ProcessResponse这个方法用来处理获得的数据,
然后,我们通过GET或是POST调用OPEN方法,最后执行SEND方法,假设你用POST方式可以传递参娄,而这里用的是GET所以我们不用考虑参数.
function ProcessResponse()
{
if(obj.readyState == 4)
{
if(obj.status == 200)
{
var retval=obj.responseText;
alert(retval);
}
else
{
alert("Error retrieving data!" );
}
}
}
当第二个页面传回HELLOWORK时,这个ProcessResponse就会调用.检验RreadyState属性值,如果是4代表请求完成,然后如果代码状态值是200,则表明OK.
最后我们通过responseText来获得返回数据,还有一个responseXML属性是用来获得返回的XML数据(如果有的话)
下面添到第二个网页上LOAD事件中的代码:
Private Sub Page_Load(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles MyBase.Load
Response.Clear()
Response.Write("hello world")
Response.End()
End Sub
在这,首先清理RESPONE,发送一个字符串.设置第一个页为启始页,启动项目,查看结果.
例子源代码下载
总结:
在这篇文章中,我们看到了如何用AJAX来帮助我们处理响应和提高效能.同样,我们也看到了XMLHTTP component 是如何试水IE的.
在下一节,我会讲述更详细,更复杂的获取XML的方法.
备注:签于个人水平,文章中难免有错误纰漏这处,敬请原谅!本文章转译自www.asp.net,不能用于商业用途,如果转载请注明出处.
