Sars' History

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== Head Rush Ajax 讀書筆記 ======
===== Chapter Five =====
==== HTML ====
不再使用提交表單的方式
<code>
......
<form id="order-form">
......
<input type="button" value="Order Pizza" onClick="submitOrder();" />
......
</code>

==== PHP ====
使用 header() 增加回應標頭
<code>
if (strlen($order)<=0) {
  header("Status: No order was received.", true, 400);
  echo "";
  exit;
}
</code>

使 HTTP 回應變成
<code>
HTTP/1.1 400 Bad Request
  Request Version: HTTP/1.1
  Request Code: 400
Date: Tue, 06, Mar 2007 09:00:00 GMT
Server: Apache
X-Powered-By: PHP/4.3.11
Status: No order was received.    // 增加這行
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html
</code>

JavaScript 使用 getResponseHeader 取出資訊
  request.getResponseHeader("Status")


==== JavaScript ====
=== 把整個 form 替換成結果輸出 ===
<code>
   function showConfirmation() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         var response = request.responseText;

         var mainDiv = document.getElementById("main-page");    // 主要的外層 DIV
         var orderForm = document.getElementById("order-form");    // 將被替換的 FORM

// 建立新的元素
         pElement = document.createElement("p");
         textNode = document.createTextNode("Your order should arrive within " + response + " minutes. Enjoy your pizza!");
         pElement.appendChild(textNode);

         mainDiv.replaceChild(pElement, orderForm);    // 替換
       } else {
         var message = request.getResponseHeader("Status");    // 取出錯誤資訊的 header
         if ((message.length == null) || (message.length <= 0))
           alert ("Error! Request status is " + request.status);
         else
           alert (message);
       }
     }
   }
</code>

=== 使用 POST 送出資料 ===
  * POST 無瀏覽器快取問題
  * URL 有長度限制(IE 約 2000 個字元)，使 GET 無法放太多資料在 URL 中，而 POST 沒資料長度限制
  * POST 傳送時有編碼，但解碼相當簡單
  * 可用來傳送 XML 資料

<code>
   function submitOrder() {
     var phone = document.getElementById("phone").value;
     var address = document.getElementById("address").value;
     var order = document.getElementById("order").value;

     var url = "placeOrder.php";
     request.open("POST", url, true);
     request.onreadystatechange = showConfirmation;

// 需要設定 POST 的內容型別，因為 GET 必為純文字，但 POST 可以送出影像、 XML 或純文字等等任何型別
     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 使用數對「名稱/值」，和 GET 相同
     request.send("phone=" + escape(phone) +
                  "&address=" + escape(address) +
                  "&order=" + escape(order));
   }
</code>

=== 送到伺服器的 POST 請求 ===
<code>
Hypertext Transfer Protocol
  POST /placeOrder.php HTTP/1.1
    Request Method: POST
    Request URI: /placeOrder.php
    Request Version: HTTP/1.1
  Host: sars.tw
  Keep-Alive: 300
  Connection: Keep-alive
  Content-Type: application/x-www-form-urlencoded    // 增加此行
  Content-Length: 121
</code>
Sars' History

使用者工具

網站工具

頁面工具
