什麼是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
AJAX 工作原理
AJAX - 創建 XMLHttpRequest 對象
XMLHttpRequest 是 AJAX 的基礎。
創建 XMLHttpRequest 對象
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
variable=newActiveXObject("Microsoft.XMLHTTP");
爲了適應目前主流的瀏覽器，所以寫了一個比較全面的方法，瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：
var httpTemp;
//判斷是否支持XMLHttpRequest對象
if(window.XMLHttpRequest){ //這裏省略了 “== true” 這是if判斷的簡短寫法
// IE7+, Firefox,Chrome, Opera, Safari 瀏覽器執行代碼
httpTemp = new XMLHttpRequest();
}else{
//IE6, IE5 瀏覽器執行代碼
httpTemp = new ActiveXObject('Microsoft.XMLHTTP');
}
AJAX - 向服務器發送請求請求
XMLHttpRequest對象用於和服務器交換數據。
向服務器發送請求
如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
httpTemp.open("GET","ajax_info.txt",true);
httpTemp.send();
open(method,url,async):
- method：請求的類型；GET 或 POST
- url：文件在服務器上的位置
- async：true（異步）或 false（同步）
send(string):
string：僅用於 POST 請求
GET 請求
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
POST 請求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)：
- header: 規定頭的名稱
- value: 規定頭的值
關於更多的setRequestHeader參數可以訪問：https://blog.csdn.net/qq_34322905/article/details/79668779
url - 服務器上的文件
open() 方法的 url 參數是服務器上文件的地址：
xmlhttp.open("GET","ajax_test.html",true);
該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務器腳本文件，比如 .asp 和 .php （在傳回響應之前，能夠在服務器上執行任務）。
異步 - True 或 False？
AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：
xmlhttp.open("GET","ajax_test.html",true);
對於 web 開發人員來說，發送異步請求是一個巨大的進步。很多在服務器執行的任務都相當費時。AJAX出現之前，這可能會引起應用程序掛起或停止。
通過 AJAX，JavaScript 無需等待服務器的響應，而是：
- 在等待服務器響應時執行其他腳本
- 當響應就緒後對響應進行處理
AJAX - 服務器 響應
如需獲得來自服務器的響應，請使用XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
responseText | ：獲得字符串形式的響應數據。 |
responseXML | ：獲得 XML 形式的響應數據。 |
AJAX - onreadystatechange 事件
onreadystatechange 事件
當請求被髮送到服務器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
下面是 XMLHttpRequest 對象的三個重要的屬性：
onreadystatechange：
存儲函數（或函數名），每當readyState 屬性改變時，就會調用該函數。
readyState：
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
status： 200:"OK"
404: 未找到頁面
httpTemp.onreadystatechange=function() {
if (xmlhttp.readyState==4&& xmlhttp.status==200) {
httpDoc = xmlhttp.responseText;
}
}
整體一個請求的代碼：
var httpTemp;
var httpDoc;
if(window.XMLHttpRequest){
httpTemp= new XMLHttpRequest();
}else{
httpTemp = new ActiveXObject('Microsoft.XMLHTTP');
}
httpTemp.open('GET','http://192.168.1.88:8005/modules/interface_goods/?c=recommend_goods',true);
httpTemp.send('');
httpTemp.onreadystatechange = function(){
if(httpTemp.readyState== 4 && httpTemp.status == 200){
httpDoc= httpTemp.responseXML|| httpTemp.responseText;
console.log(httpDoc);
}
}
這裏是一些請求的狀態碼：
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息爲空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是爲了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本