数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律如何创建自己的 Ajax 功能？
Ajax（异步 JavaScript 和 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 对象向指定的 API URL 发出新的 GET 请求，并将请求设置为异步。
步骤 4.1 - 将 xhr 对象的“onload”函数设置为在请求完成后调用。
步骤 4.2 - 在“onload”函数中，检查 xhr 对象的“xhr.status”属性。
步骤 4.3 - 如果状态代码为 200 -
解析 xhr 对象的 responseText 并将结果对象分配给变量“users”。
将 id 为“user-list”的元素分配给变量“list”。
创建一个 for 循环，迭代“users”对象的长度。
在 for 循环中，创建一个新的列表项元素，将其 innerHTML 设置为当前用户的 name 属性，并将其追加到“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 使用 JavaScript 的 XMLHttpRequest 对象创建 Ajax 请求，以及如何使用我们自己的文件创建 Ajax 请求。
260 次浏览
