ajax非同步請求以及Jquery框架封裝的非同步請求方式
阿新 • • 發佈：2018-11-25
一、AJAX - 阿賈克斯
1、什麼是AJAX？
Asynchronous Javascript And Xml 是可以建立快速動態網頁的技術。可以實現非同步更新，而不需要載入整個網頁，只加載需要更 新某部分網頁。 同步訪問：當客戶端向伺服器傳送請求時，伺服器在處理過程中，瀏覽器只能等待，效率偏 低。 非同步訪問：當客戶端向伺服器傳送請求時，伺服器在處理過程中，客戶端可以做其他的操作 不需要一直等待，效率偏高。 ** Xml : eXtensible Markup Language 可擴充套件的 標籤 語言 AJAX優點： 1、非同步 訪問 2、區域性 重新整理 AJAX的使用場合： 1、搜尋建議 2、表單驗證 3、前後端完全分離
2、AJAX的核心物件 – 非同步物件（XMLＨttpRequest）
1、什麼是XMLＨttpRequest？ 簡稱為“xhr”，稱為非同步物件，代替瀏覽器向伺服器傳送請求並接受響應 xhr是由JS來提供 ２、建立非同步物件（ｘｈｒ） 主流的非同步物件是XMLHttpRequest型別的，並且主流瀏覽器都支援（IE7+， Chorme，Firefox,Opera）全部支援，但不支援IE低版本瀏覽器（IE6以及以下） XMLＨttpRequest，需要使用ActiveXobject() 來建立非同步物件 支援 XMLＨttpRequest： new XMLＨttpRequest() 不支援 XMLＨttpRequest： new ActiveXobject("Microsoft,XMLHTTP") 下面是common.js程式碼: function getXhr(){ //如果瀏覽器支援XMLHttpRequest,則建立XMLHttpRequest的物件並返回 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ //如果瀏覽器不支援XMLHttpRequest的話,則建立ActiveXObject的物件並返回 return new ActiveXObject("Microsoft.XMLHTTP"); } }
3、xhr的成員
1、方法 - open（） 作用：建立請求 語法：open(method,url,async) method：請求方法，取值為'get'或'post' url：請求地址，字串 async：是否採用非同步的方式傳送請求 true：使用非同步方式傳送請求 alse：使用同步方式傳送請求 ex: xhr.open('get','/server',true) 2、屬性 - readyState 作用：請求狀態，通過不同的請求狀態值來表示xhr與伺服器的互動情況 由0-4共五個值來表示五個不同的狀態 0：請求尚未初始化 1：xhr已經與伺服器建立連結 2：伺服器端已經開始接收請求 3：請求正在處理中 4：響應已完成 3、屬性 - status 作用：表示伺服器端的響應狀態碼 200：表示伺服器正確處理所有的請求以及給出響應 404：請求資源不存在 500：伺服器內部錯誤 4、屬性 - responseText 作用：伺服器端的響應資料 5、事件 - onreadystatechange 作用：每當xhr的readyState屬性值發生改變的時候要觸發的操作 - 回撥函式 在該函式中，只有當readyState的值為4並且status的值為200時，可以正常接收 responseText 6、方法 - send() 作用：通知xhr向伺服器傳送請求 語法：send(body) body：表示請求的主體 get請求：沒有請求主體的，所以body的值為null xhr.send(null) post請求：有請求主體的，所以body的位置處要表示請求資料 xhr.send("請求資料") xhr.send("引數=值&引數=值")
4、AJAX的操作步驟
1、GET請求
1、建立xhr物件
2、建立請求 - open()
3、設定回撥函式 - onreadystatechange
判斷狀態並且接收資料
4、傳送請求 - send()
注意：如果有請求提交資料，則需要在url的後面拼查詢字串
2、POST請求
1、請求提交的資料要作為send() 的引數進行提交
xhr.send('引數=值&引數=值')；
2、修改請求訊息頭
在AJAX中，提交POST請求時，AJAX預設將Content-Type請求訊息頭的值修改 為”text/plain“，所以導致資料無法正常提交
解決方案：
將Content-Type的請求訊息頭再修改回”application/x-www-form- urlencoded“即可
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
注意：如果有請求提交資料，則需要在send()中傳遞資料
例如：
$(function(){
$("#btnAjax").click(function(){
//1.獲取xhr
var xhr = getXhr();
//2.建立請求
xhr.open(‘get’,’/01-server’,true);
//3.設定回撥函式
xhr.onreadystatechange = function(){
if(xhr.readyState4 && xhr.status200){
var resTxt = xhr.responseText;
console.log(resTxt);
}
}
//4.傳送請求
xhr.send(null)
});
});
二、JQUERY 與 AJAX
1、$obj.load(url,data,callback)
作用：非同步載入資料到 $obj 元素中
引數：
url：非同步請求的地址
data：傳遞給伺服器端的引數（可選），該資料將決定請求方法是什麼
1、可以傳遞普通的字串
"name=MrWang&age=30"
2、可以是JSON物件
｛
"name":"Mrwang",
"age":30,
｝
callback：非同步請求成功之後的回掉函式（可選）
取值為匿名函式
function(resText,statusText){
rexText:響應資料，
statusText：響應資料的狀態
}
2、$.get(url,[data],[callback],[type])
url:非同步請求地址
data:非同步請求的引數
1、字串：name = value&name=value
2、JSON：{"name":"value","name":"value"}
callback：請求成功後的回撥函式
function(resText){
rexText：表示響應成功後的響應資料
}
type：響應回來的資料的型別
1、html：響應回來的是html文字
2、text：響應回來的是資料是text文字
3、json:json物件
4、script:js指令碼程式碼
注意：如果此處指定了型別，那麼在callback中，無需做型別的轉換
3、$.post()
4、$.ajax()
作用：自定所有的ajax行為
語法：$.ajax({ajax設定的引數資料物件})；
引數：
1、url：字串，表示非同步請求的地址
2、type：字串，請求方式（get,post）
3、data:傳遞到伺服器端的引數
1、字串："name=value&name=value"
2、JSON物件：{"name":"value"}
4、dataType：字串，響應回來的資料的格式
1、html
2、xml
3、text
4、script
5、json
6、jsonp
5、success：回撥函式，請求響應成功時的回撥函式
function(data){
data:表示伺服器端響應回來的資料
}
6、error：回撥函式，請求或響應失敗時的回撥函式
7、beforeSend：回撥函式，在傳送ajax請求之前的回撥函式，如果return false的話則表示終止本次請求
例子：以下便是Jquery中$ajax()：
$(function(){
$("#btnload").click(function(){
var params = {
'name':'MrWang',
'age':32,
}
$("#show").load('/02-server',
params,
function(resText,statusText){
console.log("響應成功");
console.log("resText:"+resText);
console.log("statusText:"+statusText);
});
});
});