AJAX good practices

Reuse code and encapsulate frozen code

- 比如下列的code就可以分离出来

  
  

   
   
   
   
   
   function
   
    buildRequest(target,method,params,handler,isAsync) { 
 
   
   var
   
    req 
   
   =
   
    window.XmlHTTPRequest 
   
   ?
   
    
   
   new
   
    XMLHttpRequest() : 
   
   new
   
    ActiveXObject(
   
   "
   
   Microsoft.XMLHTTP
   
   "
   
   );
 
   
   if
   
   (req) {
   req.open(method, target, isAsync); req.setRequestHeader(
   
   "
   
   Content-type
   
   "
   
   ,
   
   "
   
   application/x-www-form-urlencoded
   
   "
   
   );
   req.setRequestHeader(
   
   "
   
   Content-length
   
   "
   
   ,params.length);
   
   
   if
   
   (handler 
   
   &&
   
    isAsync)
    req.onreadystatechange 
   
   =
   
    eval(handler);
  
   
   return
   
    req;
 }
}


  
  

Use Relative references to elements using DOM

- 尽量使用parentNode, previousSibling, nextSibling, childNodes等等。这有两个好处：1. 省掉了getElementById的hash lookup。2. 不需要maintian一堆的element id，这样webpage的payload就减小了一点。当然这也有缺点，就是code比较难懂了，呵呵，加comment吧。那么有人就说了：加了comment，payload不是反而大了么。呵呵，其实商业的javascript程序在发布前都需要用comment stripper处理过的，带comment的源文件只是内部使用。

 

Use external JavaScript files

- 最主要的目的当然是caching，大量的内嵌javascript会增加page load time。如果分离成一个独立的js文件而其他文件间接reference的话，那用户只需要下载一次这个js文件，browser会自动cache的（除非你改掉了browser的默认设置）。当然有一个问题是如果你server端的js文件更新了怎么办？如果client端cahce下来的js文件还没有expire，那么用户就不会使用你更新后的程序逻辑了。这个也是可以简单解决的，就是在js文件后面加一个versioning query variable：proxy.js?v=101，当你更新了js文件后，只要在deploy的时候改动一下这个query variable就可以了。

 

Use Synchronous XMLHTTP request, when Asynchronous Call is not needed.

- 这让你对程序的follow有更好的控制，并且，async call会调用4到5次的callback handler（depending on which browser the client is using）。那些都是不必要的浪费。

 

Use Server side validations with AJAX

- 原因很简单：
1. ASP.NET 1.1提供的client-side validator controls很多和FireFox不兼容，you are dead. ASP.NET 2.0应该没问题。
2. 把关键的validation logic推到client side确实减轻了server的负担，但从安全上看，完全是打开了cross domain scripting的闸门，恶意的攻击者可以直接绕过你的validation（because it's all downloaded to the client side!!），然后往你的数据库里放一些小礼物...

当然这些理由都不是绝对的，just keep this in mind.

Balance server calls, use forward-fetch or timer based fetch if events are higher in number

- 比如你要显示一个很大的data grid，一屏显示不完，data grid control上有一个scroll bar。那么你完全可以在每次处理scroll event的时候预先多下载几个row，这样在user再次滚动scroll bar的时候，你就可以直接显示刚才pre-fetch的内容了。再想想那些keyword autocompletion (比如你在gmail里打email address的时候，gmail会自动提示匹配的address)，如果每个keypress event我们都提交一个request的话，那按现在用户平均的打字速度，这个程序基本就不要用了。

有人说，反正是async call，不怕。呵呵，其实AJAX不是真的asynchronous，AJAX是bi-synchronous的，就是说，任何时刻，只能有两个active的asynch call，多的asynch call全部被queue起来了。IE如此，FireFox亦如此。所以太多的asynch call的话，用户是不会喜欢的。

一个解决的方法是用timer based fetch，比如上面这个keyword autocompletion的例子，当用户键入第一个字母的时候，我们一方面向server提交request要求匹配的autocompletion，同时我们又设置一个timer（say, expires in 500 msec），如果在这个timer expire之前用户又键入了一些字母，我们就不重复提交request了。这个方法很简单，但也足够有效了。（注：我不知道google是否用的这种方法，just cited as an example）

  http://blog.joycode.com/demonfox/archive/2006/09/01/82431.aspx