AJAX的基本使用方法是什么

這篇“AJAX的基本使用方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“AJAX的基本使用方法是什么”文章吧。

一. ajax 是什么

• ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

• AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

• 傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。ajax 通過在后臺與服務器進行少量數據交換，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

二. 基本使用

function loadData() {
    let xhr;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    }

    xhr.open("GET","http://127.0.0.1:3001/users",true);
    xhr.send();
  }

3. 對上邊代碼進行講解

3.1 創建XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。創建 XMLHttpRequest 對象的語法：let xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：let xhr = new ActiveXObject("Microsoft.XMLHTTP");

所以為了應對所有的現代瀏覽器，包括 IE5 和 IE6，應該檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：

let xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

3.2 向服務器發送請求

xhr.open("GET","http://127.0.0.1:3001/users",true);
xhr.send();

（1）open(method,url,async) 方法規定請求的類型、URL 以及是否異步處理請求。

• method：請求的類型；GET 或 POST

• url：要訪問的服務器上的位置

• async：true（異步）或 false（同步）

（2）send(string) 將請求發送到服務器

• 參數string：僅用于 POST 請求

3.3 接收服務器的響應

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

• responseText：獲得字符串形式的響應數據

• responseXML：獲得 XML 形式的響應數據

3.4 onreadystatechange 事件

當請求被發送到服務器時，我們需要執行一些基于響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。

（1）onreadystatechange：每當 readyState 屬性改變時，就會調用該函數。

（2）readyState：存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

• 0: 請求未初始化

• 1: 服務器連接已建立

• 2: 請求已接收

• 3: 請求處理中

• 4: 請求已完成，且響應已就緒

（3）status

• 200: “OK”

• 404: 未找到頁面

（4）在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。當 readyState 等于 4 且狀態為 200 時，表示響應已就緒。

注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應著 readyState 的每個變化。

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}

4. 其它方式

//第一個參數是請求路徑，第二個參數是一個函數，當拿到數據后調用該函數
function get(url,callback) {
  let xhr = new XMLHttpRequest();
  //當請求加載成功之后要調用該函數
  xhr.onload = function() {
    callback(xhr.responseText);
  }
  xhr.open('get',url)
  xhr.send();
}

get('http://localhost:3001/users',function (data) {
  console.log(data);
});

4.1 擴展

我們可以把上邊那段代碼改寫成支持Promise的形式，這樣就可以進行鏈式調用

function get(url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
      //使用JSON.parse()將拿到的數據轉成JS對象
      resolve(JSON.parse(xhr.responseText));
    }
    xhr.open('get', url)
    xhr.send();
  })
}

鏈式調用：

let data = {};
get('http://localhost:3001/users')
 .then(function (userData) {
   data.user = userData;
   return get('http://localhost:3001/jobs')
 })
 .then(function (jobsData) {
   data.jobs = jobsData;
   console.log(data);
})

以上就是關于“AJAX的基本使用方法是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。