Ajax的核心是XMLHttpRequest對象,所有的東西都是通過它來實現的.今天就來建立一個XMLHttpRequest對象.並用它來產生一次請求,並處理響應.
正確建立XMLHttpRequest對象由於瀏覽器的差異,建立這個對象需要通過瀏覽器能力的檢測.從而相應的執行個體化這個對象.通常我們是通過建構函式來執行個體化一個XMLHttpRequest對象.這樣做的好處是可以複用.因為我們一般不可能只是建立一個.而通常是建立多個.
function createXmlHttpObject(){var xmlHttp = null;try{xmlHttp = new XMLHttpRequest();}catch(e){try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}
產生一次請求.
有了上面的函數.利用它建立一個對象.並用open()和send()方法產生一次請求.最好我們將這個請求也寫到一個函數裡面.因為請求是在需要的時候再發出.比如點選連結或者按下鍵盤按鈕等.所以我們可以這樣做:
function myFirstRequest(){xmlHttp=createXmlHttpObject();//不支援則拋出錯誤的話if (xmlHttp == null) {alert ("Oop! Browser does not support HTTP Request.")return;}//你要請求的URL,獨立弄出來,你可能需要做些處理.var url;xmlHttp.onreadystatechange=function(){//處理請求過程中的狀態.包括返回資料的處理.}//以GET方式請求URL,參數true表示非同步.(我強烈大家設定為true否則為阻塞模式)xmlHttp.open("GET", url, true);//GET方式發送null.POST方式則需要發送資料.xmlHttp.send(null);}
產生請求的框框大概就是這個樣子了.
處理響應上面的注釋,’處理請求過程中的狀態‘就是這裡要介紹的內容.
onreadystatechange屬性指定了一個方法(function)這個方法在請求的不同階段將被幾次調用.我們可以通過它來訪問XMLHttpRequest對象中的屬性來判斷交換的狀態和返回的資料.這些屬性是:
readyState 是個表是下列狀態的整數值:
0:尚未初始化.
1:載入中
2:載入完成
3:互動
4:完成
status是一個表示請求狀態的數字代碼:這個是由伺服器產生的http協議狀態.比如我們常看到的200表示’OK’,404表示’沒有找到’等.
statusText是與狀態碼相關的一條資訊.
知道了上面的資訊.就可以分開做判斷,最後對返回資料做些處理.
下面是一個常用的onreadystatechange方法.
xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){//伺服器正常.並返回的需要的資料.我們在這裡//對responseText做處理.} else {//載入中.或者其他情況.}}
當然你也看到了.上面的例子並不完整.他沒有細分readyState的各個階段.所以還有一個比較常用的.用switch語句.或者依然用if語句做些細緻的判斷.簡單的句子.這裡不重複了.
到這裡你大概已經基本Ajax請求的處理方法了.接下來我寫個很簡單的例子.(基於PHP).你也可以搭建一個PHP環境.實驗一下這個例子:
伺服器端的代碼:
<?phpif(isset($_GET['name'])){if(''==$_GET['name']){echo '請輸入名字';}else{echo 'Name: '.$_GET['name'];}}else{echo 'This is a server file';}?>
使用者端代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test Ajax (GET)</title><script language="javascript">(function(){if(!window.YHLJS) window['YHLJS']={};function createXmlHttpObject(){var xmlHttp = null;try{xmlHttp = new XMLHttpRequest();}catch(e){try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}return xmlHttp;}function myFirstRequest(){xmlHttp=createXmlHttpObject();//不支援則拋出錯誤的話if (xmlHttp == null) {alert ("Oop! Browser does not support HTTP Request.")return;}var url;var data=document.getElementById('name').value;//alert(data);url='server.php?name='+data;xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){alert(xmlHttp.responseText);document.body.style.cursor = 'auto';} else {document.body.style.cursor = 'wait';}}//以GET方式請求URL,參數true表示非同步.(我強烈大家設定為true否則為阻塞模式)xmlHttp.open('GET', url, true);//GET方式發送null.POST方式則需要發送資料.xmlHttp.send(null);}window['YHLJS']['myFirstRequest']=myFirstRequest;})(); <form id="send" method="post" action="" onsubmit="YHLJS.myFirstRequest();return false"><div><label>您的名字:<input type="text" name="name" id="name" tabindex="1" value="" /> </label><input type="submit" name="post_submit" id="post_submit" value="提交" tabindex="1" /></div></form></div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
