XMLHttpRequest、Ajax、Fetch与Axios

1. 引言

XMLHttpRequest、Ajax、Fetch与Axios是网页前后端交互中常见到的名词

参考MDN：Ajax - Web 开发者指南 | MDN (mozilla.org)

Ajax（Asynchronous JavaScript + XML（异步 JavaScript 和 XML））, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，最重要的就是XMLHttpRequest

当然，曾经在前端影响力极大的jQuery中有一个ajax()方法，有时说的Ajax可能也指它

参考MDN：XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

XMLHttpRequest（XHR）是Web浏览器的API，可以在不刷新页面的情况下请求特定 URL，获取数据，允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML

参考MDN：Fetch API - Web API 接口参考 | MDN (mozilla.org)

Fetch是Web浏览器获取数据的API，其作用和XMLHttpRequest类似，是XMLHttpRequest的一种替代品，或者说是演进

参考Axios官网：Getting Started | Axios Docs (axios-http.com)

Axios在浏览器端是XMLHttpRequest的进一步封装，并且增加了一些特性，如支持Promise、自动转换JSON等

2. 相互关系

XMLHttpRequest和Fetch是浏览器交互数据的API

jQuery的ajax()方法和Axios是XMLHttpRequest的进一步封装，更为简单易用

Ajax是一个描述增量更新而不需要重载（刷新）整个页面的术语，参考MDN提到的Jesse James Garrett 在 2005 年 2 月写了这篇文章 adaptive path，文章表述了Ajax的构成：

• standards-based presentation using XHTML and CSS;

• dynamic display and interaction using the Document Object Model;

• data interchange and manipulation using XML and XSLT;

• asynchronous data retrieval using XMLHttpRequest;

• and JavaScript binding everything together.

第四点明确了数据传输使用XMLHttpRequest，从这个角度来说，Fetch不属于Ajax的范畴

然而，参考：XMLHttpRequest vs the Fetch API for Ajax - SitePoint中提到的：

• We now use “Ajax” as a generic term for any client-side process which fetches data from a server and updates the DOM dynamically without a full-page refresh.

随着时代的发展，Ajax泛指客户端从服务器获取数据并动态更新DOM，而无需刷新整个页面的通用术语，从这个角度来说，Fetch属于Ajax的范畴

进一步的对比可参考：

• Ajax, Axios, Fetch区别 - 简书 (jianshu.com)

3. XMLHttpRequest的使用

参考MDN：使用 XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

也可参考：XMLHttpRequest使用详解 - 迪米特 - 博客园 (cnblogs.com)

一个简单的XMLHttpRequest示例如下：

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append('userId', '1');
    formData.append('title', 'leihou');
    formData.append('body', '雷猴');
    xhr.open('POST', 'http://jsonplaceholder.typicode.com/posts');
    xhr.send(formData);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
        else {
            console.log(xhr.statusText);
        }
    }
</script>

4. Fetch的使用

参考MDN：使用 Fetch - Web API 接口参考 | MDN (mozilla.org)

一个简单的Fetch示例如下：

<script>
    fetch('http://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({
            userId: '1',
            title: 'leihou',
            body: '雷猴'
        })
    })
        .then(response => response.json())
        .then(data => console.log(data));
</script>

5. Axios的使用

参考Axios官网：Getting Started | Axios Docs (axios-http.com)

一个简单的Axios示例如下：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    axios.post('http://jsonplaceholder.typicode.com/posts', {
        userId: '1',
        title: 'leihou',
        body: '雷猴'
    })
        .then(function (response) {
        console.log(response);
    })
        .catch(function (error) {
        console.log(error);
    });
</script>

6. Ajax的使用

jQuery的ajax()方法参考：jQuery.ajax() | jQuery API Documentation

也可参考：jQuery Ajax - 云崖先生 - 博客园 (cnblogs.com)

一个简单的ajax示例如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $.ajax({
        url: "http://jsonplaceholder.typicode.com/posts",  // 发送的路径
        type: "post",  // 发送方式
        dataType: 'JSON',  // 反序列化
        data: {
            userId: '1',
            title: 'leihou',
            body: '雷猴'
        },  // 发送的数据
        success: (res) => {  // 成功获取到后端返回结果的回调函数
            console.log(res);
        },
        error: () => {  // 发送失败的回调函数
            console.log("失败");
        }
    })
</script>

7. 参考资料

[1]MDN Web Docs (mozilla.org)

[2]Getting Started | Axios Docs (axios-http.com)

[3]XMLHttpRequest使用详解 - 迪米特 - 博客园 (cnblogs.com)

[4]jQuery Ajax - 云崖先生 - 博客园 (cnblogs.com)

[5]jQuery.ajax() | jQuery API Documentation