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