ajax優缺點及用法
阿新 • • 發佈：2022-04-14
Ajax
是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術，幾種原有技術的結合體
優點
- 通過非同步的模式，提升使用者體驗
- 減少不必要的資料往返，優化瀏覽器和伺服器之間的傳輸，也減少了頻寬佔用
- Ajax引擎在客戶端執行，承擔了一部分本來由伺服器承擔的工作，從而減少了大使用者量下的伺服器負載
缺點
- 不支援瀏覽器的回退按鈕
- 暴露了與伺服器互動的細節從而引起安全問題
- 對搜尋引擎的支援較弱
原生ajax
- 建立一個XMLHttpRequer非同步呼叫物件，是整個ajax的核心
- 建立一個新的HTTP請求，並指定該HTTP請求的方法
- 設定響應HTTP請求狀態變化的函式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript"> //獲取xhr物件，相容各個版本 function crateXHR() { if (typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest(); }else if (typeof ActiveXObject != 'undefined'){ var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'] var xhr; for (var i = 0; i < xhrArr.length; ++i){ try{ xhr= new ActiveXObject(xhrArr[i]); break; }catch (e){ } } return xhr; }else { throw new Error('請升級瀏覽器版本！'); } } //建立XMLHttpRequest物件 var xhr = crateXHR(); //響應XMLHttpRequest物件狀態變化的函式，onreadystatechange在readyestatechange屬性發生變化時觸發 xhr.onreadystatechange = function () { //非同步呼叫成功 if (xhr.readyState === 4){//非同步呼叫成功，響應內容解析完成 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ //獲取伺服器返回的資料 var demo = document.getElementById('demo'); demo.innerText = xhr.responseText; } } } //建立請求 xhr.open('get','./json/demo.json',true); //傳送請求 xhr.send(null); //xhr.send({id:8,uuid:"afdeafd58fadf"});//xhr.open是post的話，引數需要放在send中，並在請求頭加上header請求頭 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); </script> <body> <div id="demo"></div> </body> </html>
jQuery封裝後的ajax方法
//jQuery的ajax方法 $.ajax({ url:"./json/demo.json", //請求地址 type:"get", //請求方式 async:true, //同步非同步 dataType:"json", //資料返回格式 success:function (data) { //請求成功的回撥 //獲取伺服器返回的資料 $('#demo').text(data) } });