Sars' History

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。

====== 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();" />

==== 取得網頁上的資料 ====
<code>
    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);
    }
</code>

escape() 函式將不能存在 url 中的字元代換，如：空白字元 -> 「%20」。


==== 更新網頁上的資料 ====
利用 DOM 修改網頁，瀏覽器會立刻更新網頁。
<code>
    function updatePage() {
      if (request.readyState ==4) {
        if (request.status == 200) {    // 狀態碼，代表成功
          var customerAddress = request.responseText;    // 從伺服器取得回應
          document.getElementById("address").value = customerAddress;
        }
      }
    }
</code>

address 為表單欄位，可使用「value」屬性存取內容；若在 DIV 或 SPAN 中則不行。

Sars' History

使用者工具

網站工具

頁面工具