Ajax 如何获取JSON响应
Ajax 如何获取JSON响应
AJAX 是一组技术，允许用户在不干扰现有页面的情况下异步获取数据。我们可以使用AJAX获取各种类型的数据，如JSON、XML、HTML和文本文件。
在本文中，我们将看到如何在Ajax中获取JSON响应。
方法： 为了解决这个问题，我们首先考虑一个名为“capitals.json”的JSON文件，并尝试使用AJAX获取这个JSON数据作为响应。然后，我们将创建一个名为“capitals.html”的HTML文件，其中包含一个表格，我们将用来填充获取到的数据。最后，我们将创建一个名为“capitals.js”的JavaScript文件，以编写获取JSON数据的代码。在我们的代码中，我们将使用纯JavaScript来实现给定的任务。我们将使用XMLHttpRequest 对象向服务器发出请求并获取其响应。
下面是上述方法的逐步实现。
步骤1： 让我们看看我们拥有的JSON内容。
capitals.json：
{
"countries_capitals":[
{
"country":"India",
"capital":"New Delhi"
},
{
"country":"Italy",
"capital":"Rome"
},
{
"country":"Germany",
"capital":"Berlin"
},
{
"country": "Egypt",
"capital":"Cairo"
},
{
"country": "Australia",
"capital":"Canberra"
}
]
}
步骤2： 包含一个名为“国家和首都”的表格的HTML文件， 和一个名为“获取”的按钮，点击后我们将能够将JSON数据填充到表格中。
Capitals.html
GeeksforGeeks
| Countries | Capitals |
|---|---|
输出结果：
步骤3： 以下是我们的JavaScript文件，其中包含使用AJAX获取JSON响应的代码。
首先，我们将获取所有HTML元素，这些元素是我们的“Fetch”按钮和“Countries and their capitals”表列，以便我们可以使用DOM操作动态填充它。
我们将在我们的“Fetch”按钮上添加一个事件监听器。
然后，我们将创建一个XMLHttpRequest对象。
创建XMLHttpRequest对象后，我们将调用它的open方法来打开请求，open方法接受三个参数，一个HTTP方法（如GET，POST），我们要获取数据的URL，以及一个布尔值（true表示异步请求，false表示同步请求）。
接下来，使用getResponseHeader方法返回包含指定标题文本的字符串，我们将使用此方法来定义我们正在获取的数据类型。
此后，我们调用onload方法，该方法定义请求成功完成后要执行的操作。在onload方法中，我们首先解析响应文本，然后使用forEach循环逐个迭代所有的国家和首都列，并使用我们解析的响应文本数据填充它。
最后，我们将使用XMLHttpRequest对象的send方法向服务器发送请求。
capitals.js
const fetchBtn = document.getElementById("fetchBtn");
const countries = document.getElementsByClassName("countries");
const capitals = document.getElementsByClassName("capitals");
fetchBtn.addEventListener("click", buttonHandler);
// Defining buttonHandler function
function buttonHandler() {
// First create an XMLHttprequest object
const xhr = new XMLHttpRequest();
xhr.open("GET", "capitals.json", true);
xhr.getResponseHeader("Content-type", "application/json");
xhr.onload = function() {
const obj = JSON.parse(this.responseText);
Array.from(countries).forEach((country, index) => {
country.innerText = obj.countries_capitals[index].country;
});
Array.from(capitals).forEach((capital, index) => {
capital.innerText = obj.countries_capitals[index].capital;
});
}
xhr.send();
}
现在，如果我们点击“Fetch”按钮，我们将在上面的名为“国家和首都”的表格中看到我们的JSON数据。
输出：