Ajax 請求過程
原生態Ajax使用的步驟,最後告訴面試官,我們在工作中是使用jQuery來實現Ajax請求和處理的。在回答的時候儘量詳盡,包括方法的引數的個數,順序和作用,以免被面試官抓住不放。不給面試官提問的機會,那你的回答就牛逼了!
Ajax是什麼
我理解Ajax 是一種非同步請求資料的一種技術,對於改善使用者的體驗和程式的效能很有幫助。
Ajax的使用
(1)建立`XMLHttpRequest`物件,也就是建立一個非同步呼叫物件. (2)建立一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證資訊. (3)設定響應`HTTP`請求狀態變化的函式. (4)傳送`HTTP`請求. (5)獲取非同步呼叫返回的資料. (6)使用JavaScript和DOM實現區域性重新整理. var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET','demo.php','true'); xmlHttp.send() xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){ } }
以下步驟,如果不能理解你死記硬背都要記下來,總比你答不出來要好吧!
1.建立Ajax核心物件XMLHttpRequest
-
var xmlhttp;
-
if(window.XMLHttpRequest){
-
//IE7+,Chrome,Firefox,Safari,Opera執行此程式碼 xmlhttp=new XMLHttpRequest;
-
}else{
-
//IE5,IE6執行該程式碼
-
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
-
}
2.向伺服器傳送請求
-
xmlhttp.open(method,url,async);
-
xmlhttp.send();
示例如下:
-
xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",true);
-
xmlhttp.send();
注意一:open 的引數要牢記,很多面試官愛問這樣的細節
- method:請求的型別;GET 或 POST
- url:檔案在伺服器上的位置,相對位置或絕對位置
- async:true(非同步)或 false(同步)
-
為什麼使用 Async=true ?
我們的例項在 open() 的第三個引數中使用了 "true"。
該引數規定請求是否非同步處理。
True 表示指令碼會在 send() 方法之後繼續執行,而不等待來自伺服器的響應。
onreadystatechange 事件使程式碼複雜化了。但是這是在沒有得到伺服器響應的情況下,防止程式碼停止的最安全的方法。
通過把該引數設定為 "false",可以省去額外的 onreadystatechange 程式碼。如果在請求失敗時是否執行其餘的程式碼無關緊要,那麼可以使用這個引數
注意二:post請求不同於get請求
send(string)方法post請求時才使用字串引數,否則不用帶引數。
注意三:post請求一定要設定請求頭的格式內容
-
xmlhttp.open("POST","ajax_test.html",true);
-
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
-
xmlhttp.send("fname=Herry&lname=Ford");
3.伺服器響應處理
responseText 獲得字串形式的響應資料。responseXML 獲得XML 形式的響應資料。
3.1 同步處理
-
xmlhttp.open("GET","http://www.runoob.com/try/ajax/demo_get.php",false);
-
xmlhttp.send();
-
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
直接在send()後面處理返回來的資料。
3.2 非同步處理
非同步處理相對比較麻煩,要在請求狀態改變事件中處理。
-
xmlhttp.onreadystatechange=function () {//接收到服務端響應時觸發
-
if(xmlhttp.readyState==4&&xmlhttp.status==200){
-
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
-
}
-
}
一共有5中請求狀態,從0 到 4 發生變化。
0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒
xmlhttp.status:響應狀態碼。這個也是面試比較愛問的,這個必須知道4個以上,比較常見的有:
200: "OK"
304:該資源在上次請求之後沒有任何修改(這通常用於瀏覽器的快取機制,使用GET請求時尤其需要注意)。
403 (禁止) 伺服器拒絕請求。
404 (未找到) 伺服器找不到請求的網頁。
408 (請求超時) 伺服器等候請求時發生超時。
500 (伺服器內部錯誤) 伺服器遇到錯誤,無法完成請求。