前言
AJAX即“Asynchronous Javascript And XML”，是指一種建立互動式網頁應用的網頁開發技術。AJAX 是一種用於建立快速動態網頁的技術。它可以令開發者只向伺服器獲取資料（而不是圖片，HTML文件等資源），網際網路資源的傳輸變得前所未有的輕量級和純粹，這激發了廣大開發者的創造力，使各式各樣功能強大的網路站點，和網際網路應用如雨後春筍一般冒出，不斷帶給人驚喜。
本文首發地址為GitHub部落格,寫文章不易，請多多支援與關注！
一、什麼是Ajax
Ajax是一種非同步請求資料的web開發技術，對於改善使用者的體驗和頁面效能很有幫助。簡單地說，在不需要重新重新整理頁面的情況下，Ajax 通過非同步請求載入後臺資料，並在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜尋下拉框提示和快遞單號查詢等等。**Ajax的目的是提高使用者體驗，較少網路資料的傳輸量。**同時，由於AJAX請求獲取的是資料而不是HTML文件，因此它也節省了網路頻寬，讓網際網路使用者的網路衝浪體驗變得更加順暢。
二、Ajax原理是什麼
在解釋Ajax原理之前，我們不妨先舉個“領導想找小李彙報一下工作”例子，領導想找小李問點事，就委託祕書去叫小李，自己就接著做其他事情，直到祕書告訴他小李已經到了，最後小李跟領導彙報工作。
Ajax請求資料流程與“領導想找小李彙報一下工作”類似。其中最核心的依賴是瀏覽器提供的XMLHttpRequest物件，它扮演的角色相當於祕書，使得瀏覽器可以發出HTTP請求與接收HTTP響應。瀏覽器接著做其他事情，等收到XHR返回來的資料再渲染頁面。
理解了Ajax的工作原理後，接下來我們探討下如何使用Ajax。
三、Ajax的使用
1.建立Ajax核心物件XMLHttpRequest(記得考慮相容性)
1. var xhr=null;
2. if (window.XMLHttpRequest)
3. {// 相容 IE7+, Firefox, Chrome, Opera, Safari
4. xhr=new XMLHttpRequest();
5. } else{// 相容 IE6, IE5
6. xhr=new ActiveXObject("Microsoft.XMLHTTP");
7. }
複製程式碼2.向伺服器傳送請求
1. xhr.open(method,url,async);
2. 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 形式的響應資料。
①同步處理
1. xhr.open("GET","info.txt",false);
2. xhr.send();
3. document.getElementById("myDiv").innerHTML=xhr.responseText; //獲取資料直接顯示在頁面上
複製程式碼②非同步處理
相對來說比較複雜，要在請求狀態改變事件中處理。
1. xhr.onreadystatechange=function() {
2. if (xhr.readyState==4 &&xhr.status==200) {
3. document.getElementById("myDiv").innerHTML=xhr.responseText;
4. }
5. }
複製程式碼什麼是readyState？
readyState是XMLHttpRequest物件的一個屬性，用來標識當前XMLHttpRequest物件處於什麼狀態。 readyState總共有5個狀態值，分別為0~4，每個值代表了不同的含義
- 0：未初始化 -- 尚未呼叫.open()方法；
- 1：啟動 -- 已經呼叫.open()方法，但尚未呼叫.send()方法；
- 2：傳送 -- 已經呼叫.send()方法，但尚未接收到響應；
- 3：接收 -- 已經接收到部分響應資料；
- 4：完成 -- 已經接收到全部響應資料，而且已經可以在客戶端使用了；
什麼是status？
HTTP狀態碼(status)由三個十進位制數字組成，第一個十進位制數字定義了狀態碼的型別，後兩個數字沒有分類的作用。HTTP狀態碼共分為5種型別：
常見的狀態碼
僅記錄在 RFC2616 上的 HTTP 狀態碼就達 40 種，若再加上 WebDAV（RFC4918、5842）和附加 HTTP 狀態碼 （RFC6585）等擴充套件，數量就達 60 餘種。接下來，我們就介紹一下這些具有代表性的一些狀態碼。
- 200 表示從客戶端發來的請求在伺服器端被正常處理了。
- 204 表示請求處理成功，但沒有資源返回。
- 301 表示永久性重定向。該狀態碼錶示請求的資源已被分配了新的URI，以後應使用資源現在所指的URI。
- 302 表示臨時性重定向。
- 304 表示客戶端傳送附帶條件的請求時（指採用GET方法的請求報文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一個首部）伺服器端允許請求訪問資源，但因發生請求未滿足條件的情況後，直接返回304Modified（伺服器端資源未改變，可直接使用客戶端未過期的快取）
- 400 表示請求報文中存在語法錯誤。當錯誤發生時，需修改請求的內容後再次傳送請求。
- 401 表示未授權（Unauthorized)，當前請求需要使用者驗證
- 403 表示對請求資源的訪問被伺服器拒絕了
- 404 表示伺服器上無法找到請求的資源。除此之外，也可以在伺服器端拒絕請求且不想說明理由時使用。
- 500 表示伺服器端在執行請求時發生了錯誤。也有可能是Web應用存在的bug或某些臨時的故障。
- 503 表示伺服器暫時處於超負載或正在進行停機維護，現在無法處理請求。
③GET和POST請求資料區別
- 使用Get請求時,引數在URL中顯示,而使用Post方式,則放在send裡面
- 使用Get請求傳送資料量小,Post請求傳送資料量大
- 使用Get請求安全性低，會被快取，而Post請求反之 關於第一點區別，詳情見下面兩張圖：
四、結束語
其實通過 XMLHttpRequest或者封裝後的框架進行網路請求,這種方式已經有點老舊了，配置和呼叫方式非常混亂，近幾年剛剛出來的Fetch提供了一個更好的替代方法，它不僅提供了一種簡單，合乎邏輯的方式來跨網路非同步獲取資源，而且可以很容易地被其他技術使用。
想了解如何利用Fetch請求資料，請猛戳 fetch 如何請求常見資料格式
想了解Ajax如何請求後臺資料，請猛戳 Ajax請求後臺資料