🫣初识AJAX(短文📖)

753 阅读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 技术的早期实现。
  • 精细控制:可以手动设置请求头、处理超时等,灵活性较高。

⚔️比较与总结

fetchXMLHttpRequest 的对比

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

适用场景

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

📖结语

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

点点赞吧~😘

猫抓爱心.gif