Ajax是一種異步加載,部分更新的技術。
如:填寫表單時,郵箱格式錯誤,用戶名已存在等,會在你輸入完成後就時事的提醒你,而不需要點擊提交,刷新整個頁面以後才告訴你。
這就是Ajax的牛逼之處:無刷新數據讀取
網頁的展示需要經過,瀏覽器(客戶端)向服務端(服務器)發送請求,服務端返回響應。
請求:
- 方法
- get:查詢,獲取,一般不用於修改
- post:修改,刪除,增加等
- url
- 請求頭:客戶端信息(與請求體之間有空行)
請求體 :客戶端提交的字符串,表單
這裏說一下請求會用到http協議,它是一種無狀態協議。也就是說不會建立持久連接,幹完事兒就斷開了,無記憶。
響應:狀態碼:請求是否成功
- 響應頭:服務器信息
- 響應體
這個過程要通過XMLHttpRequest對象來實現。但這個對象在ie6以下是不存在的,如果要兼容的話:
發送請求要用到XMLHttpRequest的一些屬性和方法:
- open(method,url,async)
- saync:true/false 同步/異步
- send(string)
- get不用寫,post寫
獲取響應:
- responseText:字符串
- responseXML:XML
- status和statusText:數字(狀態碼)和文本形式返回
而當我們發出請求後,可通過readystate屬性來監視服務器響應的變化,在響應成功時得到通知。
readystate:
- 0:服務器還未初始化
- 1:鏈接已建立(open已調用)
- 2:請求已被接收(收到頭)
- 3:請求處理中(收到主體)
- 4:請求已完成
總結:XMLHttpRequest建立異步請求4步
1. 創建XMLHttpRequest對象
2. open();
3. send();
4.監聽 onreadystatechange
例:
jQuery中的Ajax
設定值:
- type 發送方式:post/get
- url
- data 對象,連同請求一起發送到服務器的數據(主要post使用)
- dataType 預期服務器返回的數據類型(一般爲json)
- success 請求成功的回調函數
- error 請求失敗的回調函數
$.ajax({
type:"GET",
url:" //此處省略 ",
dataType:"joson",
success:function(data){//data爲已解析過的responseText
if(data.success){
//響應已經成功返回
//sucss爲前端和後臺約定好的json數據成員之一
}else{
//出現錯誤
}
},
error:function(jqXML){
alert("發生錯誤"+jqXML.status);
}
})
success是一個函數,這個函數傳遞過去不會立即執行,而是等着請求成功之後才能執行。對於這種傳遞過去不執行,等出來結果之後再執行的函數,叫做callback,即回調函數