ajax非同步請求的過程
阿新 • • 發佈:2018-12-10
AJAX
AJAX是非同步JavaScript和XML(Asynchronous JavaScript And XML),它是一種方法,允許網頁在不重新加在整個頁面的情況下更新一部分網頁。
AJAX非同步請求的過程
AJAX的核心是XMLHttpRequest物件,其中的方法可以用來在瀏覽器和伺服器之間傳輸資料。
1.建立XMLHttpRequest物件
var xhr=new XMLHttpRequest();
2.連線伺服器
xhr.open('GET',url,true); //設定請求的引數(method,url,async)
method有get和post兩種
URL是檔案的路徑,後面可以帶引數
async為true(非同步,預設)或false(同步)
3.向服務端傳送請求
xhr.send(); //傳送請求
4.監聽伺服器狀態並對返回結果執行相應回撥
if(xhr.readyState==4&&xhr.status==200||xhr.status==304){ //readyState==4說明請求已完成
fn.call(this,xhr.responseText);
}
}
}
XMLHttpRequest取得的響應資料
- responseText:獲得字串形式的響應資料
- responseXML:獲得xml形式的響應資料
- status和statusText:以數字和文字形勢返回http轉態碼
- getAllResponseHeader():獲得所有的相應
- getResponseHeader():查詢相應中的某個欄位的值
- readState屬性
readystate的五種返回值所代表的意義
- 0(未初始化) 還沒呼叫open()方法
- 1(載入)已經呼叫send(),正在傳送請求
- 2(載入完成)send()方法已經完成,已收到響應
- 3(解析)正在解析響應內容
- 4(完成)響應內容解析完成,可在客戶端呼叫。
完整程式碼實現
GET:
GET是直接在URL上傳資料的。
function AJAX(url,fn){ var xhr=new XMLHttpRequest(); //建立非同步物件 xhr.open('GET',url,true); //設定請求的引數 xhr.send();//傳送請求 xhr.onreadystatechange=function(){ //監聽狀態變化,執行相應的回撥 if(xhr.readyState==4&&xhr.status==200){ //readyState==4說明請求已完成 fn.call(this,xhr.responseText); } } }
POST:
POST需要新增請求頭,資料通過send()來傳輸。
function post(url,data,fn){
var xhr=new XMLHttpRequest();
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.open('post',url,true);
xhr.send(data);
xhr.onreadystatechange=function(){ //監聽狀態變化,執行相應的回撥
if(xhr.readyState==4&&xhr.status==200||xhr.status==304){ //readyState==4說明請求已完成
fn.call(this,xhr.responseText);
}
}
}