彻底的Ajax
点击次数：15 次 发布日期：2008-11-26 22:36:43 作者：源代码网
|
源代码网推荐 源代码网推荐 Ajax的框架太多了！！纯Js的有extjs、jQuery、Prototype等；集成于开发框架的有Ajax.Net等；Rails直接集成了Prototype。这些框架的实现方式也各不相同，但是大体有这么三种实现方式： 源代码网推荐 源代码网推荐 UpdatePanel式 源代码网推荐 Rails式 源代码网推荐 彻底的Ajax 源代码网推荐 1，UpdatePanel式 源代码网推荐 源代码网推荐 UpdatePanel的工作方式是：将用户的请求（连同ViewState）以JavaScript的方式发送的服务器，获得该请求的是Ajax.Net的服务器组件（定义在Web.Config中）而不是目标页面；该组件解析请求，并会调用目标页面执行完整的页面周期（就跟直接访问该页面一个效果），获得该页面的输出，并且提出要更新的UpdatePanel的内容，将这一部分Html返回给客户端的Ajax.Net Client Library。客户端脚本就可以更新UpdatePanel了。该图示如下。 源代码网推荐 源代码网推荐 
源代码网推荐 UpdatePanel的工作方式 源代码网推荐 源代码网推荐 从图上可以很容易看出来，服务器页面不仅完全执行了而且还引入了Ajax.Net服务器组件的调用开销，这也是UpdatePanel适用于任何控件的原因。同学们也可以使用Fiddler结合断点调试（在PageLoad方法入口加断点）自己动手了解一下这个过程。 源代码网推荐 源代码网推荐 2，Rails式 源代码网推荐 源代码网推荐 Rails借助Prototye实现Ajax。客户端通过类似下面Prototype的脚本发起请求。 源代码网推荐 源代码网推荐 <form action="/store/add_to_cart/3" method="post" onsubmit="new Ajax.Request("/store/add_to_cart/3", {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;"> 源代码网推荐 源代码网推荐 传输的数据： 源代码网推荐 源代码网推荐 POST /store/add_to_cart/1 HTTP/1.1 源代码网推荐 Accept: text/javascript, text/html, application/xml, text/xml, */* 源代码网推荐 Accept-Language: zh-cn 源代码网推荐 x-prototype-version: 1.5.0 源代码网推荐 Referer: http://192.168.1.122:3000/store 源代码网推荐 x-requested-with: XMLHttpRequest 源代码网推荐 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 源代码网推荐 UA-CPU: x86 源代码网推荐 Accept-Encoding: gzip, deflate 源代码网推荐 User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; .NET CLR 3.5.20706) 源代码网推荐 Host: 192.168.1.122:3000 源代码网推荐 Content-Length: 61 源代码网推荐 Proxy-Connection: Keep-Alive 源代码网推荐 Pragma: no-cache 源代码网推荐 Cookie: _depot_session_id=ff9a536b4f87552687a7910b6d3b48e5 源代码网推荐 commit=%E6%B7%BB%E5%8A%A0%E5%88%B0%E8%B4%AD%E7%89%A9%E8%BD%A6 源代码网推荐 源代码网推荐 服务器端的Rails调用Action得到结果，然后渲染模板，这里的模板通常是一个Rjs文件。返回的是要执行的脚本（当然也可是别的你想让他返回的东西），类似下面的： 源代码网推荐 源代码网推荐 try { 源代码网推荐 Element.update("cart", "<div class="cart-title">u8d2du7269u8f66</div> <table> <tr id="current_item"> <td>1×</td> <td>Pragmatic Project Automationu4e2du6587</td> <td class="item-price">29.95u5143</td> </tr> <tr class="total-line"> <td colspan="2">Total</td> <td class="item-price">29.95u5143</td> </tr> </table> <form method="post" action="/store/checkout" class="button-to"><div><input type="submit" value=" u7ed3 u8d26 " /></div></form> <form method="post" action="/store/empty_cart" class="button-to"><div><input onclick="return confirm("u786eu5b9au6e05u7a7au8d2du7269u8f66?");" type="submit" value="u6e05u7a7au8d2du7269u8f66" /></div></form> "); 源代码网推荐 $("cart").visualEffect("blind_down"); 源代码网推荐 $("current_item").visualEffect("highlight", {startcolor: "#88ff88", endcolor: "#114411"}); 源代码网推荐 } 源代码网推荐 catch (e) 源代码网推荐 { alert(".........."); throw e } 源代码网推荐 源代码网推荐 这种方式要好于UpdatePanel的方式，虽然对于客户端来说没有什么不同，但是服务器端不再是执行一个完整的生存周期，而仅仅调用一个方法，开销要少很多。 源代码网推荐 源代码网推荐 3，彻底的Ajax 源代码网推荐 源代码网推荐 以上两种方式都存在一个问题：服务器端不仅要负责数据的运算，还要负责数据的显示，即Html或Javascript脚本的生成。 源代码网推荐 源代码网推荐 理想的Ajax应该是数据和表现完全分离的，即：客户端浏览器使用JavaScript发起运算请求并给出运输参数；服务器端负责运算，并把结果以数据的方式返回给浏览器；浏览器接到请求结果后，在客户端执行显示逻辑。 源代码网推荐 源代码网推荐 例如，用户在客户端输入了用户名，服务器端负责验证该用户是否存在。 源代码网推荐 源代码网推荐 发起的请求如： 源代码网推荐 源代码网推荐 POST /Default.aspx/IsUserExist HTTP/1.1 源代码网推荐 Accept: */* 源代码网推荐 Accept-Language: zh-cn 源代码网推荐 Referer: http://222.195.149.103:10007/ 源代码网推荐 Content-Type: application/json; charset=utf-8 源代码网推荐 UA-CPU: x86 源代码网推荐 Accept-Encoding: gzip, deflate 源代码网推荐 User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; .NET CLR 3.5.20706) 源代码网推荐 Host: 222.195.149.103:10007 源代码网推荐 Content-Length: 41 源代码网推荐 Proxy-Connection: Keep-Alive 源代码网推荐 Pragma: no-cache 源代码网推荐 源代码网推荐 {"userName":"200117","userRole":"Expert"} 源代码网推荐 源代码网推荐 所执行的方法应该类似： 源代码网推荐 源代码网推荐 [WebMethod] 源代码网推荐 public static bool IsUserExist(string userName, string userRole) 源代码网推荐 { 源代码网推荐 UserRole userRoleValue = (UserRole)Enum.Parse(typeof(UserRole), userRole, true); 源代码网推荐 源代码网推荐 switch (userRoleValue) 源代码网推荐 { 源代码网推荐 case UserRole.Administrator: 源代码网推荐 return DatabaseGateWay.GetNewDatabase().Administrators.Exist(userName); 源代码网推荐 case UserRole.Expert: 源代码网推荐 return DatabaseGateWay.GetNewDatabase().Experts.Exist(userName); 源代码网推荐 default: 源代码网推荐 return false; 源代码网推荐 } 源代码网推荐 } 源代码网推荐 源代码网推荐 返回的结果类似： 源代码网推荐 源代码网推荐 HTTP/1.1 200 OK 源代码网推荐 Date: Wed, 02 Jan 2008 08:01:30 GMT 源代码网推荐 Server: Microsoft-IIS/6.0 源代码网推荐 X-Powered-By: ASP.NET 源代码网推荐 X-AspNet-Version: 2.0.50727 源代码网推荐 Cache-Control: private, max-age=0 源代码网推荐 Content-Type: application/json; charset=utf-8 源代码网推荐 Content-Length: 11 源代码网推荐 源代码网推荐 {"d":false} 源代码网推荐 源代码网推荐 在这一过程中，传递的完全的是数据，客户端交付给用户的是“{"userName":"200117","userRole":"Expert"}”；服务器端返回的仅仅是“{"d":false}”。 源代码网推荐 源代码网推荐 服务器完全不必了解客户端是如何显示“该用户不存在”这一结果，而客户端也完全不需要知道服务器完成“判断该用户是否存在”这一逻辑。 源代码网推荐 源代码网推荐 这样便实现了客户端与服务器端、表现层与逻辑层的完全解耦合，使得服务器端的运算逻辑（通常以WebServices的形式给出）可以被Web、WinForm、Mobile等不同的客户端所复用。 源代码网推荐 源代码网推荐 另一方面这种方式仅在服务器端调用需要的操作，不形成额外的开销。传输的数据也非常至少（这个时候连接的建立将花费更多时间），这也节约了带宽，加快了响应速度（Ajax的主旨）。 源代码网推荐 源代码网推荐 Ajax.Net中集成的WebServices调用和PageMethod调用都属于这种形式。 源代码网推荐 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
