Ajax原理

1、什麼是Ajax
Ajax（Asynchronous JavaScript and XML的縮寫）是一種異步請求數據的web開發技術，對於改善用戶的體驗和頁面性能頗有幫助。簡單地說，在不須要從新刷新頁面的狀況下，Ajax 經過異步請求加載後臺數據，並在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。
Ajax目的：提升用戶體驗，較少網絡數據的傳輸量
2、Ajax原理是什麼
在解釋Ajax原理以前，咱們不妨先舉個「領導想找小李彙報一下工做」例子，領導想找小李問點事，就委託祕書去叫小李，本身就接着作其餘事情，直到祕書告訴他小李已經到了，最後小李跟領導彙報工做。

Ajax請求數據流程與「領導想找小李彙報一下工做」相似。其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，它扮演的角色至關於祕書，使得瀏覽器能夠發出HTTP請求與接收HTTP響應。瀏覽器接着作其餘事情，等收到XHR返回來的數據再渲染頁面。理解了Ajax的工做原理後，接下來咱們探討下如何使用Ajax。
3、Ajax的使用
1.建立Ajax核心對象XMLHttpRequest(記得考慮兼容性)
[Java] 純文本查看 複製代碼
?

1. var xhr=null;

   1. if (window.XMLHttpRequest)
   2. {// 兼容 IE7+, Firefox, Chrome, Opera, Safari
   3. xhr=new XMLHttpRequest();
   4. } else{// 兼容 IE6, IE5
   5. xhr=new ActiveXObject("Microsoft.XMLHTTP");
   6. }

2.向服務器發送請求
[HTML] 純文本查看 複製代碼
?

1. xhr.open(method,url,async);
2. send(string);//post請求時才使用字符串參數，不然不用帶參數。

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
注意：post請求必定要設置請求頭的格式內容
[HTML] 純文本查看 複製代碼
?

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 形式的響應數據。
①同步處理
[HTML] 純文本查看 複製代碼
?

1. xhr.open("GET","info.txt",false);

   1. xhr.send();
   2. document.getElementById("myDiv").innerHTML=xhr.responseText; //獲取數據直接顯示在頁面上

②異步處理
相對來講比較複雜，要在請求狀態改變事件中處理。
[HTML] 純文本查看 複製代碼
?

1. xhr.onreadystatechange=function() {

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

readyState
0-（未初始化）尚未調用send()方法
1-（載入）已調用send()方法，正在發送請求
2-（載入完成）send()方法執行完成，已經接收到所有響應內容
3-（交互）正在解析響應內容
4-（完成）響應內容解析完成，能夠在客戶端調用了
status

③GET和POST請求數據區別
請求數據時的區別，詳情見下面兩張圖：

總而言之：
GET請求的差數直接拼接在url上面
POST請求的參數就不是放在url了，而是放在send裏面，即請求體4、結束語
其實經過 XMLHttpRequest或者封裝後的框架進行網絡請求,這種方式已經有點老舊了，配置和調用方式很是混亂，近幾年剛剛出來的Fetch提供了一個更好的替代方法，它不只提供了一種簡單，合乎邏輯的方式來跨網絡異步獲取資源，並且能夠很容易地被其餘技術使用。
連接：https://www.imooc.com/article...