一. Ajax 是什么？
- 全稱Asynchronous JavaScript and XML；
- 異步的 JavaScript 和 XML；
- 可以在不重新加載整個頁面的情況下，與服務器交換數據並更新部分網頁內容；
- 能夠實現局部刷新，大大降低了資源的浪費；
- 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行；
- 是一門用於創建快速動態網頁的技術；
- 傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁；
二. Ajax工作原理
簡單來說就是 通過XmlHttpRequest對象向服務器發異步請求，從服務器獲得數據，然后用 javascript 來操作DOM更新頁面的技術。
三. Ajax的使用
Ajax的使用分為四部分：
1.） 創建一個XMLHttpRequest對象；
1. 兼容IE低版本瀏覽器（ie5-ie6）；
2. 使用if，else或者try，catch；
2.） 配置請求信息；
1. 請求的方式；
2. 請求文件的路徑；
3. 是否異步，默認為true；
3.）發送請求；
1. get與post的區別；
2. get與post的使用場景；
4.） 監聽狀態變化，執行相應回調函數；
1. http狀態碼都有哪些？
2. 不同狀態碼代表的含義？
3.1 創建XMLHttpRequest對象
目前所有的現代瀏覽器（包括IE7+、Firefox、Chrome、Safari 以及 Opera）均內建有 XMLHttpRequest 對象，寫法如下：
var xhr = new XMLHttpRequest();
低版本的 IE 瀏覽器 （主要指 IE5 和 IE6）沒有XMLHttpRequest 對象，使用 ActiveXObject 對象，寫法如下：
var xhr =new ActiveXObject("Microsoft.XMLHTTP");
舉個兼容性寫法的例子：
為了兼容所有的現代瀏覽器，包括 IE5 和 IE6，需要判斷瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：
var xhr; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼 xhr = new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行代碼 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } 3.2 向服務器發送請求
使用 XMLHttpRequest 對象的 open() 和 send() 方法：
| 方法 | 參數配置 |
|---|---|
| open(method, url, async) | method：請求的類型, GET 或 POST;url：文件在服務器上的位置;async：布爾值，判斷是否異步，true為異步（默認）或 false為同步; |
| send(string) | string：參數，get不傳參，僅用於 POST 請求 |
注意：
- 不推薦使用 async=false，但是對於一些小型的請求，也是可以的。
- 請記住，JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢，應用程序會掛起或停止。
- 當你使用 async=false 時，后面不要寫 onreadystatechange 函數 - 直接把代碼放到 send() 語句后面即可：
xhr.open("GET","/try/ajax/ajax_demo.txt",false); xhr.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
舉個栗子：
// 使用get方法請求服務器上的1.txt文件 xhr.open("GET","1.txt",true); xhr.send(); 3.2.2 GET與POST的區別
- 與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用；
- GET存在緩存問題，使用GET方法一定要記得清除緩存，不然請求的數據不是最新的；
- GET不安全，明文傳輸，POST更安全；
- GET適用於小文件，POST沒有數量限制；
- GET使用send方法時不傳參，POST必須傳參；
3.2.3 只能使用 POST 請求的情況：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
3.2.4 怎么使用POST發送數據？
它其實就類似於 HTML 表單那樣 POST 數據，我們需要使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中寫要發送的數據：
向請求添加 HTTP 頭方法如下：
xhr.setRequestHeader(header,value); // header: 規定頭的名稱; // value: 規定頭的值; xhr.open("POST","/try/ajax/demo_post2.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("fname=Zhou&lname=minghang"); 3.4 監聽事件變化
- 如果是同步請求的話，不需要寫監聽事件變化函數；
- 一般默認都是異步請求，才寫監聽函數；
異步請求時的監聽事件變化函數如下：
xhr.onreadystatechange=function() { if (xhr.readyState==4 && xhr.status==200){ document.getElementById("myDiv").innerHTML = xhr.responseText; }else{ console.log('失敗了'); } } 3.4.2 onreadystatechange 事件
- 當請求被發送到服務器時，我們需要執行一些基於響應的任務。
- 每當 readyState 改變時，就會觸發 onreadystatechange 事件。
- readyState 屬性存有 XMLHttpRequest 的狀態信息。
3.4.2.1 onreadystatechange屬性的作用？
存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
3.4.2.2 readyState屬性的作用？都有哪些狀態？
- 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
一般常見的狀態碼有：
- 200："OK, 成功"
- 404: "頁面找不到"
狀態碼具體含義：
- 200：服務器響應正常。
- 304：該資源在上次請求之后沒有任何修改（這通常用於瀏覽器的緩存機制，使用GET請求時尤其需要注意）。
- 400：無法找到請求的資源。
- 401：訪問資源的權限不夠。
- 403：沒有權限訪問資源。
- 404：需要訪問的資源不存在。
- 405：需要訪問的資源被禁止。
- 407：訪問的資源需要代理身份驗證。
- 414：請求的URL太長。
- 500：服務器內部錯誤。
四. 怎么處理服務器反饋的數據？
如果我們想獲得服務器上的數據，並進行相應的操作，這就要用到XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
- responseText屬性：
獲得字符串形式的響應數據;- 如果來自服務器的響應並非 XML，請使用 responseText 屬性；
- responseText 屬性返回字符串 形式的響應；
document.getElementById("myDiv").innerHTML=xhr.responseText; - responseXML屬性：
- 獲得 XML 形式的響應數據。
- 如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性：
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
document.getElementById("myDiv").innerHTML=txt;
原文鏈接：https://www.jianshu.com/p/2be2e4f1fc8e