Ajax以及应用-优快云博客

本文链接：https://blog.youkuaiyun.com/kubuto/article/details/136633517

本文详细解释了Ajax的基本概念，XMLHttpRequest对象的属性、方法和事件，以及如何使用它从JSONPlaceholder获取数据并在页面上动态更新。通过实例展示了如何创建异步GET请求并处理响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是Ajax

Ajax即异步JavaScript和XML，它是一种用于创建快速动态网页的技术

Ajax 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

2.Ajax的工作原理

ajax的工作原理就是通过XmlHttpRequest对象来向服务器发出异步请求，从服务器中获得数据，然后用Javascript来操作DOM从而更新局部页面。

3.XMLHttpRequest对象的属性、方法和事件进行深入理解

XMLHttpRequest对象的属性
属性	具体功能
onreadystatechange	用于指定状态改变时所触发的的事件处理器。
readyState	用于获取请求状态的属性 0-未初始化；1-正在加载；2-已加载；3-交互中； 4-完成
responseText	用户获取服务器相应的属性。当ready的值为0，1，2时，responseText为空字符；当readyState的值为3时，responseText为还未完成的响应信息；当readyState的值为4时，responseText为响应信息。
responseXML	用于当接收到完整的HTTP响应时描述XML响应，当readyState的值为不为4，它的取值为null。
status	用于描述HTTP状态代码的属性。仅当readyState的值为3或4时，state属性才可以用。
statusText	用于描述HTTP状态的文本代码。仅当statusText的值为3或4时，state属性才可以用

XMLHttpRequest对象的方法
方法	具体功能
open()	用于设置异步请求的URL，请求方法以及其他参数信息
send()	用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接受到响应为止
sendRequestHeader()	用于为请求HTTP头设置值，该方法必须在open()方法调用之后使用
getRequestHeader()	以字符串的形式返回指定的HTTP头信息
getAllRequestHeader()	以字符串的形式返回完整的HTTP头信息

XMLHttpRequest对象的事件
事件	触发条件
onload	当请求成功完成时触发，此时xhr.readystate=4
onreadystatechange	每当xhr.readyState改变时触发；但xhr.readyState由非 0 值变为 0 时不触发。

4.案例

现在我以以JSONPlaceHolder为数据服务，编写案例

创建了一个新的XMLHttpRequest对象，该对象用于发起HTTP请求

XMLHttpRequest对象来发起一个GET请求。它指定了请求的URL，这个URL会返回用户数据的JSON列表。第三个参数ture表示这是一个异步请求，意味着在请求完成之前，代码会继续执行。

发送HTTP请求。

、

创建一个事件处理器，该处理器会在状态改变时触发。

status

检查请求是否已经完成（readyState===4）并且服务器是否成功处理了请求（status===200）。只有当这两个条件都满足时，代码块内的内容才会被执行。

将服务器返回的JSON字符串（xhr.responseText）解析为JavaScript对象或数组

获取页面上ID为user-list的元素

遍历每个数组并执行回调函数，在该函数中会创建新的li元素且显示用户名字，再将li元素放进到列表中

总代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="user-list">  
  </ul>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);
    xhr.send();
    xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var users = JSON.parse(xhr.responseText);
        var userList = document.getElementById('user-list');
        users.forEach(function(user) {
          var listItem = document.createElement('li');
          listItem.textContent = user.name;
          userList.appendChild(listItem);
        });
    }
  };
  </script>
</body>
</html>