一、基本介紹

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

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

二、XMLHttpRequest

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

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

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

三、fetch

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

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

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

四、axios

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

與fetch類似，Axios發(fā)送請(qǐng)求時(shí)，返回值也是Promise對(duì)象，方便進(jìn)行then和catch處理。

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

五、jQuery Ajax

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

jQuery.ajax()方法可以通過(guò)多個(gè)參數(shù)進(jìn)行網(wǎng)絡(luò)請(qǐng)求，包括URL，type，data，dataType等，其中，type參數(shù)是指請(qǐng)求方式，dataType參數(shù)表示預(yù)期返回的數(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é)

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

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