從 JavaScript 中的 URL 讀取 JSON · ZetCode 中文系列教程

# 在 JavaScript 中從 URL 讀取 JSON > 原文： [http://zetcode.com/articles/javascriptjsonurl/](http://zetcode.com/articles/javascriptjsonurl/) 在 JavaScript 教程的“從 URL 讀取 JSON”中，我們從提供的 URL 中讀取 JSON 格式的數據。我們使用 JQuery，Fetch API 和`XMLHttpRequest`。統一資源定位符（URL）是對 Web 資源的引用，該資源指定了它在計算機網絡上的位置以及用于檢索它的機制。網絡資源是可以通過網絡獲取的任何數據，例如 HTML 文檔，PDF 文件，PNG 圖像，JSON 數據或純文本。 JSON（JavaScript 對象表示法）是一種輕量級的數據交換格式。人類很容易讀寫，機器也很容易解析和生成。 JSON 的官方 Internet 媒體類型為`application/json`。 JSON 文件擴展名是`.json`。在我們的示例中，我們使用`http://time.jsontest.com`中的 JSON 數據。 ```js { "time": "11:27:26 AM", "milliseconds_since_epoch": 1494934046126, "date": "05-16-2017" } ``` GET 請求返回此 JSON 字符串。 ## 使用 JQuery 讀取 JSON jQuery 是一個 JavaScript 庫，用于處理 DOM。使用 jQuery，我們可以查找，選擇，遍歷和操作 HTML 文檔的各個部分。 JQuery `$.getJSON()`方法使用 GET HTTP 請求從服務器加載 JSON 編碼的數據。 ```js jQuery.getJSON( url [, data ] [, success ] ) ``` 這是方法簽名。 `url`參數是一個字符串，其中包含將請求發送到的 URL。 `data`是隨請求發送到服務器的普通對象或字符串。 `success`是一個回調函數，如果請求成功，則執行該函數。 ```js $.ajax({ dataType: "json", url: url, data: data, success: success }); ``` `$.getJSON()`是上述調用的簡寫。 `js_read_json_url.html` ```js <!DOCTYPE html> <html lang="en"> <head> <title>JavaScript - read JSON from URL</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <div class="mypanel"></div> <script> $.getJSON('http://time.jsontest.com', function(data) { var text = `Date: ${data.date}<br> Time: ${data.time}<br> Unix time: ${data.milliseconds_since_epoch}` $(".mypanel").html(text); }); </script> </body> </html> ``` 在示例中，我們從`http://time.jsontest.com`讀取 JSON 數據。返回的對象具有三個屬性：日期，時間和 unix 紀元。 ```js var text = `Date: ${data.date}<br> Time: ${data.time}<br> Unix time: ${data.milliseconds_since_epoch}` ``` 我們使用 JavaScript 模板字符串構建消息。 ```js $(".mypanel").html(text); ``` 使用 JQuery 的`html()`方法，我們將文本附加到`div`標簽。 ![Reading JSON from URL with JQuery](https://img.kancloud.cn/f4/0d/f40d5fb2ab440f37f54e8aadea235c6d_556x335.jpg) 圖：使用 JQuery 從 URL 讀取 JSON 在圖中，我們可以看到當前日期，時間和 Unix 時間。 ## 使用 Fetch API 讀取 JSON Fetch API 是用于提取資源的接口。它類似于`XMLHttpRequest`，但其 API 提供了更強大和靈活的功能集。 ```js <script> fetch('http://time.jsontest.com') .then(res => res.json()) .then((out) => { console.log('Output: ', out); }).catch(err => console.error(err)); </script> ``` 該示例使用 Fetch API 讀取 JSON 數據，并將返回的數據打印到控制臺。要查看輸出，我們需要激活瀏覽器的開發者控制臺。 `fetch()`方法采用一個強制性參數，即我們要獲取的資源的路徑。它返回一個解析為請求響應的`promise`。 ## 使用`XMLHttpRequest`讀取 JSON `XMLHttpRequest` API 提供了用于在客戶端和服務器之間傳輸數據的客戶端功能。它提供了一種從 URL 檢索數據的簡便方法，而無需刷新整個頁面。結果，網頁必須僅更新頁面的一部分而不破壞用戶正在做的事情。 `XMLHttpRequest`在 AJAX 編程中大量使用。 ```js <script> var getJSON = function(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } }; xhr.send(); }; getJSON('http://time.jsontest.com', function(err, data) { if (err != null) { console.error(err); } else { var text = `Date: ${data.date} Time: ${data.time} Unix time: ${data.milliseconds_since_epoch}` console.log(text); } }); </script> ``` 本示例使用`XMLHttpRequest`讀取 JSON 數據。 ```js var xhr = new XMLHttpRequest(); ``` 創建了`XMLHttpRequest`的新實例。 ```js xhr.open('GET', url, true); ``` `open()`方法初始化一個請求。 ```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()`方法發送請求；默認情況下，該請求是異步的。在本教程中，我們已經使用 JQuery，Fetch API 和`XMLHttpRequest`在 JavaScript 中讀取了 JSON 數據。您可能也對以下相關教程感興趣： [JQuery 教程](/web/jquery/)， [JavaScript Mustache 教程](/javascript/mustache/)， [JavaScript 中的 JSON 數組循環](/javascript/jsonforeach/)， [jQuery 自動完成教程](/articles/jqueryautocomplete/)或[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 。