Ajax（Asynchronous JavaScript ）and xml

JavaScript的兩種任務執行模式--同步（synchronous）和異步（Asynchronous）

同步模式

JavaScript的執行環境是單線程的，意味着一次只能執行一個任務，若是有多個任務，就必須排隊。所以只要有一個任務耗時很長，後面的任務都必須排隊等待執行，這樣會拖累整個程序的執行。這就是所謂的同步模式。

異步模式

每一個任務有一個或者多個回調函數（callback），前一個任務結束後不是執行後一個任務，而是執行回調函數；後一個任務不等前一個任務執行結束就執行，程序的執行順序和任務的順序排序是不一致的、異步的。
優勢：
在不須要加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。

Ajax的工做原理

一、什麼是Ajax

Ajax是異步JavaScript和XML，是一種用於異步顯示數據的技術，能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新

二、實現Ajax的步驟

(1) 建立XMLHttpRequest對象,也就是建立一個異步調用對象

(2) 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
(3)設置響應HTTP請求狀態變化的函數
(4)發送HTTP請求
(5)獲取異步調用返回的數據
(6)使用JavaScript和DOM實現局部刷新

2.一、XHR建立對象

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
建立 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

2.二、XHR請求

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。 - method：請求的類型；GET 或 POST url：文件在服務器上的位置(絕對位置或者相對位置） async：true（異步）或 false（同步）
send(string)	將請求發送到服務器。 string：僅用於 POST 請求

示例：

var xmlHttp = new XMLHttpRequest();
   xmlHttp.open('get','demo_get.html','true');//調用open()方法並採用異步方式
   xmlHttp.send(); //使用open()方法將請求發送出去
   xmlHttp.onreadystatechange()=>{
        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){

        }
}

onreadystatechange事件可指定一個事件處理函數來處理XMLHttpRequest對象的執行結果。

GET 仍是 POST？
與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

• 沒法使用緩存文件（更新服務器上的文件或數據庫）
• 向服務器發送大量數據（POST 沒有數據量限制）
• 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

一個簡單 POST 請求：

xmlhttp.open("POST","demo_post.html",true); 
xmlhttp.send();

若是須要像 HTML 表單那樣 POST 數據，請使用setRequestHeader() 來添加 HTTP 頭。而後在send()方法中規定您但願發送的數據：

xmlhttp.open("POST","ajax_test.html",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");


setRequestHeader(header,value)  向請求添加 HTTP頭    ▪ header: 規定頭的名稱;     ▪ value: 規定頭的值

提示：POST請求的特色以下： 
· POST 請求不會被緩存 
· POST 請求不會保留在瀏覽器歷史記錄中 
· POST 請求不能被收藏爲書籤 
· POST 請求對數據長度沒有要求

爲何使用 Async=true ？

  咱們的實例在 open() 的第三個參數中使用了 「true」。該參數規定請求是否異步處理。True 表示腳本會在 send() 方法以後繼續執行，而不等待來自服務器的響應。
  onreadystatechange事件使代碼複雜化了。可是這是在沒有獲得服務器響應的狀況下，防止代碼中止的最安全的方法。
  經過把該參數設置爲 「false」，能夠省去額外的 onreadystatechange 代碼。若是在請求失敗時是否執行其他的代碼可有可無，那麼可使用這個參數。

2.三、XHR 響應

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	得到字符串形式的響應數據。
responseXML	得到 XML 形式的響應數據。

同步處理

xmlHttp.open("GET","demo_get.html",false);
xmlHttp.send();
document.getElementById("target").innerHTML=xmlHttp.responseText;

直接在send()後面處理返回來的數據。

異步處理
異步處理相對比較麻煩，要在請求狀態改變事件中處理。

xmlHttp.onreadystatechange=function(){//接收到服務端響應時觸發
if(xmlHttp.readyState==4&&xmlHttp.status==200){
document.getElementById("target").innerHTML=xmlHttp.responseText;
      }

}

2.四、XHR readyState

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：
xmlhttp.status：響應狀態碼。這個也是面試比較愛問的，這個必須知道4個以上(把上面兩個狀態碼也列到下邊了)，比較常見的有：

· 200: 「OK」 
· 304：該資源在上次請求以後沒有任何修改（這一般用於瀏覽器的緩存機制，使用GET請求時尤爲須要注意）。 
· 403 （禁止） 服務器拒絕請求。 
· 404 （未找到） 服務器找不到請求的網頁。 
· 408 （請求超時） 服務器等候請求時發生超時。 
·500 （服務器內部錯誤） 服務器遇到錯誤，沒法完成請求。

異步模式的四種方法

一、回調函數

二、事件監聽

採用事件驅動模式，一個任務執行與否，取決於某個事件是否發生。

三、發佈訂閱

假定存在一個信號中心，某個任務完成後像信號中心發佈一個信號，其餘任務能夠向信號中心訂閱這個信號，從而知道本身何時能夠開始執行。

四、Promises對象

給個異步任務返回一個Promises對象，該對象的then方法，容許指定回調函數。