Ext入門4

 使用Ajax

      在弄好一些頁面後,你已經懂得在頁面和腳本之間的交互(interact)原理。接下來,你應該掌握的是,怎樣與遠程服務器(remote server)交換數據,常見的是從數據庫加載數據(load)或是保存數據(save)到數據庫中。通過JavaScript異步無刷新交換數據的這種方式,就是所謂的Ajax。Ext內建卓越的Ajax支持,例如,一個普遍的用戶操作就是,異步發送一些東西到服務器,然後,UI元素根據迴應(Response)作出更新。這是一個包含text input的表單,一個div用於顯示消息:

<div></div>
<div>
    Name: <input>
    <input>
</div>
<div></div>

      接着,我們加入這些處理交換數據的JavaScript代碼:

Ext.
 Ext.., 
   msg = Ext.;
  msg.
   url: , 
   params:  + Ext...,
   text: 
  ;
  msg.;
 ;
;

      注意: 這個例子需要web server纔可運行。 瀏覽器的URL地址不應是以file://開頭,而是http://開頭,否則的話Ajax的數據交互將不會工作。Localhost就可以工作得很好,但必須是通過http的。

      這種模式看起來已經比較熟悉了吧!先獲取按鈕元素,加入一個匿名函數監聽單擊。在事件處理器中(event handler),我們使用一個負責處理Ajax請求、接受響應(Response)和更新另一個元素的Ext內建類,稱作UpdateManagerUpdater。UpdateManager可以直接使用,或者和我們現在的做法一樣,通過Element的load方法來引用(本例中該元素是id爲“msg“的div)。當使用Element.load方法,請求(request)會在加工處理後發送,等待服務器的響應(Response),來自動替換元素的innerHTML。簡單傳入服務器url地址,加上字符串參數,便可以處理這個請求(本例中,參數值來自“name”元素的value),而text值是請求發送時提示的文本,完畢後顯示那個msg的div(因爲開始時默認隱藏)。當然,和大多數Ext組件一樣,Ext.Ajax 有許多的參數可選,不同的Ajax請求有不同的方案。而這裏僅演示最簡單的那種。

      最後一個關於Ajax隱晦的地方就是,服務器實際處理請求和返回(Resposne)是具體過程。這個過程會是一個服務端頁面,一個Servlet,一個Http調度過程,一個WebService,甚至是Perl或CGI腳本,即不指定一個服務器都可以處理的http請求。讓人無法預料的是,服務器返回什麼是服務器的事情,無法給一個標準的例子來覆蓋闡述所有的可能性。。

      使用Ajax的真正挑戰,是需要進行適當的手工編碼,並相應格式化爲服務端可用接受的數據結構。有幾種格式供人們選擇(最常用爲JSON/XML)。 Ext沒有跟任何服務器語言有獨家聯繫,因此其它特定語言的庫亦可用於Ext處理Ajax服務。只要頁面接受到結果是EXT能處理的數據格式,Ext絕不會干涉服務器其他的事情!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章