http 請求-01-AJAX（Asynchronous JavaScript and XML）入門介紹, ajax 的優缺點

老马啸西风發表於2024-08-18
HTTPJavaScriptXML

http 請求系列

http request-01-XMLHttpRequest XHR 簡單介紹

http request-01-XMLHttpRequest XHR 標準

http 請求-01-AJAX（Asynchronous JavaScript and XML）入門介紹

Ajax XHR 的替代方案-fetch

Ajax XHR 的替代方案-fetch 標準

Ajax 的替代方案-axios.js

http 請求-04-promise 物件 + async/await

什麼是Ajax

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

Ajax的全稱是Asynchronous JavaScript and XML，即非同步JavaScript+XML。

它並不是新的程式語言，而是幾種原有技術的結合體。

它由以下幾種技術組合而成，包括：

  • HTML/XHTML——主要的內容表示語言。

  • CSS——為XHTML提供文字格式定義。

  • DOM——對已載入的頁面進行動態更新。

  • XML——資料交換格式。

  • XSLT——將XML轉換為XHTML（用CSS修飾樣式）。

  • XMLHttp——用XMLHttpRequest來和伺服器進行非同步通訊，是主要的通訊代理。

  • JavaScript——用來編寫Ajax引擎的指令碼語言。

實際上，在Ajax解決方案中這些技術都是可選的，不過只有三種是必須的：HTML/XHTML、DOM以及JavaScript。

使用方式

1. 建立Ajax核心物件XMLHttpRequest(記得考慮相容性)

var xhr=null;  
if (window.XMLHttpRequest)  
{// 相容 IE7+, Firefox, Chrome, Opera, Safari  
xhr=new XMLHttpRequest();  
} else{// 相容 IE6, IE5 
  xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}

2.向伺服器傳送請求

xhr.open(method,url,async);  
send(string);//post請求時才使用字串引數，否則不用帶引數。

method：請求的型別；GET 或 POST

url：檔案在伺服器上的位置

async：true（非同步）或 false（同步）

  • 注意：post請求一定要設定請求頭的格式內容
xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //post請求引數放在send裡面，即請求體

3.伺服器響應處理（區分同步跟非同步兩種情況）

responseText 獲得字串形式的響應資料。

responseXML 獲得XML 形式的響應資料。

3.1 同步處理

xhr.open("GET","info.txt",false);  
xhr.send();  
document.getElementById("myDiv").innerHTML=xhr.responseText; //獲取資料直接顯示在頁面上

3.2 非同步處理

相對來說比較複雜，要在請求狀態改變事件中處理。

xhr.onreadystatechange=function()  { 
if (xhr.readyState==4 &&xhr.status==200)  { 
   document.getElementById("myDiv").innerHTML=xhr.responseText;  
  }
}

ajax的優點

Ajax的給我們帶來的好處大家基本上都深有體會，在這裡我只簡單的講幾點：

無重新整理更新資料。

AJAX最大優點就是能在不重新整理整個頁面的前提下與伺服器通訊維護資料。這使得Web應用程式更為迅捷地響應使用者互動，並避免了在網路上傳送那些沒有改變的資訊，減少使用者等待時間，帶來非常好的使用者體驗。

非同步與伺服器通訊。

AJAX使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。最佳化了Browser和Server之間的溝通，減少不必要的資料傳輸、時間及降低網路上資料流量。

前端和後端負載平衡。

AJAX可以把以前一些伺服器負擔的工作轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，AJAX的原則是“按需取資料”，可以最大程度的減少冗餘請求和響應對伺服器造成的負擔，提升站點效能。

基於標準被廣泛支援。

AJAX基於標準化的並被廣泛支援的技術，不需要下載瀏覽器外掛或者小程式，但需要客戶允許JavaScript在瀏覽器上執行。隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世。同樣，也出現了另一種輔助程式設計的技術，為那些不支援JavaScript的使用者提供替代功能。

介面與應用分離。

Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的釋出系統。

AJAX的缺點

AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。

在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，因為瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；使用者通常會希望單擊後退按鈕能夠取消他們的前一次操作，但是在Ajax應用程式中，這將無法實現。

AJAX的安全問題。

AJAX技術給使用者帶來很好的使用者體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業資料建立了一個直接通道。

這使得開發者在不經意間會暴露比以前更多的資料和伺服器邏輯。

Ajax的邏輯可以對客戶端的安全掃描技術隱藏起來，允許駭客從遠端伺服器上建立新的攻擊。

還有Ajax也難以避免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL隱碼攻擊和基於Credentials的安全漏洞等等。

對搜尋引擎支援較弱。

對搜尋引擎的支援比較弱。如果使用不當，AJAX會增大網路資料的流量，從而降低整個系統的效能。

破壞程式的異常處理機制。

至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程式的異常機制的。

關於這個問題，曾在開發過程中遇到過，但是查了一下網上幾乎沒有相關的介紹。

後來做了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條資料……給我們的除錯帶來了很大的困難。

違背URL和資源定位的初衷。

例如，我給你一個URL地址，如果採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。

AJAX不能很好支援移動裝置。

一些手持裝置（如手機、PDA等）現在還不能很好的支援Ajax，比如說我們在手機的瀏覽器上開啟採用Ajax技術的網站時，它目前是不支援的。

客戶端過肥，太多客戶端程式碼造成開發上的成本。

編寫複雜、容易出錯 ；冗餘程式碼比較多（層層包含js檔案是AJAX的通病，再加上以往的很多服務端程式碼現在放到了客戶端）；破壞了Web的原有標準。

相關文章