AJAX记录

今天的你也超棒
157 阅读4分钟

工作原理分析

一、Ajax的工作原理

Ajax的核心思想是通过JavaScript在页面上发送异步请求，获取后台数据并将其动态更新到页面上，而无需刷新整个页面。 Ajax的工作流程如下：

  1. JavaScript 发送异步请求：当页面需要更新某个区域的内容时，JavaScript 发送一个异步请求到服务器，这个请求可以是 GET, POST或其他 HTTP 请求方式。
  2. 服务器响应请求：服务器处理请求并返回相应的数据。这些数据通常是使用 XML、HTML 或 JSON 格式编写的。
  3. 解析响应数据：JavaScript 接收到响应后，使用特定的解析器对返回数据进行解析。例如，如果服务器返回的数据格式是 JSON，那么 JavaScript 会使用 JSON 解析器来解析数据。
  4. 更新网页：一旦数据被正确解析，JavaScript 就可以使用这些数据来更新网页的特定部分而不需要重新加载整个页面。这使得 Ajax 能够动态更新网页内容，改进用户体验，提高应用程序的响应速度。

总而言之，Ajax的工作原理是异步向服务器发送请求，然后解析响应数据并更新特定区域的内容。这使得网页能够在不进行整个页面刷新的情况下更新内容，从而提高了网页的动态性和交互性。

二、XMLHttpRequest对象的属性、方法和事件

XMLHttpRequest对象是Ajax的核心，它提供了许多属性、方法和事件来实现异步交互。下面分别介绍一下：

1.属性

  • onreadystatechange: 该属性为函数类型，当 readyState 属性发生改变时它会被调用。示例：

  • xhr.onreadystatechange = function() {
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}

    • readyState: 表示 XMLHttpRequest 对象的状态，有五个属性值:

      • 0 (请求未初始化)
      • 1 (服务器连接已建立)
      • 2 (请求已接收)
      • 3 (请求处理中)
      • 4 (请求已完成，且响应已就绪)

    • responseText: 包含从服务器返回的响应数据，格式为字符串。

    • status: 服务器返回的 HTTP 状态码。

2.方法

  • open(method, url, async)：用于创建一个新的请求。其中 method 参数表示请求的类型（GET 或 POST），url 参数表示服务器请求的地址，async 参数表示请求是否是异步发送的（true 或 false）。

  • xhr.open('GET', 'http://www.example.com/', true);
    • send()：发送一个请求，可选地传递请求数据。
    xhr.send();
    • setRequestHeader(name, value)：设置请求头的值。
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.事件

  • onloadstart：请求被发送到服务器时触发；

  • onloadend：请求完成时触发（无论成功还是失败）；

  • onload：请求成功时触发；

  • onerror：请求失败时触发；

  • onabort：请求被取消时触发。

    XMLHttpRequest 对象的属性、方法和事件可以帮助开发人员在 JavaScript 代码中与服务器通信，并使用这些数据来更新网页内容，从而增强用户体验。

三、JSONPlaceHolder案例的使用

用于显示评论的列表和表单:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSONPlaceholder API Comments Demo</title>
</head>
<body>
  <h1>Add Comments</h1>
​
  <form id="comment-form">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div>
      <label for="comment">Comment:</label>
      <textarea id="comment" name="comment" required></textarea>
    </div>
    <button type="submit">Add Comment</button>
  </form>
​
  <h1>Comments</h1>
​
  <ul id="comments"></ul>
​
  <script src="app.js"></script>
</body>
</html>
​

表单中包含三个字段：评论者名称、评论者邮箱和评论内容。还有一个提交按钮，当单击该按钮时，将向服务器发送评论数据。

下一步是实现 Ajax 请求，这样我们可以将用户的评论发送到服务器上并将其添加到 DOM 中。我们需要使用 XMLHttpRequest 对象向服务器发送 POST 请求，当服务器响应返回时，从响应中解析数据，然后将其添加到 DOM 中。以下是一个示例代码：

const form = document.getElementById('comment-form');
const comments = document.getElementById('comments');
​
form.addEventListener('submit', function(event) {
  event.preventDefault();
​
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const comment = document.getElementById('comment').value;
​
  const xhr = new XMLHttpRequest();
​
  xhr.open('POST', 'https://jsonplaceholder.typicode.com/comments');
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
​
  xhr.onreadystatechange = function() {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 201) {
      const data = JSON.parse(xhr.responseText);
      renderComment(data);
    }
  };
​
  xhr.send(`name=${name}&email=${email}&body=${comment}`);
});
​
function renderComment(comment) {
  const item = document.createElement('li');
  item.innerHTML = `<strong>${comment.name} (${comment.email})</strong><br>${comment.body}`;
​
  comments.append(item);
}
​

在上述代码中，当提交按钮被点击时，我们获取了表单元素中的数据并使用 XMLHttpRequest 对象向服务器发送 POST 请求。为了指定我们要发送的数据类型，我们必须设置 Content-type 头的值为 application/x-www-form-urlencoded。一旦服务器在响应中回馈了数据，我们将数据解析为 JSON 格式，并使用 renderComment() 函数将评论添加到列表中。

最后通过调用 renderComment() 函数，我们将评论添加到列表中:

function renderComment(comment) {
  const item = document.createElement('li');
  item.innerHTML = `<strong>${comment.name} (${comment.email})</strong><br>${comment.body}`;
​
  comments.append(item);
}
​

Ajax 和 XMLHttpRequest 对象的应用场景：

  1. 动态加载内容：使用 Ajax，您可以动态加载内容而无需重新加载整个页面。例如，您可以使用 Ajax 将新的帖子添加到论坛或文章列表。
  2. 表单验证：使用 XMLHttpRequest 对象，您可以通过异步方式验证表单中的用户输入。这样，用户在等待服务器响应时可以继续填写表单。这样的 UI 行为可以
avatar
文章
阅读
粉丝