實現ajax的基本步驟:
一、建立xmlhttprequest物件
所有現代瀏覽器(ie7+、firefox、chrome、safari 以及 opera)均支援xmlhttprequest 物件,而ie5 和 ie6 使用 的是activexobject。
在現代瀏覽器中建立xmlhttprequest物件的語法如下所示:
在ie5 和 ie6中則使用activexobject 物件:
為了相容所有的瀏覽器,判斷瀏覽器是否支援xmlhttprequest 物件。
二、建立乙個新的http請求,並指定請求的方法、url、是否非同步處理請求及驗證資訊
xhr.open(method,url,flag,username,userpass);
method:請求的型別(get、post、put、delete、head......)
url:檔案在伺服器上的位置
flag:是否非同步請求。可選引數,引數值為布林型別。true表示非同步方式、false表示同步方式,預設為true。
username:該引數為可選引數,用於輸入使用者名稱。如果伺服器需要驗證,則必須使用該引數。
userpass:該引數為可選引數,用於輸入密碼。如果伺服器需要驗證,則必須使用該引數。
三、為onreadystatechange 事件繫結方法,監聽狀態的改變
xhr.onreadystatechange = function()
}readystate屬性:表示請求/響應過程的當前活動階段
0:未初始化。尚未呼叫 open()方法。
1:啟動。已經呼叫 open()方法,但尚未呼叫 send()方法。
2:傳送。已經呼叫 send()方法,但尚未接收到響應。
3:接收。已經接收到部分響應資料。
4:完成。已經接收到全部響應資料,而且已經可以在客戶端使用了。
只有在xmlhttprequest物件完成了以上5個步驟之後,才可以獲取從伺服器端返回的資料。
status屬性:響應的 http 狀態碼
200:響應成功
301:永久重定向/永久轉移
302:臨時重定向/臨時轉移
304:本次獲取內容是讀取快取中的資料
400:請求引數錯誤
401:無許可權訪問
404:訪問的資源不存在
......
四、傳送http請求
xhq.send(data);
其中data是個可選引數,請求主體傳送的引數,如果請求的資料不需要引數,即可以使用null來替代。
只有在使用send()方法之後,xmlhttprequest物件的readystate屬性值才會開始改變,也才會激發readystatechange事件,並呼叫函式。
實現AJAX的基本步驟
要完整實現乙個ajax非同步呼叫和區域性重新整理,通常需要以下幾個步驟 1 建立xmlhttprequest物件,也就是建立乙個非同步呼叫物件.建立物件 2 為ajax引擎物件繫結監聽 監聽伺服器已將資料響應給引擎 繫結監聽物件 xhr.onreadystatechange function 3 配...
Ajax之實現步驟
一般情況下為以下4個步驟 建立xmlhttprequest物件 伺服器向瀏覽器響應請求 註冊監聽 瀏覽器與伺服器建立連線 瀏覽器向伺服器傳送請求 具體 當頁面載入完畢之後,執行以下 window.onload function 3 瀏覽器與伺服器建立連線 xhr.open method,url,as...
Ajax實現非同步請求步驟
一 原生js實現 var request new xmlhttprequest 建立xmlhttprequest 物件 啟動乙個http請求,但未傳送請求到服務端,最後乙個引數預設為false,非同步傳送。request.open get post url,true false 使用get方法時直接...