乐哈哈旅游视频网:

AJAX开发技巧

1.1 最爱$系列 

我最喜欢是可以用${"bookDiv"} 等价于通用的document.getElementByID("bookDiv")

值得留意的还有和CSS一样的批量选择语法$$(),

1.2 传统的Ajax

传统的基于URL的ajax函数简单实用。

   new  Ajax.Updater('bookdiv', "foo .jsp " );

另有可定时执行Ajax的PeriodicalUpdater。

1.3 Form系列函数也不错

Form.serialize   将Form中所有Input对象的值转化为一个URL String,方便把Form转为用 URL Get方式的Ajax提交,最经典的用Ajax提交Form的例子: 

  < form action = " /action/here "  method = " post "  
   onsubmi
= " new Ajax.Updater('div_to_be_updated', '/action/here', {parameters:Form.serialize(this)});
              return false;
" >  

  另外,Form.focusFirstElement , Form.getInputs等函数也很实用

1.4 Event系列

除了后述的Observe模式外,还有下列保证兼容IE和FF的事件函数:

1.Event.element(event),找出触发事件的element.

2.Event.findElement(event,tagName),搜索DOM tree里事件的响应链里的第一个符合tagName的element.

3.pointerX(event),pointerY(event)等.

还定义了一些标准KeyCode,见:http://www.sergiopereira.com/articles/prototype.js.html#Reference.Extensions.Event

1.5 Ruby风格

1.循环函数

elements.each(  function (element){
        alert(element); 
       });

2.不定参数

new  Ajax.Updater('mydiv', ' / foo / bar', {asynchronous: true });

2. Observe模式达到搜索引擎Friendly

Observe模式,就是连接仍然以<a href="foo.jsp">形式编写,用Observe为其加入onClick事件的侦听。 这样,当搜索引擎访问时,就会访问传统的URL;而用户使用IE访问时,就会被Observe转为使用onClick事件的Ajax效果。

见SpringSide中的/home/index.jsp 图书详情察看--通过selector查找需要处理的链接(a),循环为每个链接添加观察者,为click事件,添加handle函数。   
 

$$('div#left_books  *  a[href]').each( function (element){
Event.observe(element,'click',handlerCilckEvent,
false );
});

function  handlerCilckEvent(event){
    
var  element  =  Event.element(event);
    
new  Ajax.Updater('bookdiv',element.href); 
    Event.stop(event);
    $('bookdiv').show();
}

3.script.aculo.us的DomBuilder

script.aculo.us语法超简洁的Builder, 相比之下W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子,用script.aculo.us的Builder就够了。
Builder很有Ruby的风格,请看下面一句 : 

foo =  Builder.node('a', {href: " foo.jsp " },categorys[i].name)

第1个参数是element类型,第2个是可选的attribbute,第3个是节点内的子节点。
如果要换成W3c的Dom函数写法,善哉善哉。

下面这段更明显,直接照元素的页面顺序来生成对象,而不是像W3C Dom Builder很逻辑抽象的,先生成对象,然后append到父元素。

div  =  Builder.node('div',{className:linkDiv},[ 
                       Builder.node('a', {href:
" foo.jsp " }, categorys[i].name)  ]
         );

 

当然了,还是没有JS Template清晰,所以Builder只作为html片断非常短时使用。

posted on 2006-09-06 10:19  riky  阅读(647)  评论(0编辑  收藏  举报

乐哈哈旅游视频网: