网络请求大揭秘：从XMLHttpRequest到axios

前言

在现代Web开发中，与服务器进行数据交互是不可避免的任务。为了实现这一目标，开发者可以使用多种技术。本文将介绍四种常用的网络请求方式，分别是XMLHttpRequest方法、jQuery方法、 Fetch方法以及axios方法。我们将深入了解每一种方法的使用。

XMLHttpRequest

基本概念

XMLHttpRequest是一个在 JavaScript 中用于进行 HTTP 请求的 API。它允许在不重新加载整个页面的情况下，通过 JavaScript 向服务器发送请求并获取数据，从而实现异步通信。

XMLHttpRequest创建和基本使用

首先，我们通过以下方式创建一个 XMLHttpRequest 对象：

let xhr = new XMLHttpRequest(); // 创建内置的浏览器对象

接着，我们可以使用open方法设置请求的类型、URL，以及是否采用异步方式。例如：

 xhr.open('GET', 'http://192.168.30.42:3000/top/song?type=7', true); // 配置        

这里，“GET”表示请求的类型，第二个参数是请求的URL，最后一个参数表示是否采用异步方式，设为true表示使用异步，这是 XMLHttpRequest 最常用的方式。

xhr.onreadystatechange = () => {  // 监听响应 
                if(xhr.readyState === 4 && xhr.status === 200) { 
                //readState 4 代表请求完成， status 200 代表请求成功
                    let result = JSON.parse(xhr.responseText);
                    console.log(result);
                }
            }

然后，我们可以使用 onreadystatechange 事件处理函数来监听请求状态的变化。当请求状态发生变化时，这个事件会被触发，我们可以通过检查readyState和status属性来判断请求的当前状态。通常，当readyState变为 4，而status变为 200 时，表示请求成功。

最后，我们使用send方法发送请求。对于 GET 请求，不需要在 send 中传递任何数据。对于 POST 请求，需要在 send 中传递请求的数据。

xhr.send(); // 发送请求xhr.send(); 

完整的GET请求案例:

let xhr = new XMLHttpRequest(); // 创建内置的浏览器对象
    xhr.open('GET', 'http://192.168.30.42:3000/top/song?type=7', true); // 配置
    xhr.onreadystatechange = () => {  // 监听响应 
        if(xhr.readyState === 4 && xhr.status === 200) { //readState 4 代表请求完成， status 200 代表请求成功
             let result = JSON.parse(xhr.responseText);
                 console.log(result);
         }
}
xhr.send(); // 发送请求

jQuery

基本概念

jQuery是一个流行的 JavaScript 库，提供了简化 DOM 操作和事件处理等任务的方法，同时也包含了方便的网络请求工具。最常用的是 $.ajax()，同时也有$.get() 和 $.post() 等简化的方法。

jQuery创建和基本使用

完整的GET请求案例：

$.ajax({
    url: 'http://192.168.30.42:3000/top/song?type=7',
    method: 'GET',
    dataType: 'json',
    success: function (res) {
        console.log(res);
    }
})

下面我们开始逐行解释代码内容：

首先我们得先导入jQuery中的js文件（注：此行代码是写在js文件开头）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

$.get()方法是用于执行 HTTP GET 请求的简化方法

$.ajax({

指定请求的URL

url: 'http://192.168.30.42:3000/top/song?type=7',

指定请求的HTTP方法为GET

method: 'GET'

jQuery 将尝试自动将服务器返回的数据解析为JSON对象

dataType: 'json'

请求成功时的回调函数，res参数包含了从服务器返回的数据

success: function (res) {
        console.log(res);
    }

Fetch

基本概念

Fetch是一种现代的 Web API，用于进行网络请求。它提供了一种更简单、更强大、更灵活的方式来替代传统的XMLHttpRequest对象。Fetch返回的是Promise对象，这使得异步操作更加清晰和易于处理。

Fetch创建和基本使用

完整的GET请求案例：

fetch('http://192.168.30.42:3000/top/song?type=7')
    .then(data => data.json())
    .then(res => {
        console.log(res);
        })
})

下面我们开始逐行解释代码内容：

使用fetch函数发送一个 GET 请求到指定的 URL

fetch('http://192.168.30.42:3000/top/song?type=7')

使用then处理返回的数据。在这里，使用json()方法解析响应的JSON数据。json() 方法返回一个Promise，该 Promise 解析为一个包含从响应中提取的 JSON 数据的 JavaScript 对象。

.then(data => data.json())

在成功解析JSON数据后，使用then处理解析后的数据。

.then(res => {
    console.log(res);
})

axios方法

基本概念

axios是一个基于Promise的现代化的 HTTP 客户端，用于浏览器和 Node.js。它是一个第三方库，提供了更方便的方式来处理 HTTP 请求。

axios创建和基本使用

完整的GET请求案例：

axios.get(''http://192.168.30.42:3000/top/song?type=7')
  .then(response => {
        console.log(response.data);
    })
  .catch(error => {
        console.error('Error:', error);
    });

下面我们开始逐行解释代码内容：

使用Axios的get方法发送一个 GET 请求到指定的 URL

axios.get('http://192.168.30.42:3000/top/song?type=7')

使用then处理返回的数据。response包含了整个 HTTP 响应，其中的data属性包含了服务器返回的数据。

.then(response => {
    console.log(response.data);
})

使用catch处理错误。error包含了关于请求失败的信息。

.catch(error => {
    console.error('Error:', error);
});

感谢您的阅读，点赞关注作者精彩继续