XMLHttpRequest教程 · ZetCode 中文系列教程

# `XMLHttpRequest`教程 > 原文： [http://zetcode.com/javascript/xmlhttprequest/](http://zetcode.com/javascript/xmlhttprequest/) `XMLHttpRequest`教程展示了如何使用`XMLHttpRequest`在 JavaScript 中發出 HTTP 請求。 ## `XMLHttpRequest` `XMLHttpRequest`是內置的瀏覽器對象，它允許使用 JavaScript 發出 HTTP 請求。 `XMLHttpRequest` API 提供了用于在客戶端和服務器之間傳輸數據的客戶端功能。它提供了一種從 URL 檢索數據的簡便方法，而無需刷新整個頁面。結果，網頁必須僅更新頁面的一部分而不破壞用戶正在做的事情。 `XMLHttpRequest`在 AJAX 編程中大量使用。 `XMLHttpRequest`以兩種操作模式工作：同步和異步。盡管它的名字，`XMLHttpRequest`可以對任何數據進行操作，而不僅限于 XML。 ## `XMLHttpRequest`示例下面的示例向測試站點創建一個請求，并返回當前日期時間。 `fetch_time.js` ```js let getJSON = (url, callback) => { let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = () => { let status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } }; xhr.send(); }; getJSON('http://time.jsontest.com', (err, data) => { if (err != null) { console.error(err); } else { let text = `Date: ${data.date} Time: ${data.time} Unix time: ${data.milliseconds_since_epoch}` console.log(text); } }); ``` This example reads JSON data with `XMLHttpRequest`. ```js let xhr = new XMLHttpRequest(); ``` 創建了`XMLHttpRequest`的新實例。 ```js xhr.open('GET', url, true); ``` `open()`方法將 GET 請求初始化為指定的 URL。第三個參數`true`使其成為異步請求。 ```js xhr.responseType = 'json'; ``` `responseType`值定義響應類型。 ```js xhr.onload = function() { var status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } }; ``` 在`onload()`方法內部，我們等待服務器的響應。 ```js xhr.send(); ``` `send()`方法發送請求；默認情況下，該請求是異步的。 ```js let text = `Date: ${data.date} Time: ${data.time} Unix time: ${data.milliseconds_since_epoch}` console.log(text); ``` 我們將日期，時間和 Unix 時間記錄到控制臺。 `index.html` ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Consume XML request</title> <script src="fetch_time.js"></script> </head> <body> </body> </html> ``` 該代碼已加載到 HTML 頁面。在瀏覽器中加載頁面之后，我們轉到瀏覽器控制臺，該控制臺在開發者工具中可用。在本教程中，我們使用`XMLHttpRequest`在 JavaScript 中創建了 HTTP 請求。您可能也對以下相關教程感興趣： [JavaScript `queryselector`教程](/javascript/queryselector/)， [JavaScript Lodash 教程](/javascript/lodash/)， [Ramda 教程](/javascript/ramda/)或列出[所有 JavaScript 教程](/all/#js)。