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

巴特西