XML HttpRequest
所有現代瀏覽器都內建了 XMLHttpRequest 物件,用於從伺服器請求資料。
XMLHttpRequest 物件
XMLHttpRequest 物件可用於從 Web 伺服器請求資料。
XMLHttpRequest 物件是開發者的夢想,因為您可以
- 更新網頁而無需重新載入頁面
- 頁面載入後從伺服器請求資料
- 從伺服器接收資料 - 在頁面載入後
- 在後臺向伺服器傳送資料
XMLHttpRequest 示例
當您在下面的輸入欄位中鍵入一個字元時,會向伺服器傳送一個 XMLHttpRequest,並返回一些姓名建議(來自伺服器)。
示例
上面的示例將在本教程的 AJAX 部分進行解釋。
傳送 XMLHttpRequest
使用 XMLHttpRequest 物件的常見 JavaScript 語法如下所示:
示例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
自己動手試一試 »
示例解釋
上面示例的第一行建立了一個 XMLHttpRequest 物件。
var xhttp = new XMLHttpRequest();
onreadystatechange 屬性指定了一個函式,該函式將在 XMLHttpRequest 物件的狀態每次發生變化時執行。
xhttp.onreadystatechange = function()
當 readyState 屬性為 4 且 status 屬性為 200 時,響應已準備就緒。
if (this.readyState == 4 && this.status == 200)
responseText 屬性將伺服器響應作為文字字串返回。
文字字串可用於更新網頁。
document.getElementById("demo").innerHTML = xhttp.responseText;
您將在本教程的 AJAX 部分學到更多關於 XMLHttpRequest 物件的內容。