浅析Ajax的四种开发模式
作者：李咏琪
来源：《科技创新导报》2011年第01期
作者：李咏琪
来源：《科技创新导报》2011年第01期
摘 要:Ajax的主要特点在于异步交互,更新web页面的局部信息。本文分析了Ajax的实现原理,通过实例介绍了Ajax常用的四种开发模式。
关键词:异步交互Ajax开发模式
中图分类号:TP393.02 文献标识码:A 文章编号:1674-098X(2011)01(a)-0028-02
在传统的web应用中,用户使用浏览器浏览网页,浏览器等待刷新发送ajax请求的步骤,当网页刷新很慢时,屏幕内容一片空白,用户只能在屏幕前等待浏览器的响应。这是因为传统的web应用采用同步交互过程,即用户首先向服务器发送一个请求,服务器接收到用户的请求后开始执行用户请求的操作,最后将结果返回给浏览器。在服务器处理时,用户只能等待。这是一种不连贯的用户体验。
当负载较小时,这种方式没有体现出什么问题。可是当负载较大时,响应时间可能比较长,用户等待时间也较长。另外,有时用户只需要更新页面的部分数据,而不需要更新整个页面。在软
件设计越来越人性化的时候,我们应该通过一定的方法来改进用户体验。由此产生了异步的工作方式。例如在输入表单时,在异步的工作方式下,当用户输入部分内容的时候,服务器可以先检查输入的内容。异步交互、局部更新正是Ajax可以实现的功能。
1 Ajax的实现原理
Ajax应用程序的加载和传统的web应用程序没什么区别:首先,某个用户操作引发了浏览器的一次HTTP请求。然后服务器处理这个请求。生成合适的HTML、CSS以及Javascript,并发送至客户端。最后,客户端浏览器将这一段HTML显示出来。
随后,用户在该Ajax页面上的后续操作将和传统web页面完全不同。用户的操作将不会引发浏览器的另一次HTTP请求,取而代之的是将引发客户端的某段JavaScript代码的执行。一次用户操作的全过程可以分为7个步骤:
(1)用户在页面上执行了某个操作,例如点击某个按钮等;
(2)根据用户的操作,页面发出相应的DHTML事件;
(3)调用注册到该DHTML事件的客户端JavaScript事件处理函数,其中初始化了一个用以向服务器发送异步请求的XMLHttpRequest对象,同时指定一个回调函数,当服务器端的响应返回时,将自动调用该回调函数;
(4)服务器收到XMLHttpRequest对象的请求后,开始根据请求进行一系列的处理;
(5)处理完毕,服务器返回客户端所需要的数据;
(6)数据到达客户端之后,执行JavaScript回调函数,并根据返回的数据对用户界面进行更新。
(7)用户看到界面的变化。
在整个过程中,用户并没有被阻塞,依然可以浏览当前页面的其他部分,甚至还可以再引发事件并触发另一个与服务器的异步交互过程。这种模式即非阻塞的异步通信模式,在用户体验方面有很大的进步。
2 Ajax的开发模式
目前,Ajax技术没有统一的开发模式。不同的开发模式针对不同的Ajax项目在实现上有一些差别。下面介绍Ajax常见的四种开发模式。
2.1 XMLHTTP+WebForms
XMLHTTP+WebForms是使用Ajax技术进行web应用开发的最基本方法。在这种模式下,通过JavaScript去操作XMLHttpRequest对象,发送异步请求到服务器端。另一方面,在服务器端可以直接接受XMLHttpRequest的请求。并根据请求进行相对应的处理,处理完成后返回相应的执行结果给XMLHttpRequest对象。最后再直接使用JavaScript语言代码将返回的结果显示出来。下面用这种方法实现一个输入小写字母,点击按钮,转换为大写字母输出的页面。如图 1所示。
主要代码如下:
(1) 客户端
客户端里创建XMLHttpRequest对象以及发起异步请求、回调处理。
创建XMLHttpRequest对象。
varxmlHttp=null;
function creatXMLHTTP()
{
//根据浏览器的不同,创建XMLHttpRequest对象。
}
发起异步请求。
function sendRequest(url)
{creatXMLHTTP();
xmlHttp.open("GET",url,true);
adystatechange=httpStateChange; //指定响应函数
xmlHttp.send(null);//发送请求
}
回调处理函数。
functionhttpStateChange(){
adyState==4){//判断对象状态
if(xmlHttp.status==200)//信息已经成功返回、开始处理信息
{sponseText;
sult.value=a;//显示服务器传回的信息
} else{
window.alert("异常");
}}}
functionusercheck()
{
vartest=stmsg.value;
if(test=="")
{window.alert("输入不能为空");
returnfalse;}
else{
varurl="ajax.aspx?test="+test;
sendRequest(url)
}
页面上的控件代码如下:
提交给ajax.aspx页面
(2)服务器端
服务器端就是一个WebForm,接受客户端传递的参数然后将其转化为大写后返回给客户端。本例中WebForm为ajax.aspx。
protected void Page_Load(object sender, EventArgs e){
if (!IsPostBack){
string test = Request.QueryString["test"].ToString().Trim();
string result = test.ToUpper();
Response.Write(result);
Response.Flush();
Response.End();
}}
2.2 XMLHTTP+HttpHandler
XMLHTTP+HttpHandler模式与XMLHTTP+WebForms模式相比,客户端的实现并没有变化,还是直接使用JavaScript语言代码操作XMLHTTP对象,但在服务器端已经改用HttpHandler接收和处理异步请求。下面用这种方式来实现小写转大写的例子。
(1)客户端
在上面的例子中只需要更改发送请求函数的url。主要代码如下:
function sendRequest(){
creatXMLHTTP();
var url="hello.ashx?name="+ElementById(‘testmsg’).value;
xmlHttp.open("GET",url,true);
adystatechange=onSuccessCallBack;
xmlHttp.send(null);
}
(2)服务器端
服务器端编写一般处理程序文件hello.ashx,代码如下:
public class hello: IHttpHandler{
public void ProcessRequest(HttpContext context){
context.Response.ContentType="text/plain";
string name=context.Request.QueryString["name"];
context.Response.Write(name.ToUpper());}
public bool IsReusable{
get{
return false;}}}
2.3 CallBack
CallBack是ASP.NET 2.0新增的开发方式。它要求页面实现ICallbackEventHandler接口。ASP.NET的回调,就是使用ICallbackEventHandler接口。它包括两个方法:RaiseCallbackEvent0方法执行对异步请求的服务器端处理;GetCallBackResult0方法返回异步请求的处理结果。通过实现RaiseCallbackEvent()和GetCallbackResult()方法来实现回调,最后通过调用ClientScript.GetCallbackEventReference()方法实现Ajax效果。下面用这种方式来实现小写转大写的例子。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论