AJAX開發技巧

來源:互聯網
上載者:User
文章目錄
  • 1.1 最愛$系列 
  • 1.2 傳統的Ajax
  • 1.3 Form系列函數也不錯
  • 1.4 Event系列
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片斷非常短時使用。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.