手写ajax 让面试官眼前一亮

什么是ajax

AJAX（Asynchronous JavaScript and XML）是一种用于在Web应用程序中进行异步数据交互的技术。通过AJAX，可以在不重新加载整个页面的情况下，通过后台服务器异步地发送和接收数据。这使得Web应用程序能够更快地响应用户的操作，提高用户体验。

AJAX 的主要特点包括：

异步性（Asynchronous）： AJAX 允许在后台发送和接收数据，而不会阻塞页面的加载和用户的交互。这意味着用户可以继续与页面交互，而不必等待数据的传输和处理。
JavaScript： AJAX 主要使用 JavaScript 来实现异步通信。JavaScript负责处理用户交互和触发异步请求，以及处理从服务器返回的数据。
XMLHttpRequest 对象： 在早期的 AJAX 中，XMLHttpRequest 对象被广泛用于在浏览器和服务器之间传递数据。然而，现代的 AJAX 应用程序通常使用更灵活的技术，如 Fetch API。
数据格式： 虽然 AJAX 的名字中包含 "XML"，但实际上可以使用多种数据格式，如 JSON、HTML、文本等。最常见的是使用 JSON，因为它易于处理和解析，并且与JavaScript紧密集成。

使用 AJAX，开发人员可以实现更流畅和动态的用户界面，而无需完全重新加载页面。这对于单页应用程序（Single Page Applications）和其他需要实时更新的Web应用程序非常有用。

代码展示

<!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>
<script>
// 手写ajax 跟业务相关 异步同步
// - xhr 对象
// - 流程 open send onreadystatechange
// - promise resolve reject 

const fetchJSONData = function(url) {
    // p 在开始的时候状态为pending
    return new Promise((resolve, reject) => {
        // 执行器 
        // 耗时任务的容器
        console.log('开始写ajax')
        // 兼容性·IE6.0以前 现在没什么必要 IE-> Edge 
        const xhr =
            XMLHttpRequest 
            ? new XMLHttpRequest() 
            : new ActiveXObject('Microsoft.XMLHTTP')

        xhr.open('GET', url, false)
        // 宏任务 事件
        xhr.onreadystatechange=function() {
            if (xhr.readyState !== 4) return
            // 叼一下 表现一下 304 Not Modified
            if (xhr.status === 200 || xhr.status === 304) {
                resolve(xhr.responseText);
            } else {
                reject(new Error(xhr.responseText))
            }
        }
        xhr.send()；
    })
};
// 刚开始时， 状态为pending -> fulfilled 

;(async function() {
    const p = fetchJSONData('填写url地址')
    console.log('----')
    console.log(p)
})()

// - 看返回的数据  json
// - 装插件
</script>
</body>
</html>

代码理解

一. 首先，ajax是会进行http请求的，所以我们需要将异步变成同步，那就需要promise对象来完成。先来理解promise的三个状态，pending ，fulfilled,rejected.这三个术语通常与 JavaScript 中的 Promise 对象相关联，用于描述 Promise 的状态。Promise 是一种用于处理异步操作的对象，它代表一个尚未完成但最终会完成或失败的操作。

Pending（进行中）： Promise 对象刚被创建时的初始状态。表示操作尚未完成，仍然处于进行中的状态。
Fulfilled（已完成）： 表示异步操作成功完成。Promise 进入此状态时，会调用与 Promise 关联的 then 方法，允许执行与成功操作相关的代码。
Rejected（已拒绝）： 表示异步操作失败。当 Promise 进入此状态时，会调用与 Promise 关联的 catch 方法，允许执行与失败操作相关的代码。

这些状态反映了 Promise 的生命周期，从开始的进行中，到成功完成（已完成），或者遇到错误导致操作失败（已拒绝）。Promise 提供了一种更好地处理异步操作的方式，避免了回调地狱（callback hell）和使代码更加清晰可读

开始写ajax，axaj需要什么呢？需要xhr对象。如代码22行到25行，new 一个XMLHttpRequest()或者new ActiveXObject('Microsoft.XMLHTTP')，一般来说只需要new 一个XMLHttpRequest()就够了，但是为了考虑兼容性的问题还可以new一个 ActiveXObject('Microsoft.XMLHTTP')，这是老版本浏览器的兼容性问题，可以在这里给面试官一点点印象。
xhr.open('GET', url, false) 是使用 XMLHttpRequest 对象进行同步（Synchronous）的 GET 请求。在这个语句中，三个参数分别是：

'GET': 表示请求的 HTTP 方法，这里是 GET 方法，用于获取指定资源。
url: 表示请求的目标 URL，即要获取的资源的地址。
false: 表示是否使用异步方式。在这里，设置为 false 表示使用同步方式发送请求。同步请求会阻塞代码的执行，直到请求完成，然后才继续执行后面的代码。

对请求的事件进行监听。这段代码是一个用于处理 XMLHttpRequest 对象状态变化的事件监听器。具体来说，它在 xhr.onreadystatechange 事件中定义了一个回调函数。让我解释其中的关键部分：

if (xhr.readyState !== 4) return: XMLHttpRequest 对象有一个 readyState 属性，表示请求的状态。当 readyState 为 4 时，表示请求已完成。这行代码检查 readyState，如果不为 4，就直接返回，不执行后续的代码。
if (xhr.status === 200 || xhr.status === 304) {: 这里检查了 HTTP 响应的状态码。状态码 200 表示请求成功，而状态码 304 表示资源未被修改，可以从缓存中获取。如果是这两个状态码之一，说明请求被成功处理，调用 resolve 并传递响应文本。
else { reject(new Error(xhr.responseText)) }: 如果响应状态码不是 200 或 304，则说明请求有问题。在这种情况下，会调用 reject，并传递一个包含响应文本的错误对象。

xhr.send() 是 XMLHttpRequest 对象的方法，用于发送 HTTP 请求。在上下文中，通常是在设置好请求的各种参数（如请求方法、URL、是否异步等）后，通过调用 send 方法触发实际的请求。
最后，我们可以写一个函数来输出fetchJSONData()函数所返回的值。

总结

手写ajax的几个步骤

new一个XMLHttpReques对象取名为xhr
new一个promis，将耗时的任务异步变同步
xhr.open,进行一个get请求
xhr.onreadystatechange 对事件的状态进行监听，是返回所需的数据还是报错。
xhr.send发送实际的请求

这样一个手写的ajax就完成啦！！！