,,

一、基本介紹

JavaScript是一種能夠在Web頁面上實現動態行為的腳本語言，具有輕量級，可嵌入 HTML 頁面，可編程，面向對象，事件驅動等特點，可與瀏覽器進行交互，包括請求數據，提交表單以及更新/顯示內容。

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

二、XMLHttpRequest

XMLHttpRequest是一種原生JS對象，用于在后臺與服務器交換數據，包括發送請求和接收響應，是最基礎，最常見的網絡請求方式。

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

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

三、fetch

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

fetch的基本使用方式為使用fetch()函數向指定的URL發起網絡請求，然后使用Promise進行異步處理。

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

四、axios

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

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

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

五、jQuery Ajax

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

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

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

六、總結

本文對JavaScript發送網絡請求的幾種方式進行了介紹，包括XMLHttpRequest，fetch，axios和jQuery Ajax。

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

js發送請求用法介紹