Ajax常用技术手段分析

 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\">\u8d2d\u7269\u8f66</div>\n\n<table>\n\n <tr id=\"current_item\">\n\n <td>1×</td>\n <td>Pragmatic Project Automation\u4e2d\u6587</td>\n <td class=\"item-price\">29.95\u5143</td>\n</tr>\n \n <tr class=\"total-line\">\n <td colspan=\"2\">Total</td>\n <td class=\"item-price\">29.95\u5143</td>\n </tr>\n \n</table>\n\n<form method=\"post\" action=\"/store/checkout\" class=\"button-to\"><div><input type=\"submit\" value=\" \u7ed3 \u8d26 \" /></div></form>\n<form method=\"post\" action=\"/store/empty_cart\" class=\"button-to\"><div><input onclick=\"return confirm('\u786e\u5b9a\u6e05\u7a7a\u8d2d\u7269\u8f66?');\" type=\"submit\" value=\"\u6e05\u7a7a\u8d2d\u7269\u8f66\" /></div></form>\n");
  $("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: */*

（编辑：IT资讯之家 www.it55.com）