1、Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的簡寫,不是一門新技術,而是對現有技術的綜合利用。這一技術能夠向服務器請求額外數據而無需刷新頁面,帶來了更好的用戶體驗
2、Ajax技術的核心是XMLHttpRequest對象(簡稱XHR),這是由微軟首先引入的一個特性。在XHR出現之前,Ajax式的通信必須借助一些hack手段來實現,大多數是使用隱藏的框架或內嵌框架。
3、XHR為向服務器發送請求和解析服務器響應提供了流暢的接口。能夠以異步的方式從服務器取得更多的信息,意味著用戶單擊後,可以不必刷新頁面也能獲取新數據。也就是說可以使用XHR對象取得新數據,然後再通過DOM將新數據插入到頁面中
4、雖然Ajax名字中有XML的成分,但是呢,Ajax通信與數據格式無關,這種技術就是無須刷新頁面即可從服務器取得數據,但不一定是XML數據
ajax作用:發送請求(設置請求setRequest) 接收響應(getResponse)
Ajax中最重要也是最固定的部分就是http請求。
1) 建立連接: (IE7及以上版本都支持XMLHttpRequest)
1 var xhr = new XMLHttpRequest(); //創建異步請求對象
2) Get請求:格式必須是(url?name1=value1&name2=value2)
1 xhr.open("get","01-register.php?name="+name);//初始化異步get請求 2 xhr.send(null); //與服務器建立連接
3) Post請求
1 xhr.open('post','01-XMLHTTPRequest-test.php');//請求報文行 2 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post請求設置請求頭*/ 3 xhr.send('name=rose&age=20'); //請求報文體
4) get和post請求的區別:
★get不需要設置請求頭,而post需要設置請求頭
★get的數據傳遞通過url進行,而post的數據在send方法中傳遞
1 /*監聽服務器的響應*/ 2 xhr.onreadystatechange=function(){ 3 /*判斷當前的響應是否成功 1.服務器做出了響應 2.響應的結果是正確的*/ 4 if(xhr.status==200 && xhr.readyState==4){ 5 var result=xhr.responseText; 6 console.log(result); //輸出從服務器中獲取到的數據 7 //接下來就可以對數據進行相應的處理了 8 } 9 };
1 /*監聽*/ 2 xhr.onreadystatechange=function(){ 3 if(xhr.status==200 && xhr.readyState==4){ /*判斷狀態*/ 4 var result; 5 /*獲取響應報文中的Content-Type*/ 6 var ct=xhr.getResponseHeader("Content-Type"); 7 /*判斷Content-Type,進行數據的解析*/ 8 if(ct.indexOf("xml") != -1){ 9 result=xhr.responseXML; 10 } 11 else if(ct.indexOf("json") !=-1){ 12 result=JSON.parse(xhr.responseText); 13 } 14 else{ 15 result=xhr.responseText; 16 } 17 /*調用回調函數--委托--代理*/ 18 success && success(result); 19 } 20 };
1 $.ajax({ 2 type: 請求方式(get/post), 3 url: "register.php", 4 data: 發送請求數據, 5 beforeSend:function(){返回false可以取消本次ajax請求}, 6 success:function(result){ 成功響應後調用 }, 7 error:function(err){ 錯誤響應時調用 }, 8 complete:function(){ 響應完成時調用(包括成功和失敗) } 9 });
jQuery中提供了專門的方法來序列化表單:
1 $('form').serialize(): //序列化表單(即格式化key=val & key=val);
我們需要監聽服務器的響應狀態,然後對從服務器中獲取的數據做相應的處理。
1) onreadystatechange是JavaScript事件中的一種,用於監聽XMLHttpRequest的狀態
2) readystate:響應狀態,返回XMLHTTP請求的當前狀態
readyState 狀態
狀態說明
(0)未初始化
此階段確認XMLHttpRequest對象是否創建,並為調用open()方法進行未初始化作好准備。值為0表示對象已經存在,否則浏覽器會報錯--對象不存在。
(1)載入
此階段對XMLHttpRequest對象進行初始化,即調用open()方法,根據參數(method,url,true)完成對象狀態的設置。並調用send()方法開始向服務端發送請求。值為1表示正在向服務端發送請求。
(2)載入完成
此階段接收服務器端的響應數據。但獲得的還只是服務端響應的原始數據,並不能直接在客戶端使用。值為2表示已經接收完全部響應數據。並為下一階段對數據解析作好准備。
(3)交互
此階段解析接收到的服務器端響應數據。即根據服務器端響應頭部返回的MIME類型把數據轉換成能通過responseBody、responseText或responseXML屬性存取的格式,為在客戶端調用作好准備。狀態3表示正在解析數據。
(4)完成
此階段確認全部數據都已經解析為客戶端可用的格式,解析已經完成。值為4表示數據解析完畢,可以通過XMLHttpRequest對象的相應屬性取得數據。
3) status:服務器的響應碼
常見響應碼:200—服務器成功返回網頁
404—請求網頁不存在
503—服務不可用
關於服務器響應碼,詳情請看————網絡傳輸協議