JS—ajax及async和defer的區別

###1.ajax  「Asynchronous Javascript And XML」（異步 JavaScript 和 XML）

　　使用：

　　　　如不考慮舊版本瀏覽器兼容性，

　　　　　　// 第一步建立xhr對象

　　　　　　var  xhr = new XMLHttpRequest();

　　　　　　// 第二步，定義狀態變化監聽函數

　　　　　　xhr.onreadystatechange  = function(){

　　　　　　　　//   第五步   經過xhr對象的readyState屬性，判斷響應過程的當前活動階段是否所有完成

　　　　　　　　if(xhr.readyState == 4){      //   屬性值爲0-4   0：未初始化，還沒有調用open方法    1：啓動，調用open但未調用send  2：發送，調用send但還沒有接受到響應 3：接收，已經接受到部分相應數據 　　4：完成，已經接收到所有數據

　　　　　　　　　　if(xhr.status == 200 || xhr.status == 304 ){

　　　　　　　　　　　　console.log(xhr.responseText);

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　　　//  第三步    open一個連接

　　　　　　xhr.open("GET","abc.txt",false)        //   請求類型     請求URL    true爲異步

　　　　　　//  第四步  發送請求

　　　　　　xhr.send(string / null )       // string只適用於POSR請求

 

　　　　setRequestHeader() 設置請求頭 

###2.  xhr對象的相關屬性

　　responseText：    做爲響應主體被返回的文本

　　responseXML：   若是響應的內容類型是「text/xml」或"application/xml",這個屬性中將保存包含則相應數據的XML DOM 文檔。

　　status： 響應的HTTP狀態（狀態碼）   　　　　成功的狀態碼爲200/304    304表示請求的資源並無被修改，能夠直接使用瀏覽器中的緩存版本

　　　　即判斷響應是否成功需進行以下判斷

　　　　　　if(xhr.status  == 200 || xhr.status == 304){　　}

　　statusText： HTTP狀態的說明

　　abort()  :   取消異步請求

###3. HTTP頭部信息

　　setRequestHeader()      設置請求頭部信息  必須在open（）方法以後且調用send（）以前

　　getResponseHeader() 獲取指定請求頭 
　　語法： getResponseHeader(name) 
　　getAllResponseHeaders(); 獲取全部請求頭 
　　語法： getAllResponseHeaders( ) 

　　使用：

　　//post請求
　　obj.onclick= function(){
　　　　var xhr= new XMLHttpRequest();
　　　　var obj = {
　　　　　　name: 'zhansgan',
　　　　　　age: 18
　　　　};
　　　　xhr.open("POST", "http://192.168.1.200:8080/php/test.php", true);
　　　　xhr.setRequestHeader("token","header-token-value"); // 能夠定義請求頭帶給後端
　　　　xhr.setRequestHeader("dingyi","header-dingyi-value");
　　　　xhr.send(JSON.stringify(obj)); // 要發送的參數，要轉化爲json字符串發送給後端，後端就會接受到json對象
　　　　xhr.onreadystatechange = function(){
　　　　　　if(xhr.readyState == 4 && xhr.status == 200){
　　　　　　　　console.log(xhr.responseText);
　　　　　　}
　　　　}
　　};

　　//get請求
　　obj.onclick= function(){
　　　　var xhr= new XMLHttpRequest();
　　　　// get方法帶參數是將參數寫在url裏面傳過去給後端
　　　　xhr.open("GET", "http://192.168.1.200:8080/php/test.php?name='zhansgang'&age=12", true);
　　　　xhr.setRequestHeader("token","header-token-value");
　　　　xhr.setRequestHeader("dingyi","header-dingyi-value");
　　　　xhr.send();
　　　　xhr.onreadystatechange = function(){
　　　　if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
　　　　　　console.log(xhr.responseText);
　　　　}
　　}

 

###4. GET請求

　　　使用get請求常常會出現一個錯誤，就是查詢字符串格式有問題。   所以，查詢字符串中每一個參數的名稱和值都必須使用encodeURLcomponent()進行編碼，而後才能放到URL的末尾

　　    eg：        xhr.open("GET","abc.php?name1=value1&name2=value2",false)

　　　　　　　　可定義一個addURLParam()函數

　　　　　　　　　　function addURLParam(url,name,value)｛

　　　　　　　　　　　　url += (url.indexOf("?") == -1 ? "?"："&");

　　　　　　　　　　　　url += encodeURLcomponent(name) + "=" + encodeURLcomponent(value);

　　　　　　　　　　　　return url;

　　　　　　　　　　｝

　　　　　　　　　　url =   addURLParam("abc.php","userName","Tom")

　　　　　　　　　　xhr.open("GET",url,false)

###5. POST請求

###6. async和defer屬性

　　　　defer屬性（defer屬性聲明這個腳本中將不會有document.write或dom操做）

　　　　　　eg：

　　　　　　　　<script src="http://xxx.com/path/a.js"　defer></script>

　　　　async(html5中新增的異步支持)

　　　　　　eg ：

　　　　　　　　var s = document.createElement('script');

　　　　　　　　s.async = true;

　　1.<script src="script.js"></script> 沒有 defer 或 async，瀏覽器會當即加載並執行指定的腳本，「當即」指的是在渲染該 script 標籤之下的文檔元素以前，

　　　　也就是說不等待後續載入的文檔元素，讀到就加載並執行。

　　2.<script async src="script.js"></script> 有 async，加載和渲染後續文檔元素的過程將和 script.js 的加載與執行並行進行（異步）。
　　3.<script defer src="myscript.js"></script>　　有 defer，加載後續文檔元素的過程將和 script.js 的加載並行進行（異步），

　　　　可是 script.js 的執行要在全部元素解析完成以後，DOMContentLoaded 事件觸發以前完成。

 

 　　4.藍色線表明網絡讀取，紅色線表明執行時間，這倆都是針對腳本的；綠色線表明 HTML 解析。

　　defer屬性設置爲TRUE時，讓瀏覽器加載js腳本時不等腳本加載完成就開始對該腳本以後的其餘圖片、文本、HTML代碼進行加載了，而後讓js腳本本身在慢慢加載，而後再執行。

　　這種方式加載JS文件可以提升網頁的加載速度，特別是對比較大的腳本。

　　　注意：　

　　　　　　一、不要在defer型腳本程序段中調用document.write命令，由於document.write將產生直接輸出效果。

　　　　　　二、不要在defer型腳本程序段中包括任何當即執行腳本要使用的全局變量或者函數。