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

我们将学习如何通过制作自定义HTTP库，使用AJAX进行获取请求。

在开始教程之前，让我们先了解一下Get请求和AJAX。Get请求是用来从API（应用程序编程接口）中获得或获取数据的。AJAX是异步JavaScript和XML的缩写。AJAX允许我们在不重载网页的情况下加载或更新新数据。

例如，如果你曾经使用过ReactJs，它可以在不重新加载网页的情况下更新数据。如果我们在数据更新时重新加载网页，会给用户带来不好的体验。让我们以Twitter为例。它更新喜欢和转发的数量而不需要重新加载网页。假设每当任何一条推特获得喜欢时，都要重新加载网页；这可能是一种糟糕的用户体验。

在JavaScript中，一般来说，开发者使用fetch()或Axios()模块来进行获取请求。在本教程中，我们将制作我们的HTTP库来进行Get请求。

语法和算法

第1步 - 创建CustomHTTPLibrary函数，并使用XMLHTTPRequest方法初始化新的XML HTTP请求。

this.http = new XMLHttpRequest();

第2步 - 在CustomHTTPLibrary()函数的原型中加入GetRequest。同时，用该函数初始化GetRequest。

customHTTPLibrary.prototype.GetRequest = function (basURL, callBackFunction) {
   // code to manage the GET request
}

在上述语法中，baseURL是获取数据的URL，而callBackFunction是执行成功响应或错误的函数。

第3步 - 在GetRequest函数中，在HTTP加载时调用箭头函数。

this.http.onload = () => {
}

第4步 - 在onload函数中，检查响应的状态。如果响应状态为200，说明数据获取成功，并以响应的方式调用回调函数。如果响应状态代码不是200，则意味着存在一些错误，并以错误调用回调函数。

if (selfScope.http.status === 200) {
   // call the callback  function with a response
} else {
// call the callback function with the error
}

第5步 - 最后，我们需要发送http请求。

this.http.send();

第6步 - 我们的自定义HTTP库已经准备好了，可以发出一个Get请求。现在，我们需要使用该库。

第7步 - 创建一个CustomHTTPLibrary函数的新实例。

const httpLibrary = new customHTTPLibrary;

第8步 - 现在，使用httpLibrary对象从API发出一个获取请求。

httpLibrary.GetRequest(URL,
(error, data) => {
   // handle error and data
});

在上述语法中，URL是用来获取数据的API。

例子

在下面的例子中，我们创建了一个自定义的HTTP库来使用AJAX进行获取请求。首先，我们创建了HTTP库，然后通过初始化该库的实例来使用它。

另外，用户可以看一下我们从API得到的响应中管理错误和数据的代码。

<html>
<body>
   <h2>Making the <i>custom HTTP library</i> to Make a Get request using AJAX.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');

      function customHTTPLibrary() {

         // Initialising new XMLHttpRequest method
         this.http = new XMLHttpRequest();
      }

      // Make an HTTP GET Request
      customHTTPLibrary.prototype.GetRequest = function (basURL, callBackFunction) {
         this.http.open('GET', basURL, true);

         let selfScope = this;

         this.http.onload = () => {

            if (selfScope.http.status === 200) {

               callBackFunction(null, selfScope.http.responseText);
            } else {

               callBackFunction('Error in fetching the data : ' + selfScope.http.status);
            }
         }

         // At last, send the request
         this.http.send();
      }

      // Instantiating easyHTTP
      const httpLibrary = new customHTTPLibrary;

      httpLibrary.GetRequest('https://api.publicapis.org/entries',
      (error, data) => {
         if (error) {
            console.log(err);
         } else {
            data = JSON.parse(data);
            for (let item of data.entries) {
               output.innerHTML += data;
            }
         }
      });

   </script>
</body>
</html>