从 xhr 到$.ajax、fetch 轻松开启异步通信的新境界-灵析社区

引言

在前端Web开发里，AJAX（异步JavaScript和XML）就像一支法宝，让你的网页可以在不刷新的情况下与服务器悄悄聊天，无需重新刷新页面，也可以实现网页与服务器之间进行无缝通信。而这三招：XMLHttpRequest、jQuery中的$.ajax，以及现代的Fetch API，它们就像是三种神奇的武功，各自有各自的绝学。今天让我们探讨这三种不同的AJAX实现方式，一起来领略AJAX的魅力！

一、XMLHttpRequest

XMLHttpRequest对象是AJAX的基础，自其诞生以来就一直是不可或缺的组成部分。它就像是AJAX的老祖宗，像是用一把古老的键盘敲出来的代码，悠久而又经典。

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://example.com/api/data', true);
    xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let result = JSON.parse(xhr.responseText);
            console.log(result);
        }
    };
    xhr.send();
});

我们上面这段代码的功能简单来说就是通过XHR（XMLHttpRequest）方法实现向后端提供的URL拿取数据，当我们点击按钮时，就会发出请求实现AJAX从服务器异步获取歌曲信息并更新页面内容。让我们来对这些代码解释一下：

解释：

1.按钮触发事件： 通过JavaScript获取按钮元素，添加点击事件监听器。

2.AJAX请求配置： 当我们用老式的XMLHttpRequest对象配置GET请求，指定服务器URL为 http://192.168.31.45:3000/top/song?type=7 ，感觉就像是在用古董手机进行日常通讯。

3.异步处理： 设置回调函数，onreadystatechange监听XMLHttpRequest对象状态的变化，就像是你此刻守在手机旁等待消息的回复，确保在请求完成且成功时进行处理。状态码4表示通信完毕，200是服务器说“好的，拿走不谢”。

4.处理服务器响应： 最后解析从服务器返回的JSON数据，然后遍历歌曲信息，创建列表项并将获取到的信息内容添加到页面中。

注意： 由于可能涉及跨域请求，所以我们需要确保服务器正确配置CORS，以允许跨域资源的访问。

二、jQuery的$.ajax

虽然我们上面用XHR完成了要求，但是这些代码写起来也太痛苦了。欸，这个时候我们就需要提到jQuery的的$.ajax了，它就像是轻量化的XHR，大大改善了代码的可读性。

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    $.ajax({
        url: 'http://example.com/api/data',
        method: 'GET',
        dataType: 'json',
        success: function (res) {
            console.log(res);
        },
        error: function (xhr, status, error) {
            console.error('Error:', xhr, status, error);
        }
    });
});

解释： 我们使用$.ajax时，需要配置相应的参数：

url：设置请求的URL，这里我们要访问的URL是example.com/api/data
method：指定HTTP请求方法，GET ——表示发送一个获取数据的请求。
dataType：指定期望从服务器接收的数据类型，我们这里是json，希望服务器返回JSON格式的数据。
success：定义请求成功时的回调函数。当请求成功完成时，服务器的响应将传递给这个函数，并且我们在函数内部可以处理这个响应。
error：定义请求失败时的回调函数。如果请求无法完成，或者服务器返回一个错误状态码，这个函数将被调用，你可以在函数内部处理错误信息。

我们可以看到当我们使用了jQuery库大大简化了AJAX请求的过程，但是在此之前不要忘记引入我们jQuery库哦~

三、Fetch API

讲了两种以实现AJAX的方式，那么现代的Fetch API就像是AJAX的新晋小生，简单直接，不需要太多花里胡哨,请看下列代码。

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    fetch('http://example.com/api/data')
        .then(data => data.json())
        .then(res => {
            console.log(res);
        })
        .catch(error => {
            console.error('Error:', error);
        });
});

解释：

在fetch api这个方法里面我们同样需要配置参数，但不多，简单粗暴。

fetch(url)：使用Fetch API发起GET请求到指定的URL。 Fetch API就是一群新潮的年轻人，你不是异步吗，那我就用Promise搞定一切，拒绝冗杂和花里胡哨，像是在拍独立电影一样。
.then(data => data.json())：使用.then()处理Promise，将响应体解析为JSON格式。Fetch API返回的是一个Promise，其中data是表示响应的Response对象。
.then(res => { console.log(res); })：处理JSON解析后的数据。在这个例子中，将解析后的数据打印到控制台。这些.then()的链式调用就像是一场流畅的对白，如果期间出现了小插曲，不行就.catch()。
.catch(error => { console.error('Error:', error); })：处理任何可能的错误。如果请求失败或JSON解析出错，将捕获到的错误打印到控制台。

看完这段代码，不知你是否有种赏心悦目，神清气爽地感觉。相较于传统的XHR方式，我们通过使用现代的Promise和Fetch API，更换成了更简洁和方便的方式来处理异步网络请求。

结语

掌握这三招AJAX神功，你就像是一位不羁的武林少年，可以在网页的江湖里畅快自如地舞动。不同的招式适合不同的场景，所以，别拘泥于一招，放开心扉，开始你的AJAX江湖之旅吧！少年，愿你的代码逍遥自在，BUG永远躲不过你的剑！