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

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Countries and Capitals</title> 
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: #44A075; 
        } 
  
        table { 
            border: 2px solid #44A075; 
        } 
  
        caption { 
            margin: 10px 0; 
        } 
  
        tr { 
            height: 30px; 
        } 
  
        th, 
        td { 
            border: 1px solid #44A075; 
            width: 100px; 
        } 
  
        .info { 
            display: flex; 
            justify-content: center; 
        } 
  
        button { 
            margin: 20px 0; 
            height: 40px; 
            width: 100px; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="info"> 
        <table> 
            <caption>Countries and their capitals</caption> 
            <th>Countries</th> 
            <th>Capitals</th> 
            <tr> 
                <td class="countries"></td> 
                <td class="capitals"></td> 
            </tr> 
            <tr> 
                <td class="countries"></td> 
                <td class="capitals"></td> 
            </tr> 
            <tr> 
                <td class="countries"></td> 
                <td class="capitals"></td> 
            </tr> 
            <tr> 
                <td class="countries"></td> 
                <td class="capitals"></td> 
            </tr> 
            <tr> 
                <td class="countries"></td> 
                <td class="capitals"></td> 
            </tr> 
        </table> 
    </div> 
    <button id="fetchBtn" type="button" name="button">Fetch</button> 
    <script src="capitals.js" charset="utf-8"></script> 
</body> 
  
</html>

输出结果：

Ajax 如何获取JSON响应

步骤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数据。