AJAX Asynchronous JavaScript and XML
XMLHttpRequest 對象
屬性
readyState: 每當(dāng) readyState 改變時亏镰，就會觸發(fā) onreadystatechange 事件
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化饵筑。
0: 請求未初始化
1: 服務(wù)器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應(yīng)已就緒
responseText #服務(wù)器返回的響應(yīng)文本
responseXml #服務(wù)器返回的響應(yīng)xml
status #服務(wù)器的http狀態(tài)碼 200: "OK" 404: 未找到頁面
statusText #服務(wù)器的http狀態(tài)原因文本
onreadystatechange(){} #事件被觸發(fā) 5 次（0 - 4）卖哎，對應(yīng)著 readyState 的每個變化
request = new XMLHttpRequest(); // 新建XMLHttpRequest對象
request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時，函數(shù)被回調(diào)
if (request.readyState === 4) { // 成功完成
// 判斷響應(yīng)結(jié)果:
if (request.status === 200) {
// 成功籽前，通過responseText拿到響應(yīng)的文本:
console.log(request.responseText);
} else {
// 失敗种冬，根據(jù)響應(yīng)碼判斷失敗原因:
console.log(request.status);
}
} else {
// HTTP請求還在繼續(xù)...
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xmlHttp=GetXmlHttpObject();
// 發(fā)送請求:
request.open('GET', '/api/categories');
request.send();
JSONP JSON with Padding
JSONP，它有個限制粗井，只能用GET請求尔破，并且要求返回JavaScript。這種方式跨域?qū)嶋H上是利用了瀏覽器允許跨域引用JavaScript資源
JSONP通常以函數(shù)調(diào)用的形式返回浇衬，返回JavaScript內(nèi)容
先準(zhǔn)備好函數(shù)懒构，然后給頁面動態(tài)加一個<script>節(jié)點，相當(dāng)于動態(tài)讀取外域的JavaScript資源耘擂，最后就等著接收回調(diào)了
1.首先在客戶端注冊一個callback, 然后把callback的名字傳給服務(wù)器痴脾。
2.此時，服務(wù)器先生成 json 數(shù)據(jù)梳星。
3.然后以 javascript 語法的方式赞赖，生成一個function , function 名字就是傳遞上來的callback參數(shù)值 .
4.最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中冤灾，這樣就生成了一段 js 語法的文檔前域，返回給客戶端。
5.客戶端瀏覽器韵吨，解析script標(biāo)簽匿垄，并執(zhí)行返回的 javascript 文檔，此時數(shù)據(jù)作為參數(shù)归粉，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.
