2.4 Ajax · Web全棧技術指南

# 2.4 Ajax ## 2.4 Ajax (注：本節內容涉及簡單地PHP服務器端編程，若要動手實驗，請參考[PHP](php.html)一節來運行PHP程序) Ajax即**Asynchronous JavaScript and XML**，是一種Web瀏覽器端的局部頁面更新技術。它可以在不重新加載整個Web頁面的情況下，使用服務器的數據更新局部Web頁面。Ajax依賴若干其他技術：它使用JavaScript向服務器請求數據；通過操縱DOM來更新頁面。一個Ajax的例子如下： index.html： ``` <html> <head> <meta charset="utf-8" /> <title>AJAX</title> </head> <body> <button id="btn">現在幾點？</button> <div id="result"></div> <script> var btn = document.getElementById('btn'); var result = document.getElementById('result'); btn.onclick = function() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'time.php'); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) result.innerHTML = xhr.responseText; else alert('Error: ' + xhr.status); } }; xhr.send(null); }; </script> </body> </html> ``` time.php： ``` <?php echo date('H:i:s') ?> ``` Ajax依賴**XMLHttpRequest**對象向服務器請求數據。 ``` xhr.open('GET', 'time.php'); ``` 這行代碼向服務器發出一個*異步*的GET請求，請求的資源（URI）是time.php。因為請求是異步的，所以不會馬上返回結果，需要我們注冊*onreadystatechange*事件來獲得結果： ``` xhr.onreadystatechange = function () { //... }; ``` 在HTTP請求進行的過程中，xhr的readyState的值會發生若干次改變，依次是： - 1 (OPENED)，當open方法成功調用后 - 2 (HEADERS\_RECEIVED)，當HTTP應答頭部（header）接收完成時 - 3 (LOADING)，當應答消息主體（message body）開始加載時 - 4 (DONE)，當請求完成時（也可能是由于錯誤而終止）我們在請求成功完成時把結果（通過responseText得到）顯示出來；如果出錯則顯示一個錯誤警告： ``` if (xhr.readyState === 4) { if (xhr.status === 200) result.innerHTML = xhr.responseText; else alert('Error: ' + xhr.status); } ``` xhr的send方法真正開始進行HTTP請求。另外，XMLHttpRequest發出的HTTP請求不必是異步的，獲得的結果也不必是XML（本例中它就是一段普通文本）——實際上JSON用得更廣泛。更多關于XMLHttpRequest的更多信息可參考：<https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest> 需要說明的是，AJAX技術受到**同源（same-origin）**條件限制：簡單地說，假設一個HTML文檔的URL是`http://www.example.com/path/to/doc.html`，那么它的XMLHttpRequest對象發出的HTTP請求的URL就只限于`http://www.example.com/*`，其中`*`是一個通配符，代表任何字符序列，也可以為空。同源是瀏覽器出于安全原因加上的一個限制。更多關于同源以及如何“跨源”的信息可參考： [https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin\_policy](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy) 更多關于Ajax的信息可參考：<https://developer.mozilla.org/zh-CN/docs/AJAX>