彻底搞懂JavaScript异步加载 Ajax方法

前端

2023-09-15 00:28:21

JavaScript 异步特性：提升 Web 应用程序的响应能力

什么是 JavaScript 的异步特性？

JavaScript 是一种异步语言，这意味着它可以在不等待代码完全执行完毕的情况下继续执行。这种特性使其非常适合开发交互式 Web 应用程序，因为这样可以提高应用程序的响应速度。

Ajax 异步加载方法

Ajax（异步 JavaScript 和 XML）是一种用于创建交互式 Web 应用程序的技术。它允许 Web 应用程序在不刷新整个页面的情况下与服务器交换数据。Ajax 方法可以是同步的或异步的。

同步与异步的区别

同步方法： 会在调用它的代码执行完毕后才继续执行。
异步方法： 会在调用它的代码执行完毕之前继续执行。

异步加载 Ajax 方法的优势

异步加载 Ajax 方法具有以下优势：

提高应用程序的响应速度
减少服务器负载
提高应用程序的可扩展性

异步加载 Ajax 方法的应用场景

异步加载 Ajax 方法可以用于以下场景：

加载数据
提交表单
更新页面内容
实现实时聊天

Ajax 异步和同步问题

Ajax 根据 async 进行区分同步和异步过程，当 async=true 为异步，async=false 为同步，Ajax 默认 async 为异步。

异步： Ajax 不会影响整个页面的加载，相当于和浏览器加载或者用户操作分开走，互不相干，体现在用户角度就是不会有什么卡顿的感觉仿佛无事发生。
同步： 与异步相反，Ajax 和 js 加载处于同一条线上，就是在加载 Ajax 的时候，全部的过程都等停下来，也就是假死状态。

示例代码：异步加载 Ajax 方法

以下代码演示了如何使用 Ajax 方法异步加载用户数据：

function loadUserData(userId) {
  // 创建一个 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 设置请求的 URL 和方法
  xhr.open("GET", "user-data.php?user_id=" + userId, true);

  // 设置请求的回调函数
  xhr.onload = function() {
    // 如果请求成功，则解析 JSON 数据并更新页面内容
    if (xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      document.getElementById("user-name").innerHTML = data.name;
      document.getElementById("user-email").innerHTML = data.email;
    }
  };

  // 发送请求
  xhr.send();
}