极客教程如何创建自己的Ajax功能
Ajax（Asynchronous JavaScript and XML）请求是一个使用JavaScript的HTTP请求，通常使用XMLHttpRequest对象，与服务器交换数据并更新网页的特定部分，而不需要全页面刷新。有两种方法来创建自己的Ajax功能。你可以使用JSONPlaceholder API或者你自己的文件。我们将在本教程中详细讨论这两种方式。
使用JSONPlaceholder API
JSONPlaceholder是一个免费的在线REST API，你可以用它来测试和练习你的开发技能
语法
用户可以按照下面的语法，使用JavaScript的 ” XMLHttpRequest ” 对象创建一个Ajax请求。
let xhr = new XMLHttpRequest();
xhr.open("HTTP_METHOD" , "API_URL" , true);
//HTTP_METHOD can be "GET" , "POST" , "PUT", etc.
xhr.onload = function(){
if(xhr.status === 200) {
//handle the response
} else {
//show xhr.status
}
};
xhr.send();
这将创建一个新的XMLHttpRequest对象，使用指定的HTTP_METHOD打开与指定API_URL的连接，并发送请求。请求完成后，将调用onload函数，xhr.status属性将包含响应的HTTP状态代码。你可以在onload函数中处理响应数据，并相应更新你的HTML、JavaScript或JSON。
请记住，你需要提供你的API_URL，并查看API文档以了解正确的HTTP_METHOD和参数的使用。
操作步骤
按照下面的步骤，使用JSONPlaceholder API创建自己的Ajax功能—-。
第1步 - 在HTML页面上创建一个按钮元素，有一个onclick事件，调用getUsers()函数。
第2步 - 在HTML页面上创建一个id属性为 “user-list “的无序列表元素和一个id属性为 “error “的div元素。
第3.1步 - 创建一个新的XMLHttpRequest对象，并将其分配给一个名为 “xhr “的变量。
第3.2步 - 使用xhr对象打开一个新的GET请求到指定的API URL，并设置请求为异步。
第4.1步 – 设置xhr对象的 “onload “函数，以便在请求完成时调用。
第4.2步 - 在 “onload “函数中，检查xhr对象的 “xhr.status “属性。
第4.3 --如果状态代码为200 –
- 解析xhr对象的responseText，并将所得对象分配给变量 “users”。
-
将id为 “user-list “的元素分配给变量 “list”。
-
创建一个for循环，迭代 “users “对象的长度。
-
在for循环中，创建一个新的列表项元素，将其innerHTML设置为当前用户的名字属性，并将其追加到 “list “元素中。
第4.4步 - 如果状态代码不是200，用状态代码更新错误div。
第5步 - 将请求发送到服务器。
例子
下面是一个例子，说明你如何使用JavaScript和JSONPlaceholder API创建自己的Ajax功能，JSONPlaceholder API是一个免费的、开源的API，用于测试和原型设计。
这个例子显示了一个简单的HTML页面，它从API中检索了一个用户列表，并在一个列表中显示他们的名字。
<html>
<body>
<h3>User List</h3>
<button onclick = "getUsers()"> Get Users </button>
<ul id = "user-list"></ul>
<div id = "error" > </div>
<script>
function getUsers() {
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.onload = function() {
if (xhr.status === 200) {
let users = JSON.parse(xhr.responseText);
let list = document.getElementById("user-list");
list.innerHTML = "";
for (let i = 0; i < users.length; i++) {
let li = document.createElement("li");
li.innerHTML = users[i].name;
list.appendChild(li);
}
} else {
let error = document.getElementById("error");
error.innerHTML = "Error: " + xhr.status;
}
};
xhr.send();
}
</script>
</body>
</html>
使用我们自己的文件
我们也可以使用我们自己的文件创建Ajax请求。我们需要给一个文件路径而不是API_URL。
语法
按照下面的语法，使用这个方法创建一个Ajax请求。
let xhr = new XMLHttpRequest();
xhr.open("HTTP_METHOD" , "FILE_PATH" , true);
FILE PATH是你想请求的文件或资源的URL。这可能是一个网页，一个图像，一个JSON文件，一个文本文件等。”true “意味着请求是异步的，脚本将在处理请求的同时继续执行。
操作步骤
按照下面的步骤，使用我们自己的文件创建自己的Ajax功能—-。
第1步 - 创建一个XMLHttpRequest对象的实例。
第2步 - 对 “example.txt “打开一个GET请求（如果该文件位于一个子目录中，你可以指定目录和文件名）。
第3步 --添加一个onload事件监听器；在onload事件中，检查请求状态。
第3.1步 --如果状态为200，则读取文件内容并将其设置为变量’fileContent’。获取id为’file-content’的元素，并将该元素的innerHTML设置为fileContent。
第3.2步 - 如果状态不是200，得到id为’error’的元素，并将该元素的innerHTML设置为带有状态代码的错误信息。
第4步 - 向服务器发送一个请求。
例子
一个 “example.txt “是一个带有信息的文本文件。”你正在阅读一个示例文本文件”。你可以用你的文本文件的实际名称替换 “example.txt”，并确保该文本文件与HTML文件在同一目录下，或者给你的文件名加上目录。
下面是一个例子，说明如何使用Ajax请求来读取一个文本文件并在网页上显示其内容。
<html>
<body>
<h3>Text File Reader</h3>
<button onclick = "readTextFile()"> Read Text File </button>
<div id = "file-content" ></div>
<div id = "error" > </div>
<script>
function readTextFile() {
let xhr = new XMLHttpRequest();
xhr.open("GET" , "/about/topics_list.txt" , true);
xhr.onload = function() {
if (xhr.status === 200) {
let fileContent = xhr.responseText;
let contentDiv = document.getElementById("filecontent");
contentDiv.innerHTML = fileContent;
}
else {
let error = document.getElementById("error");
error.innerHTML = "Error: " + xhr.status;
}
};
xhr.send();
}
</script>
</body>
</html>
请注意，状态代码200是对一个成功的HTTP请求的标准响应。它表明服务器收到、理解并接受了该请求。
请注意，这段代码只有在你的文本文件与你的HTML文件在同一个域的情况下才会起作用；如果你试图从另一个域访问一个文件，你会得到一个CORS错误。
我们已经学会了使用JSONPlaceholder API来创建一个Ajax请求，使用JavaScript的XMLHttpRequest对象和使用我们自己的文件来创建一个Ajax请求。