通过制作自定义 HTTP 库使用 AJAX 获取请求

任务是展示如何通过制作自定义 HTTP 库来使用XMLHttpRequest从 API 获取数据。我将以一个包含对象数组的假 API 为例，从该 API 中，我们将展示如何通过创建自定义 HTTP 库的XMLHttpRequest方法获取数据。

API 链接： https://jsonplaceholder.typicode.com/posts

什么是阿贾克斯？

Ajax 或异步 JavaScript 和 XML 用于在不刷新网页的情况下与服务器通信，从而增加用户体验和更好的性能。要了解有关 Ajax 的更多信息，请单击 https://www.geeksforgeeks.org/ajax-introduction/。

先决条件：只需要 HTML、CSS 和 JavaScript 的基本知识。

注意：首先，制作一个HTML文件，根据需要添加HTML标记。在正文的底部，附加了两个相同顺序的脚本文件“library.js”和“app.js”。

方法：制作“library.js”文件所需的步骤如下。

1. 在library.js文件中，创建一个easyHTTP函数来初始化一个新的 XMLHttpRequest()方法。
2. 将easyHTTP.prototype.get设置为一个包含两个参数'url'和一个回调的函数。
3. 现在使用open函数启动一个对象。它需要三个参数，第一个是类型（GET 或 POST 或 PUT 或 DELETE），第二个是 API 的 URL，最后一个是布尔值（“true”表示异步调用，“false”表示同步调用）。
4. 现在我们将使用onload函数来显示数据。在 API 调用完成后执行onload函数。我们将检查成功状态。如果状态码是 200，那么我们将运行一个回调函数，它本身包含两个参数错误和响应文本。如果状态码不是 200，回调函数将简单地打印错误消息。
5. 最后一步是使用send()函数发送请求。

创建app.js文件所需的步骤

1. 首先使用 new 关键字实例化easyHTTP 。
2. 在获取原型函数。
3. 回调函数包含两个参数error来打印发生的错误和response ，以获取实际响应。

   上述步骤的实现：
   HTML 文件：

   HTML

     
   
       
       
     
       Get request
   
     
   
       
           Get request using xmlhttpRequest/ 
           Ajax by making custom HTTP library.
       
     
       
       
       
   
     

   
   
   
   

   库.js：

   Javascript

   function easyHTTP() {
     
       // Initialising new XMLHttpRequest method
       this.http = new XMLHttpRequest();
   }
     
   // Make an HTTP GET Request
   easyHTTP.prototype.get = function (url, callback) {
     
       // Open an obejct (GET/POST, PATH, 
       // ASYN-TRUE/FALSE) 
       this.http.open('GET', url, true);
     
       // Assigning this to self to have  
       // scope of this into the function
       let self = this;
     
       // When response is ready 
       this.http.onload = function () {
     
           // Checking status
           if (self.http.status === 200) {
     
               // Callback function (Error, response text)
               callback(null, self.http.responseText);
           } else {
     
               // Callback function (Error message)
               callback('Error: ' + self.http.status);
           }
       }
     
       // At last send the request 
       this.http.send();
   }
   

   应用程序.js

   Javascript

   // Instantiating easyHTTP
   const http = new easyHTTP;
     
   // Get prototype method(URL, callback(error,
   // response text))
   http.get('https://jsonplaceholder.typicode.com/posts',
       function (err, posts) {
           if (err) {
               console.log(err);
           } else {
     
               // parsing string data to object
               let data = JSON.parse(posts);
               console.log(data);
           }
       });
   

   输出：