一、基本介紹

JavaScript是一種能夠在Web頁面上實現(xiàn)動態(tài)行為的腳本語言，具有輕量級，可嵌入 HTML 頁面，可編程，面向?qū)ο?，事件?qū)動等特點，可與瀏覽器進行交互，包括請求數(shù)據(jù)，提交表單以及更新/顯示內(nèi)容。

在JavaScript中，我們可以通過多種方式向后端服務(wù)器發(fā)送請求，這篇文章將對幾種常用的請求方式進行闡述。

二、XMLHttpRequest

XMLHttpRequest是一種原生JS對象，用于在后臺與服務(wù)器交換數(shù)據(jù)，包括發(fā)送請求和接收響應(yīng)，是最基礎(chǔ)，最常見的網(wǎng)絡(luò)請求方式。

XMLHttpRequest請求可以同步和異步兩種方式進行，一般情況下都使用異步方式。異步方式的實現(xiàn)主要是通過回調(diào)函數(shù)和onreadystatechange屬性，當readyState的屬性值變化時觸發(fā)回調(diào)函數(shù)。

// 創(chuàng)建一個HTTP請求對象
let xhr = new XMLHttpRequest();
// 創(chuàng)建一個異步的請求
xhr.open('GET', 'test.json', true);
// 設(shè)置監(jiān)聽函數(shù)
xhr.onreadystatechange = function () {
  // 當readyState的屬性值變化時觸發(fā)回調(diào)函數(shù)
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 處理返回的數(shù)據(jù)
    console.log(xhr.responseText);
  }
};
// 發(fā)送請求
xhr.send(null);

三、fetch

fetch API是一種基于JavaScript Promise 的現(xiàn)代API，在XMLHttpRequest的基礎(chǔ)上進行了一定的優(yōu)化，提供了更好的、更簡單、更靈活的網(wǎng)絡(luò)請求方式，但是需要注意的是fetch在不同瀏覽器中，其支持情況和表現(xiàn)可能有所不同。

fetch的基本使用方式為使用fetch()函數(shù)向指定的URL發(fā)起網(wǎng)絡(luò)請求，然后使用Promise進行異步處理。

fetch('test.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

四、axios

Axios是一個基于Promise的HTTP客戶端，用于在瀏覽器和 Node.js 中發(fā)送異步的HTTP請求。它由于使用方便、功能強大，在現(xiàn)代Web開發(fā)中被廣泛應(yīng)用。

與fetch類似，Axios發(fā)送請求時，返回值也是Promise對象，方便進行then和catch處理。

// 發(fā)送一個 GET 請求
axios.get('test.json')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

五、jQuery Ajax

jQuery是一個被廣泛應(yīng)用于Web開發(fā)中的JavaScript庫，其提供的Ajax請求功能也是非常常用的，使用方便簡單。

jQuery.ajax()方法可以通過多個參數(shù)進行網(wǎng)絡(luò)請求，包括URL，type，data，dataType等，其中，type參數(shù)是指請求方式，dataType參數(shù)表示預期返回的數(shù)據(jù)類型。

$.ajax({
  url: 'test.json',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

六、總結(jié)

本文對JavaScript發(fā)送網(wǎng)絡(luò)請求的幾種方式進行了介紹，包括XMLHttpRequest，fetch，axios和jQuery Ajax。

每種方式都有其優(yōu)缺點以及適用場景，根據(jù)具體的項目需求進行選擇能夠帶來較好的使用體驗。