Ajax的概述與實現過程

1、ajax概述

一、Ajax是Asynchronous（[ə'sɪŋkrənəs） JavaScript XML的簡寫，不是一門新技術，而是對現有技術的綜合利用。這一技術可以向服務器請求額外數據而無需刷新頁面，帶來了更好的用戶體驗

二、Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），這是由微軟首先引入的一個特性。在XHR出現以前，Ajax式的通訊必須藉助一些hack手段來實現，大多數是使用隱藏的框架或內嵌框架。

三、XHR爲向服務器發送請求和解析服務器響應提供了流暢的接口。可以以異步的方式從服務器取得更多的信息，意味着用戶單擊後，能夠沒必要刷新頁面也能獲取新數據。也就是說能夠使用XHR對象取得新數據，而後再經過DOM將新數據插入到頁面中

四、雖然Ajax名字中有XML的成分，可是呢，Ajax通訊與數據格式無關，這種技術就是無須刷新頁面便可從服務器取得數據，但不必定是XML數據

 

2、操做：原生ajax和jQuery中封裝的ajax

一、原生ajax：

ajax做用：發送請求（設置請求setRequest） 接收響應(getResponse)

A、ajax原生方式發送請求：

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方法中傳遞

B、ajax原生方式接收響應：

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 };

C、處理響應數據：

 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 };

二、jQuery中封裝的ajax

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);

 

3、響應

咱們須要監聽服務器的響應狀態，而後對從服務器中獲取的數據作相應的處理。

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—服務不可用

 

關於服務器響應碼，詳情請看————網絡傳輸協議