ajax應用非常普及，ajax的優(yōu)點大家都知道，具體就不多說了，其缺點還真不少，比如破壞瀏覽器的back功能，同一個url打開的界面并不是完全相同，還有安全性能等方面，至于有這么多的缺點，也阻止不了大家使用ajax的步伐~~~
這里以表單為例說一下實現(xiàn)Ajax的步驟：
1.先從表單中獲取我們需要的數(shù)據(jù)
2.然后建立相應的URL
3.設置onreadystatechange函數(shù)
4.打開連接
5.發(fā)送請求
以上就是Ajax的實現(xiàn)步驟，接下來簡單分步總結下。
首先是關于xrh對象的建立。
function creatXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.xhr");
}
}
稍完整的可以這樣寫：
function creatXhr(){
var xhr=null;
try{
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e2){
xhr=false;
}
}
if(!xmlHttp typeof XMLHttpRequest != 'undefined') {
xhr=new XMLHttpRequest();
}
}
以上對ie和非ie瀏覽器多做了兼容處理。
然后就該發(fā)送Ajax請求了，下面以一個表單項country為例：
function callReqest(){
var country=document.getElementById('country').value;
if((country==null)||(country==''))
return;
var url='example.php?country='+encodeURIComponent(country);
xhr.onreadystatechange=update;
xhr.open('GET',url,true);
xhr.send(null);
}
以上獲取了一個country表單項， onreadystatechange 函數(shù)是readystate發(fā)生變化時觸發(fā)的事件，可以以此來判斷是否需要發(fā)生動作。
onreadystatechange 函數(shù)如下：
function onreadystatechange(){
if((xhr.onreadystatechange==4)((xhr.state==200)||((xhr.state>200)(xhr.state300)))){
document.getElementById('countryCode').value=xhr.responseText;
}
}
在 onreadystatechange 等于4的時候，說明資源已然完全下載到客戶端了，可以使用了，同時查看狀態(tài)碼，在200到300之間，左閉右開，即可進行刷新，這里只是簡單的將responseText給了一個表單項，當然也可以返回XML等相關數(shù)據(jù)，相關內容可查看其他相關介紹。
最后，至于觸發(fā)Ajax，可以在表單的country里面添加onChange事件，這樣用戶在輸入表單時就會觸發(fā)Ajax了。
ps：javascript ajax小結
1.創(chuàng)建XHR對象
| 方法 |
說明 |
| new ActiveXObject(“Microsoft.XMLHTTP”) |
適用于i支持window.ActiveXObject的ie5和ie6等 |
| new XMLHttpRequest() |
適用于ie7+/ff/chrome/safari/opera等 |
2、XHR對象的屬性和方法
| 屬性或方法 |
說明 |
| readyState |
通信狀態(tài)，取值0~4，見后文 |
| onreadystatechange |
readyState改變時觸發(fā)此事件 |
| responseText |
服務器返回的文本格式文檔 |
| respon**ML |
服務器返回的XML格式文檔 |
| status |
狀態(tài)碼，如100，200,404,500等 |
| statusText |
狀態(tài)碼對應的文本（OK/Not Found) |
| abort() |
中止當前請求 |
| open(method,url) |
打開一個請求 |
| send(args) |
發(fā)送請求 |
| setRequestHeader(key,value) |
設置請求的頭部 |
| getResponseHeader(key) |
獲取響應的頭部值 |
| getAllResponseHeaders() |
以鍵值對形式返回所有頭部信息 |
3、readyState屬性
| 代碼 |
說明 |
| 0 |
代表一個未初始化的狀態(tài)。以創(chuàng)建未初始化的XHR對象 |
| 1 |
代表連接狀態(tài)。已經(jīng)調用了open方法，準備發(fā)送請求 |
| 2 |
代表發(fā)送狀態(tài)。已經(jīng)調用了send方法，尚未得到響應數(shù)據(jù) |
| 3 |
代表正在接收狀態(tài)，已經(jīng)接收了HTTP響應的頭部信息，正在接收響應內容 |
| 4 |
代表已經(jīng)加載狀態(tài)，此時響應內容已經(jīng)被完全接收 |
您可能感興趣的文章:- Javascript Ajax異步讀取RSS文檔具體實現(xiàn)
- JavaScript調用ajax獲取文本文件內容實現(xiàn)代碼
- javascript ajax的5種狀態(tài)介紹
- JavaScript AJAX之惰性載入函數(shù)
- 原生Javascript封裝的一個AJAX函數(shù)分享
- javascript結合ajax讀取txt文件內容
- JavaScript基于Ajax實現(xiàn)不刷新在網(wǎng)頁上動態(tài)顯示文件內容
