极客教程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>
我们学会了通过定制的HTTP库，使用AJAX做一个获取请求。此外，用户还可以通过定制的HTTP库，尝试使用AJAX进行POST请求。