JavaScript(JS) DOM AJAX与DOM

上一节我们通过DOM进行动画渲染，使得我们的页面变得更加生动起来，本节我们将深入DOM的学习，认识并实际操作Ajax实现异步通信。

AJAX（Asynchronous JavaScript and XML）是一种在网页中通过JS与服务器进行异步通信的技术。它允许我们在不刷新整个页面的情况下向服务器发送请求并接收响应，从而实现动态更新页面的效果。

在传统的Web应用程序中，用户与服务器之间的通信通常是同步的，当用户与页面交互时，整个页面都会刷新。而通过AJAX，我们可以在后台向服务器发送请求，获取数据并将其插入到页面中，而不需要刷新整个页面。

下面我们先展示一个Ajax请求JS的写法：

// 先设置监听器 - 确保能捕获所有状态变化
//onreadystatechange是一个对象监听属性，用于监听对象的变化
request.onreadystatechange = function() {
    console.log("当前状态:", request.readyState);
    
    if (request.readyState === 4) {
        if (request.status === 200) {
            // 请求成功
            console.log("成功获取数据:", request.responseText);//responseText用于获取服务器返回的文本数据
            document.getElementById('result').innerHTML = request.responseText;//直接进行内容渲染
        } else {
            // 请求失败
            console.error("请求失败，状态码:", request.status);
        }
    }
};

// 然后配置和发送请求
request.open("GET", "get.php", true);//open：配置请求
request.send();//send：开始发送

console.log("请求已发送，等待响应...");

不过现在都普遍采用fetch API 的用法：

fetch API的语法如下：

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

比如我们需要获取JSON数据：

fetch("/api/users")
  .then(response => {
    if (!response.ok) throw new Error("请求失败");
    return response.json();  // 解析JSON
  })
  .then(users => {
    // users 已经是 JavaScript 对象
    users.forEach(user => {
      console.log(`姓名: ${user.name}, 年龄: ${user.age}`);
    });
  })
  .catch(error => {
    console.error("错误:", error);
  });

我们使用fetch API向服务器请求用户数据，首先检查响应是否成功，如果失败则抛出错误；成功则将响应体解析为JSON格式，然后遍历用户数组并在控制台输出每个用户的姓名和年龄信息，最后通过catch块统一处理所有可能的错误情况。

总结：AJAX的优点包括提高用户体验、减少数据的传输量、提高网站性能等。通过在前端与后端之间进行异步通信，我们可以创建更加交互性和动态的Web应用程序。