melo 唐

1.AJAX請求執行之步驟

• 建立AJAX請求

• 發出請求

• 處理server端回應

2.建立AJAX物件

var ajax;

if(window.XMLHttpReauest){

ajax = new XMLHttpRequest();

}else if (window.ActiveXObject){               //older IE

ajax = new ActiveXObject(‘MSXML2.XMLHTTP.3.0’);

}

可將其建立於function中方便日常呼叫:

function getXMLHttpReauestObject(){

var ajax = null;

if(window.XMLHttpReauest){

ajax = new XMLHttpRequest();

} else if (window.ActiveXObject){               //older IE

ajax = new ActiveXObject(‘MSXML2.XMLHTTP.3.0’);

}

return ajax;

}

3.指定AJAX請求後的結果處理器

ajax.onreadystatechange = handleStateChange

//handleStateChange掌握server回傳狀態變化

4.對server發出AJAX請求

ajax.open(‘GET’/’POST’, ’Server URL’ , true);

• para 1: 是get or post 請求

• para 2: 要對哪一個server發出請求

• para 3:同步或非同步(true是非同步)

ajax.send(null) // 送出請求

5.實際範例AJAX從server抓取資料

//page load

window.onload = function(){ //匿名函數

var ajax =  getXMLHttpReauestObject(); //呼叫我在2的function建立ajax物件

ajax.onreadystatechange = function()//會在server回傳狀態變化去呼叫匿名函數

{

if(ajax.readyState == 4){ //ajax請求週期整個完成

if((ajax.status >= 200 && ajax.status < 300) //用值再次確認正常

|| (ajax.status == 304)){

//將server回傳值顯示出來

document.getElementById(‘output’).innerHTML =

ajax.responseText;

}

else{ //  回傳值不正常,error

document.getElementById(‘output’).innerHTML =

ajax.statusText;

}

} //end of readystate

}//end of onreadystatechange

}//end of 匿名函數

//按下某按鈕讓呼叫匿名function接收server side回傳之請求

document.getElementById(‘btn’).onclick = function(){

ajax.open(‘GET’ , ‘URL’ , true);

ajax.send(null);

};