如何使用 AJAX 使用简单的 API？

AJAX(异步 JavaScript 和 XML)是一组用于调用服务器以获取一些数据的工具。在本文中，我们将看到如何使用 AJAX 实现一个简单的 API 调用。

先决条件： AJAX及其函数的基础知识。您可以从这里学习所有基础知识。

什么是基础建筑?
我们将从免费 API 的员工对象中获取员工姓名，并将其显示在列表中。互联网上有许多免费的 API。您可以使用其中任何一种。

HTML 代码：我们有一个用于获取数据的按钮和一个空的无序列表，我们将在其中使用 JavaScript 动态添加我们的列表项。

  

    
    
    
  
    
    
  
    
        How to use simple API using AJAX ?
    

  

    
        Fetch Data
    
  
    
        Employee List
        
    
  
    
    
    
    
    
      
    
    
      
    
    

  

AJAX 代码：

• 第一步：第一步是获取按钮元素的getElementById方法。
• 第二步：第二步是给按钮添加一个事件监听器，并为其提供回调函数。
• 第 3 步：使用new关键字实例化一个XHR对象。
• 第 4 步：使用open函数打开一个对象。它需要三个参数，第一个是类型(GET 或 POST)，第二个是 API 的 URL，最后一个是布尔值(true 表示异步调用，false 表示同步调用)。
• 第 5 步：现在我们将使用onload函数来显示数据。在 API 调用完成后执行 onload函数。我们将检查成功的状态。我们用 200 检查它，因为 200 是 HTTP 请求的成功代码。
• 第 6 步：现在，我们将使用将其解析为 JSON 对象，以便我们可以轻松地从中获取数据。
• 第 7 步：在这一步中，我们将使用循环遍历对象中的所有项目，并使用innerhtml属性将其添加到列表中。
• 第 8 步：最后一步是使用send()函数发送请求。

  下面是上述步骤的实现。我们还在每一行中提供了注释，以使代码易于理解。

      let fetchBtn = document.getElementById("fetchBtn");
    
    
      fetchBtn.addEventListener("click", buttonclickhandler);
    
      function buttonclickhandler() {
    
          // Instantiate an new XHR Object
          const xhr = new XMLHttpRequest();
    
          // Open an obejct (GET/POST, PATH,
          // ASYN-TRUE/FALSE)
          xhr.open("GET", 
  "http://dummy.restapiexample.com/api/v1/employees", true);
    
    
    
    
          // When response is ready
          xhr.onload = function () {
              if (this.status === 200) {
    
                  // Changing string data into JSON Object
                  obj = JSON.parse(this.responseText);
    
                  // Getting the ul element
                  let list = document.getElementById("list");
                  str = ""
                  for (key in obj.data) {
                      str += `<li>${obj.data[key].employee_name}</li>`;
                  }
                  list.innerHTML = str;
              }
              else {
                  console.log("File not found");
              }
          }
    
          // At last send the request
          xhr.send();
      }

  完整代码：是以上两个代码段的组合。

    
  
    
      
      
      
    
      
      
    
      
          How to use simple API using AJAX ?
      
  
    
  
      
          Fetch Data
      
    
      
          Employee List
          
      
    
      
      
      
          let fetchBtn = document.getElementById("fetchBtn");
    
          fetchBtn.addEventListener("click", buttonclickhandler);
    
          function buttonclickhandler() {
    
              // Instantiate an new XHR Object
              const xhr = new XMLHttpRequest();
    
              // Open an obejct (GET/POST, PATH,
              // ASYN-TRUE/FALSE)
              xhr.open("GET", 
  "http://dummy.restapiexample.com/api/v1/employees", true);
    
    
    
    
              // When response is ready
              xhr.onload = function () {
                  if (this.status === 200) {
    
                      // Changing string data into JSON Object
                      obj = JSON.parse(this.responseText);
    
                      // Getting the ul element
                      let list = document.getElementById("list");
                      str = ""
                      for (key in obj.data) {
                          str += 
                          `<li>${obj.data[key].employee_name}</li>`;
                      }
                      list.innerHTML = str;
                  }
                  else {
                      console.log("File not found");
                  }
              }
              xhr.send();
          }
      
    
      
      
        
      
      
        
      
      
  
    

  输出：