使用Ajax
在弄好一些頁面後，你已經懂得在頁面和指令碼之間的互動原理（interact）。接下來，你應該掌握的是，
怎樣與遠程伺服器（remote server）交換資料，常見的是從資料庫載入資料（load）或是儲存資料（save）
到資料庫中。通過JavaScript 非同步無重新整理交換資料的這種方式，就是所謂的Ajax。Ext 內建卓越的Ajax 支
持，例如，一個普遍的使用者操作就是，非同步發送一些東西到伺服器，然後，UI 元素根據回應（Response）
作出更新。這是一個包含text input 的表單，一個div 用於顯示訊息（注意，你可以在ExtStart.html 中加入
下列代碼，但這必須要訪問伺服器）：
<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />
接著，我們加入這些處理交換資料的JavaScript 代碼到檔案ExtStart.js 中(用下面的代碼覆蓋)：
Ext.onReady(function(){
Ext.get('oKButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: [server url], //換成你的URL
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
這種模式看起來已經比較熟悉了吧！先擷取按鈕元素，加入單擊事件的監聽。在事件處理器中（event
handler），我們使用一個負責處理Ajax 請求、接受響應（Response）和更新另一個元素的Ext 內建類，稱
作UpdateManager。UpdateManager 可以直接使用，或者和我們現在的做法一樣，通過Element 的load 方
法來引用（本例中該元素是id 為“msg“的div）。當使用Element.load 方法，請求（request)會在加工處理後
發送，等待伺服器的響應（Response）， 來自動替換元素的innerHTML。簡單傳入伺服器url 地址，加上字
符串參數，便可以處理這個請求（本例中，參數值來自“name”元素的value),而text 值是請求發送時提示的
文本，完畢後顯示那個msg 的div（因為開始時預設隱藏）。當然，和大多數Ext 組件一樣，UpdateManager
有許多的參數可選，不同的Ajax 請求有不同的方案。而這裡僅示範最簡單的那種。
