如何使用H5請求JSON數據？

JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，它使用易于理解的文本格式，可以快速地在客戶端和服務器之間傳輸數據。在H5中，我們可以使用JavaScript的XMLHttpRequest對象或fetch API來請求JSON數據。

使用XMLHttpRequest對象請求JSON數據

XMLHttpRequest是一個基于JavaScript API，它可以用于創建HTTP請求和接收服務器響應。下面是使用XMLHttpRequest請求JSON數據的示例代碼：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
console.log(data);
}
};
xhr.open("GET", "data.json", true);
xhr.send();

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象，并使用onreadystatechange事件監聽器處理響應。當readyState為4（請求完成）并且status為200（請求成功）時，我們解析響應文本，并將JSON數據存儲在變量中。最后，我們使用console.log()方法記錄JSON數據。

使用fetch API請求JSON數據

fetch是一種新的方式來處理HTTP請求。它使用Promise對象，并簡化了XMLHttpRequest的代碼。下面是使用fetch API請求JSON數據的示例代碼：

fetch('data.json')
.then(response =>response.json())
.then(data =>console.log(data));

在上面的代碼中，我們使用fetch()函數來請求JSON數據。然后，我們使用Promise對象處理響應，并在response對象上調用json()方法解析響應數據。最后，我們使用console.log()方法記錄JSON數據。

總結

H5提供了很多方法來請求JSON數據，XMLHttpRequest和fetch API是最常用的方法。使用這些方法，我們可以輕松地從服務器獲取JSON數據，并使用它來構建動態和交互式的Web應用程序。