🫣初识AJAX(短文📖)

Aphasia
VIP.1 初学乍练
741 阅读3分钟

引言

当你第一次听到 AJAX，也许会感到陌生，但其实它早已融入我们使用的网页中。本文将带你慢慢认识这个新朋友🧑‍🤝‍🧑。

🤔什么是 AJAX？

AJAX (Asynchronous JavaScript and XML) 是一种技术，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。简单来说，AJAX 能够让网页在后台拉取数据，从而提供更流畅和高效的用户体验。

image.png

⚙️AJAX 的核心优势

  1. 局部刷新：更新页面的一部分内容，而无需刷新整个页面。
  2. 提升性能：减少不必要的资源加载，加快响应速度。
  3. 增强交互：支持实时更新，改善用户体验。

使用 fetch：现代浏览器的标准方法

现代 JavaScript 提供了 fetch API 来发送 HTTP 请求并处理响应。它基于 Promise，能以简洁的方式处理异步操作。

基本用法

以下示例通过 fetch API 获取github某组织的成员数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fecch</title>
</head>
<body>
<ul id="memberList">

</ul>
<script>
    const oUL = document.getElementById('memberList');
    fetch('https://api.github.com/orgs/lemoncode/members')
    .then(response => response.json())
    .then(data => {
       oUL.innerHTML = data.map(member => `
       <li>
        <img src= "${member.avatar_url}" alt="">
        <span>${member.login}</span>
       </li>
       `
       )
    }).join('')
</script>
</body>
</html>

运行结果：

image.png

（图片太大，只截了一张）

📌代码解析

  1. fetch() ：接收一个 URL，返回一个 Promise 对象。
  2. response.json() ：将响应数据解析为 JSON 格式。
  3. 数据处理：利用解析后的数据动态生成页面内容。
  4. 错误捕获：通过 .catch() 捕获请求过程中发生的错误。

fetch 的优点

  • 简洁：相比传统的 XMLHttpRequest，代码更短，逻辑更清晰。
  • 基于 Promise：避免回调地狱（callback hell）。
  • 自动处理 JSON：无需手动解析 JSON 数据。

🚨注意：fetch 不会自动抛出 HTTP 错误（如 404 或 500），这些需要手动处理。

✍🏻手写 AJAX 请求：从 XMLHttpRequest 开始

尽管 fetch 是主流，但理解和掌握 XMLHttpRequest 仍然非常重要，尤其是在需要兼容旧浏览器或精细控制请求的场景下。

示例代码

以下是一个基于 XMLHttpRequest 的 AJAX 请求：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手写 AJAX</title>
</head>
<body>
  <ul id="members"></ul>
  <script>
    const getJSON = function (url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);

        xhr.onreadystatechange = function () {
          if (xhr.readyState !== 4) return;

          if (xhr.status === 200 || xhr.status === 304) {
            resolve(xhr.responseText);
          } else {
            reject(new Error(xhr.statusText));
          }
        };

        xhr.send();
      });
    };

    getJSON('https://api.github.com/orgs/lemoncode/members')
      .then(res => JSON.parse(res))
      .then(data => {
        document.getElementById('members').innerHTML = data.map(member => `
          <li>
            <img src="${member.avatar_url}" alt="${member.login}">
            <span>${member.login}</span>
          </li>
        `).join('');
      })
      .catch(err => console.error('请求失败:', err));
  </script>
</body>
</html>

📌代码解析

  1. 创建请求：通过 XMLHttpRequest 创建一个请求对象。
  2. 设置请求方法和 URL：使用 xhr.open() 方法定义请求的类型和目标 URL。
  3. 监听请求状态变化：通过 onreadystatechange 监听请求状态变化。
  4. 发送请求：调用 xhr.send() 发送请求。
  5. Promise 化：将异步操作封装成 Promise，简化代码逻辑。

XMLHttpRequest 的优势

  • 兼容性强：适配旧版浏览器，是 AJAX 技术的早期实现。
  • 精细控制：可以手动设置请求头、处理超时等，灵活性较高。

⚔️比较与总结

fetch 与 XMLHttpRequest 的对比

特性fetchXMLHttpRequest
API 简洁性简洁直观，基于 Promise较为繁琐，需手动处理状态
错误处理不自动处理 HTTP 错误可手动判断状态码
JSON 支持内置支持 JSON 转换需手动解析
兼容性不支持 IE支持老旧浏览器

适用场景

  • 使用 fetch：现代浏览器和大部分应用场景。
  • 使用 XMLHttpRequest：需要精细控制或兼容性要求高的场景。

📖结语

🥱写到这里，后续会继续学习补充内容。升级太慢了，还差300分才到四级🤯

点点赞吧~😘

猫抓爱心.gif

avatar
文章
阅读
粉丝