2008-05-04

Prototype.js简介

关键字: prototype ajax framework

Prototype是一个优秀的JavaScript/AJAX框架。本文作简单介绍，具体内容建议阅读API Docs 。

 

为什么需要Protoype

  • 封装很多繁琐的实现
  • 扩展了一些人性化的接口
  • 提供跨浏览器支持

 

实用方法

$

根据id或element返回HTMLElement，以替代document.getElementById()

$('itemId').hide();
$$

根据css选择器返回

$$('div.item');
$A

返回数组

$A(document.getElementsByTagName('p')).map(Element.extend).invoke('hide');
$F

返回表单元素的数值

$F(element) -> value
$H

返回一个hash

$H([obj]) -> Hash
$R

返回一个范围，等价于ObjectRange

$A($R(0, 5)).join(', ')
// -> '0, 1, 2, 3, 4, 5'
$w

由字符串返回数组

$w('apples bananas kiwis')
// -> ['apples', 'bananas', 'kiwis']
Try.these

尝试每种方法直至成功，在浏览器兼容性的作用显而易见

getTransport: function() {
  return Try.these(
    function() { return new XMLHttpRequest() },
    function() { return new ActiveXObject('Msxml2.XMLHTTP') },
    function() { return new ActiveXObject('Microsoft.XMLHTTP') }
  ) || false;
}

 

AJAX

Ajax.Request

向指定url发起请求，并处理回调onUninitialized, onLoading, onLoaded, onInteractive, onComplete, onException

new Ajax.Request('/some_url',
{
    method:'get',
    parameters: {company: 'example', limit: 12}
    onSuccess: function(transport, json){
      alert(json ? Object.inspect(json) : "no JSON object");
    }
});
 
Ajax.Responders

给所有请求加通用回调

Ajax.Responders.register({
  onCreate: function(){
    alert('a request has been initialized!');
  }
});
 
Ajax.Response

基本同上

 
Ajax.Updater

直接用响应的html文本来更新一个元素

new Ajax.Updater('products', '/some_url', { method: 'get' });
 
Ajax.PeriodicalUpdater

定时更新，基本同上

 
Ajax Options

生成上述函数的选项

 

 

更多扩展

Prototype还扩展了以下对象，以后用到了再补充

 

 

 

 

 

评论
发表评论

您还没有登录，请登录后发表评论

swordray
搜索本博客
最近加入圈子
存档
最新评论