最近在看《Head First Ajax》,雖然書里代碼給的已經夠詳細了，但在手過一遍代碼時還是引發了一些知識點的思考和擴展。書還沒看完，這篇文章我打算是對於那本書邊看邊總結。 Ajax代碼思路 創建請求對象 配置請求對象併發送到伺服器 伺服器應答請求對象（1） 創建請求對象，作為和伺服器進行通訊的...
最近在看《Head First Ajax》,雖然書里代碼給的已經夠詳細了，但在手過一遍代碼時還是引發了一些知識點的思考和擴展。書還沒看完，這篇文章我打算是對於那本書邊看邊總結。
Ajax代碼思路
創建請求對象
配置請求對象併發送到伺服器
伺服器應答請求對象
（1） 創建請求對象，作為和伺服器進行通訊的對象：
function createRequest(){
try{
var request=new XMLHttpRequest();
}catch(tryMS){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(otherMS){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request=null;
}
}
}
return request;
}
註：ActiveXObject是Microsoft特定的一種編程對象，有兩個不同版本由不同瀏覽器分別支持。XMLHTTP是可以在Javascript等腳本語言中通過http協議傳送或接收XML及其他數據的一套API。
獲得請求對象request後，它有這麼些個屬性：
常用的有onreadystatechange,readyState,responseText,status。
這幾天在segmentfault看到一個更詳細的ajax介紹:http://segmentfault.com/a/1190000004322487?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare#articleHeader6 引用過來對我自己的總結加以補充：
（2）配置請求對象併發送到伺服器：
var request=createRequest();
request.open("GET",url,true);
request.onreadystatechange=showResponse;
request.send(null);
open,send方法均來自request對象的原型XMLHttpRequest，打開__proto__:XMLHttpRequest可看到：
open()方法有三個參數，第一個是發送請求所使用的方法（GET還是POST,區別以後再總結）,第二個是規定伺服器端腳本的url（該文件可以是任何類型的文件），第三個參數規定是否進行非同步處理（預設true非同步）
send()方法將請求送往伺服器。我在這裡註意到，
request.onreadystatechange=showResponse;這句代碼所在的位置不同，控制台輸出的響應內容就不同。想來也是，回調函數加入任務隊列的時機不同肯定輸出不同啊，就比如現在這個位置，request.onreadystatechange=showResponse;在open之後send之前，當代碼解析到request.onreadystatechange=showResponse;時，此時的readyStates=1（請求已和伺服器建立接連），此後當readyStates由1變為2，回調函數showResponse加入任務隊列中等待被執行，readyState從2變化到3，回調函數showResponse第二次加入任務隊列，readyState從3變化到4，回調函數再次加入隊列。所以猜想當執行棧的代碼執行完畢後，控制台會輸出“請求已發送，伺服器已接收，send之後”，“請求正在處理”，“請求已完成”；確實如此：
（3）伺服器應答請求對象，js就可以處理響應內容了：
function showResponse(){
if(request.readyState==0){
console.log('請求未初始化，調用open之前');
}else if(request.readyState==1){
console.log('請求已提出，伺服器連接已建立，open之後send之前');
}else if(request.readyState==2){
console.log('請求已發送，伺服器已接收，send之後');
}else if(request.readyState==3){
console.log('請求正在處理');
}else if(request.readyState==4){
console.log('請求已完成');
if(request.status==200){
//處理request.responseText;
}
}
}
上面代碼僅是為了跟蹤readyState變化，實際項目代碼要不了這麼多。底下才是實際主要代碼：
function showResponse(){
if(request.readyState==4){
if(request.status==200){
//處理request.responseText;
}
}
}
參考
- 《Head First Ajax》
- 《圖解HTTP》:返回結果的Http狀態碼
AJAX-onreadystatechange事件:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
歡迎各位菊苣來指點交流~
