Ajax的概述與實現過程_基礎知識

一、ajax概述

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和jQuery中封裝的ajax

1、原生ajax：

ajax作用：發送請求（佈建要求setRequest） 接收響應(getResponse)

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

Ajax中最重要也是最固定的部分就是http請求。

1)建立串連：（IE7及以上版本都支援XMLHttpRequest）

var xhr = new XMLHttpRequest(); //建立非同步請求對象

2)Get請求：格式必須是（url?name1=value1&name2=value2）

xhr.open("get","01-register.php?name="+name);//初始化非同步get請求xhr.send(null); //與伺服器建立串連

3)Post請求

xhr.open('post','01-XMLHTTPRequest-test.php');//請求報文行xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post請求佈建要求頭*/xhr.send('name=rose&age=20'); //請求報文體

4)get和post請求的區別：

★get不需要佈建要求頭，而post需要佈建要求頭

★get的資料傳遞通過url進行，而post的資料在send方法中傳遞

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

/*監聽伺服器的響應*/xhr.onreadystatechange=function(){/*判斷當前的響應是否成功 1.伺服器做出了響應 2.響應的結果是正確的*/ if(xhr.status==200 && xhr.readyState==4){ var result=xhr.responseText; console.log(result); //輸出從伺服器中擷取到的資料 //接下來就可以對資料進行相應的處理了 } };

C、處理響應資料：

 /*監聽*/ xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyState==4){ /*判斷狀態*/ var result; /*擷取響應報文中的Content-Type*/ var ct=xhr.getResponseHeader("Content-Type"); /*判斷Content-Type,進行資料的解析*/ if(ct.indexOf("xml") != -1){ result=xhr.responseXML; } else if(ct.indexOf("json") !=-1){ result=JSON.parse(xhr.responseText); } else{ result=xhr.responseText; } /*調用回呼函數--委託--代理*/ success && success(result); } };

 jQuery中封裝的ajax

 $.ajax({ type: 請求方式(get/post), url: "register.php", data: 發送請求資料, beforeSend:function(){返回false可以取消本次ajax請求}, success:function(result){ 成功響應後調用 }, error:function(err){ 錯誤響應時調用 }, complete:function(){ 響應完成時調用(包括成功和失敗) } });

jQuery中提供了專門的方法來序列化表單：

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

關於伺服器響應碼，詳情請看————網路傳輸協議（http協議）

以上就是本文的內容，有需要的可以看下，希望對大家有所協助。謝謝對雲棲社區的支援！