Ajax 小結-02

Ajax 請求響應過程分析

*全部的Ajax 請求都會基於DOM(HTML元素)事件，經過XHR（XMLHttpRequest）對象實現與服務端異步通信局部更新
*Ajax應用的編程步驟:
第一步：基於dom事件建立XHR對象(XMLHttpRequest對象)

var xhr=new XMLHttpRequest();

第二步：註冊XHR對象狀態監聽，經過回調函數(callback)處理狀態信息。

xhr.onreadystatechange=function(){                     if(xhr.readyState==4&&xhr.status==200){            document.getElementById("resultId").
    innerHTML= xhr.responseText;            
    }           
}

*readyState==4表示服務端的響應結果在客戶端已經接收完了
*status==200表示服務處理請求的過程當中沒有出現任何異常(響應的都是正常數據)

第三步：建立與服務端的鏈接

xhr.open("GET",`doCheck?name=${name}`,true)

*doCheck?name=${name}--是所要鏈接服務端的網址
第四步：發送異步請求實現與服務端的通信

xhr.send(null);

*構建參數對象
方式1：

var params="name="+name;//淘汰

方式2：

const params=`name=${name}`;//一種新的寫法,這種寫法稱之爲模板字符串,全部字符串拼接均可以以這種方式進行實現

方式3：

var params={"name":name};//JavaScript中的對象(原生ajax方式不能夠直接傳遞這樣的對象)

*JavaScript中的對象特性
封裝特性：
JS中的對象用於封裝屬性和方法

繼承特性：
JS中爲了實現屬性或方法的可重用性,提供須要藉助Prototype對象去實現的方式（繼承機制）

多態特性

• 基於構造函數建立對象結構相同(屬性名、方法名相同,屬性值不一樣)的多個對象在定義時，能夠將結構封裝到構造方法構造函數儘可能不要定義函數--由於構建對象時，構造函數內部的函數還要開闢新的空間