如何使用H5請(qǐng)求JSON數(shù)據(jù)？

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

使用XMLHttpRequest對(duì)象請(qǐng)求JSON數(shù)據(jù)

XMLHttpRequest是一個(gè)基于JavaScript API，它可以用于創(chuàng)建HTTP請(qǐng)求和接收服務(wù)器響應(yīng)。下面是使用XMLHttpRequest請(qǐng)求JSON數(shù)據(jù)的示例代碼：

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();

在上面的代碼中，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，并使用onreadystatechange事件監(jiān)聽器處理響應(yīng)。當(dāng)readyState為4（請(qǐng)求完成）并且status為200（請(qǐng)求成功）時(shí)，我們解析響應(yīng)文本，并將JSON數(shù)據(jù)存儲(chǔ)在變量中。最后，我們使用console.log()方法記錄JSON數(shù)據(jù)。

使用fetch API請(qǐng)求JSON數(shù)據(jù)

fetch是一種新的方式來處理HTTP請(qǐng)求。它使用Promise對(duì)象，并簡化了XMLHttpRequest的代碼。下面是使用fetch API請(qǐng)求JSON數(shù)據(jù)的示例代碼：

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

在上面的代碼中，我們使用fetch()函數(shù)來請(qǐng)求JSON數(shù)據(jù)。然后，我們使用Promise對(duì)象處理響應(yīng)，并在response對(duì)象上調(diào)用json()方法解析響應(yīng)數(shù)據(jù)。最后，我們使用console.log()方法記錄JSON數(shù)據(jù)。

總結(jié)

H5提供了很多方法來請(qǐng)求JSON數(shù)據(jù)，XMLHttpRequest和fetch API是最常用的方法。使用這些方法，我們可以輕松地從服務(wù)器獲取JSON數(shù)據(jù)，并使用它來構(gòu)建動(dòng)態(tài)和交互式的Web應(yīng)用程序。