webdesign:head_rush_ajax_2
Head Rush Ajax 讀書筆記
Chapter Two
JavaScript 事件處理器
- onChange - 表單欄位值改變時觸發
- onFocus - 欄位取得焦點時觸發
- onBlur - 欄位失去焦點時觸發
HTML 部份
當網頁載入時，清除文件中的第一個表單( forms[0] )。
<body onLoad="document.forms[0].reset();">
每個輸入欄位都有一個「id」，給之後的 DOM 用來做資料處理。
<input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" />
取得網頁上的資料
function getCustomerInfo() {
var phone = document.getElementById("phone").value;
var url = "lookupCustomer.php?phone="+escape(phone);
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
escape() 函式將不能存在 url 中的字元代換，如：空白字元 → 「%20」。
更新網頁上的資料
利用 DOM 修改網頁，瀏覽器會立刻更新網頁。
function updatePage() {
if (request.readyState ==4) {
if (request.status == 200) { // 狀態碼，代表成功
var customerAddress = request.responseText; // 從伺服器取得回應
document.getElementById("address").value = customerAddress;
}
}
}
address 為表單欄位，可使用「value」屬性存取內容；若在 DIV 或 SPAN 中則不行。
webdesign/head_rush_ajax_2.txt · 上一次變更: 2007/02/27 22:28 由 wenpei
若無特別註明，本 wiki 上的內容都是採用以下授權方式： CC Attribution-Noncommercial-Share Alike 3.0 Unported
