這是本文件的舊版!
不再使用提交表單的方式
...... <form id="order-form"> ...... <input type="button" value="Order Pizza" onClick="submitOrder();" /> ......
使用 header() 增加回應標頭
if (strlen($order)<=0) { header("Status: No order was received.", true, 400); echo ""; exit; }
使 HTTP 回應變成
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
JavaScript 使用 getResponseHeader 取出資訊
request.getResponseHeader("Status")
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); } } }
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)); }
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