数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 AJAX 和自定义 HTTP 库发起 Get 请求
我们将学习如何通过创建自定义 HTTP 库来使用 AJAX 发起 Get 请求。
在我们开始本教程之前，让我们先了解一下 Get 请求和 AJAX。Get 请求用于从 API（应用程序编程接口）获取或提取数据。AJAX 代表异步 JavaScript 和 XML。AJAX 允许我们在不重新加载网页的情况下加载或更新新数据。
例如，如果您曾经使用过 ReactJs，它会在不重新加载网页的情况下更新数据。如果我们在每次数据更新时都重新加载网页，可能会导致糟糕的用户体验。以 Twitter 为例，它会在不重新加载网页的情况下更新点赞和转发次数。假设每当任何推文获得点赞时都重新加载网页，这会导致糟糕的用户体验。
在 JavaScript 中，开发人员通常使用 fetch() 或 Axios() 模块来发起 Get 请求。在本教程中，我们将创建自己的 HTTP 库来发起 Get 请求。
语法和算法
步骤 1 - 创建 CustomHTTPLibrary 函数，并使用 XMLHTTPRequest 方法初始化新的 XML HTTP 请求。
this.http = new XMLHttpRequest();
步骤 2 - 将 GetRequest 添加到 CustomHTTPLibrary() 函数的原型中。同时，用函数初始化 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 发起 Get 请求。
httpLibrary.GetRequest(URL,
(error, data) => {
// handle error and data
});
在上面的语法中，URL 是要获取数据的 API。
示例
在下面的示例中，我们创建了一个自定义 HTTP 库来使用 AJAX 发起 Get 请求。首先，我们创建了 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 发起 Get 请求。此外，用户还可以尝试通过创建自定义 HTTP 库来使用 AJAX 发起 POST 请求。
198 次浏览
