如何创建自己的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对象打开一个新的GET请求，指定API URL，并设置请求为异步。

步骤4.1 - 将xhr对象的”onload”函数设置为在请求完成时调用。

步骤4.2 - 在”onload”函数中，检查xhr对象的”xhr.status”属性。

步骤4.3 - 如果状态码为200 –

解析xhr对象的responseText，并将结果对象分配给变量”users”。
将具有id为”user-list”的元素分配给变量”list”。
创建一个循环，循环的次数为”users”对象的长度。
在循环中，创建一个新的列表项元素，设置其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);

文件路径是要请求的文件或资源的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请求。