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