追求简约而且简单的AJAX封装：Prototype

前几天看到追求“简约不简单”的ORM映射框架这篇文章，发现作者不仅是一个写程序的高手， 还是一个文学上的高手，用陈道名来比喻“简约”和“不简单”真的是非常贴切。其实作为程序员，大家在看到一个让自己动心的东西的时候，心里就是会有这样的 感觉。比如我这里提到的Prototype，一看到它，我就喜欢上了它，觉得它“简约而且简单”，就像刘亦菲，不需要什么花哨的表演，只要清丽脱俗的面容 就够了。Prototype可以说就是这样一个对AJAX的封装，我没有把它称为框架，就是因为它简单。

Prothotype主要包含三个内容：1.提供了一些全局的函数，来替代原先繁琐重复的代码；2.对现在的Javascript, Dom等对象进行扩展，提供访问公共函数的捷径；3.对Ajax的封装，使得开发Ajax更容易和快速。

全局性的函数，比较有代表性的是$系列函数和Try.these()函数。
$()函数：来替代document.getElementById()方法。如果传入多个ID，则返回一个Array。
用法：

var  ele  =  $(‘your element‘s id‘);

 

$F()函数：用以返回表单控件的值，比如：文本框，下拉列表，必须是有value属性的控件，传入控件的ID。
用法：

var  ele  =  $F(‘your element‘s id‘);

$A()函数：可以接受任何一个枚举类型转换为一个数组。
用法：

var  nodeList  =  document.getElementsByTagName();
var  nodeArray  =  $A(nodeList);
var  message  =   " The All Message:  " ;
nodeArray.each(
   function (node) {
    message  +=  node.type  +   "  |  "   +  node.name  +   "  |  "   +  node.value  +   " \r\n "
  }
);
alert(message);

 
$H()函数：将传入的对象转换一个可枚举的和联合数组类似的Hash对象。
$R()函数：是对 new ObjectRange(lowBound, upperBound, excludeBounds)的缩写和替代。
 
Try.these()函数：使用一系列函数作为参数。返回第一个成功执行函数的有返回值。这样就不用if else去判断了。比如，我们创建XMLHttpRequest对象的时候，为了保持浏览器兼容，往往需要编写这样的代码：

var  xhr  =   null ;
if (window.XMLHttpRequest() {
  xhr  =   new  XMLHttpRequest();
   if (xhr.overrideMimeType)xhr.overrideMimeType( " text/xml " );
}
else   if (window.ActiveXObject) {
   try {
    xhr  =   new  ActiveXObject( " Msxml2.XMLHTTP " );
  } catch (e) {
     try {
      xhr  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
    } catch (e) {}
  }
}

而现在，使用Try.these()函数，这些繁琐的过程变得异常简单。

function  doInitialXHR() {
   return  Try.these(
     function () { return   new  ActiveXObject(‘Msxml2.XMLHTTP‘)} ,
     function () { return   new  ActiveXObject(‘Microsoft.XMLHTTP‘)} ,
     function () { return   new  XMLHttpRequest()}
  )
}  

Prototype 对Javascript的Object, Number, Function, String, Array, Event 等对象都进行了扩展，创建了一些新的对象和类，并在基础上有很多公用函数，比如each(), any(), collect()等。

each ()可以让我们项在Ruby、.net语言那样遍历集合中的元素。该方法使用iterator依次获取集合中的每个元素，并将其作为匿名函数的参数；也可 以在该匿名函数中加上可选参数index，获取当前元素的索引值。下面的例子使用each()方法，对一个保存货物价格的数组进行遍历，显示其价格及其索 引值：

function  doEachTest() {
   var  prices  =   { 100.2 ,  445 ,  552.3 ,  56.0 } ;
  prices.each(
     function (price,index) {
      window.alert( " value: "   +  price  +   " | index: "   +  index);
    }
  }
}

 
除此之外，Prototype还对Ajax提供的支持，主要由Ajax.Request和Ajax.Updater两个来完成。使用这两个类，可以应付大部分的AJAX应用，而且不需要繁琐的实例化XHR、监控请求状态的过程。
 
假设我们将书籍信息保存在一个XML文档内，如下：

<? xml version="1.0" encoding="gbk" ?>
< books >
     < book >
         < title > AAAAAAA </ title >
         < page > 111 </ page >
     < book >
     < book >
         < title > BBBBBBB </ title >
         < page > 222 </ page >
     < book >
</ books >

现在，我们使用Ajax.Request类去获取这个XML文档的内容，并将其显示出来，如下： 

function  doAjaxRequest() {
     var  url  =   " books.xml " ;
     var  ajax  =   new  Ajax.Request(url,  {method: " get " , onComplete:showResponse} );
}
 
function  showResponse(request) {
    window.alert(request.responseText);
}

 
method 为方法类型，如get,post等；onComplete为回调函数，通常在这个函数中完成对相应数据的解析和显示。如果服务器返回的是已经格式化的 HTML代码，则可以使用Ajax.Updater。下面的例子，使用Ajax.Updater将服务器的响应数据填充道指定的div中：

function  doAjaxUpdater() {
     var  url  =   " your_url.jsp " ;
     var  params  =   " field=all&show=true " ;
     var  ajax  =   new  Ajax.Updater( " divContent " , url,  {method: " get " , parameters:params} );
}
 
< input type = " button "  value = " Ajax.Updater "  onclick = " doAjaxUpdater() " >
< span id = " divContent " ></ span >

"divContent"为要将返回内容插其中的控件ID。


参考资料：柯自聪 《Prototype的开发与应用实践》 (程序员第11期)