一、Ajax簡介、優劣勢、應用場景以及技術 Ajax簡介 : AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 優點：

　　頁面無重新整理，使用者體驗好。

　　非同步通訊，更加快的響應能力。

　　減少冗餘請求，減輕了伺服器負擔

　　基於標準化的並被廣泛支援的技術，不需要下載外掛或者小程式

缺點：

　　ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。

　　存在一定的安全問題。

　　對搜尋引擎的支援比較弱。

　　破壞了程式的異常機制。

　　無法用URL直接訪問

ajax應用場景

• 場景 1. 資料驗證
• 場景 2. 按需取資料
• 場景 3. 自動更新頁面

二、建立ajax的步驟 Ajax的原理簡單來說通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。原生建立ajax可分為以下四步 1、建立XMLHttpRequest物件 Ajax的核心是XMLHttpRequest物件，它是Ajax實現的關鍵，傳送非同步請求、接受響應以及執行回撥都是通過它來完成 所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件。 建立 XMLHttpRequest物件的語法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用ActiveX 物件：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest物件。如果支援，則建立XMLHttpRequest物件。如果不支援，則建立ActiveXObject：

function showHint(str){ 
　　var xmlhttp; 
　　if (window.XMLHttpRequest) { 
　　　　// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 
　　　　xmlhttp=new XMLHttpRequest(); 
　　} else { 
　　　　// IE6, IE5 瀏覽器執行程式碼 
　　　　xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
　　}
}

2、準備請求 初始化該XMLHttpRequest物件，接受三個引數：

xhr.open(method,url,async);

第一個引數表示請求型別的字串，其值可以是GET或者POST。 get和post區別： 1.get方法資料請求放在url中，post所有操作隊使用者來說不可見 2.get請求傳輸資料小，post傳輸資料不受限制 3.get執行效率比post方法好 第二個引數是要作為請求傳送目標的URL。 第三個引數是true或false，表示請求是以非同步還是同步的模式發出。（預設為true，一般不建議為false）

• false：同步模式發出的請求會暫停所有javascript程式碼的執行，直到伺服器獲得響應為止，如果瀏覽器在連線網路時或者在下載檔案時出了故障，頁面就會一直掛起。
• true：非同步模式發出的請求，請求物件收發資料的同時，瀏覽器可以繼續載入頁面，執行其他javascript程式碼

3、傳送請求

xhr.send();

一般情況下，使用Ajax提交的引數多是些簡單的字串，可以直接使用GET方法將要提交的引數寫到open方法的url引數中，此時send方法的引數為null或為空。

xhr.open("GET",demo.php?name=tsrot&age=24,true); 
xhr.send(null);

如果需要像 HTML 表單那樣 POST 資料，請使用setRequestHeader()來新增 HTTP 頭。然後在send()方法中規定您希望傳送的資料：

xhr.open("POST",demo.php,true); 
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); 
xhr.send();

4、處理響應

xhr.onreadystatechange = function(){  
　　if(xhr.readyState == 4 && xhr.status == 200){  
　　　　console.log(xhr.responseText);  
　　} 
}

onreadystatechange ：當處理過程發生變化的時候執行下面的函式 readyState ：ajax處理過程 0：請求未初始化（還沒有呼叫open()）。 1：請求已經建立，但是還沒有傳送（還沒有呼叫send()）。 2：請求已傳送，正在處理中（通常現在可以從響應中獲取內容頭）。 3：請求在處理中；通常響應中已有部分資料可用了，但是伺服器還沒有完成響應的生成。 4：響應已完成；您可以獲取並使用伺服器的響應了。 status屬性：

• 200:”OK”
• 404: 未找到頁面

responseText：獲得字串形式的響應資料 responseXML：獲得 XML形式的響應資料 物件轉換為JSON格式使用JSON.stringify json轉換為物件格式用JSON.parse() 返回值一般為json字串，可以用JSON.parse(xhr.responseText)轉化為JSON物件 5、完整例子

var xhr = false;  
if(XMLHttpRequest){  
　　xhr = new XMLHttpRequest();  
}else{  
　　xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
}; 
if(xhr) {
　　//如果xhr建立失敗，還是原來的false 
　　xhr.open("GET","./data.json",true); 
　　xhr.send(); 
　　xhr.onreadystatechange = function(){ 
　　if(xhr.readyState == 4 && xhr.status == 200){ 
　　　　console.log(JSON.parse(xhr.responseText).name);  
　　}  
} 
data.json這個過程是一定要記在腦子裡的
function ajax(url, success, fail){  
　　// 1. 建立連線  var xhr = null;  
　　xhr = new XMLHttpRequest()  
　　// 2. 連線伺服器  
　　xhr.open('get', url, true)  
　　// 3. 傳送請求  
　　xhr.send(null);  
　　// 4. 接受請求  
　　xhr.onreadystatechange = function(){  
　　　　if(xhr.readyState == 4){  
　　　　　　if(xhr.status == 200){  
　　　　　　　　success(xhr.responseText);  
　　　　　　} else { 
　　　　　　　　// fail  
　　　　　　　　fail && fail(xhr.status);  
　　　　　　}  
　　　　}  
　　} 
}

談談JSONP 要訪問web伺服器的資料除了XMLHttpRequest外還有一種方法是JSONP 如果HTML和JavaScript與資料同時在同一個機器上，就可以使用XMLHttpRequest 什麼是JSONP？ JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式） JSONP有什麼用？ 由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、埠）的資源，為了實現跨域請求，可以通過script標籤實現跨域請求，然後在服務端輸出JSON資料並執行回撥函式，從而解決了跨域的資料請求 如何使用JSONP？ 在客戶端宣告回撥函式之後，客戶端通過script標籤向伺服器跨域請求資料，然後服務端返回相應的資料並動態執行回撥函式 用XMLHttpRequest時，我們得到一個字串；要用JSON.parse把字串轉化成物件，使用jsonp時，script標誌會解析並執行返回的程式碼，等我們處理資料時，已經是一個JavaScript物件了 簡單例項

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript">  
　　function jsonpCallback(result) {  
　　　　alert(result.a);  
　　　　alert(result.b);  
　　　　alert(result.c);  
　　　　for(var i in result) {  
　　　　　　alert(i+":"+result[i]);
　　　　　　//迴圈輸出a:1,b:2,etc.  
　　　　}  
　　} 
</script> 
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script> 
　　<!--callback引數指示生成JavaScript程式碼時要使用的函式jsonpcallback-->

注意瀏覽器的快取問題

• 在末尾增加一個隨機數可避免頻繁請求同一個連結出現的快取問題

三、 jQuery中的Ajax jQuery中的ajax封裝案例

//ajax請求後臺資料 
var btn = document.getElementsByTagName("input")[0]; 
btn.onclick = function(){     
　　ajax({//json格式  
　　　　type:"post",  
　　　　url:"post.php",  
　　　　data:"username=poetries&pwd=123456",  
　　　　asyn:true,  
　　　　success:function(data){  
　　　　　　document.write(data);  
　　　　}  
　　}); 
}

jQuery中的Ajax的一些方法 jquery對Ajax操作進行了封裝，在jquery中的$.ajax()方法屬於最底層的方法，第2層是load()、$.get()、$.post();第3層是$.getScript()、$.getJSON()，第2層使用頻率很高 load()方法 load()方法是jquery中最簡單和常用的ajax方法，能載入遠端HTML程式碼並插入DOM中 結構為：load(url,[data],[callback]) 使用url引數指定選擇符可以載入頁面內的某些元素 load方法中url語法：url selector 注意：url和選擇器之間有一個空格 傳遞方式 load()方法的傳遞方式根據引數data來自動指定，如果沒有引數傳遞，則採用GET方式傳遞，反之，採用POST 回撥引數 必須在載入完成後才執行的操作，該函式有三個引數 分別代表請求返回的內容、請求狀態、XMLHttpRequest物件 只要請求完成，回撥函式就會被觸發

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){  
　　//respnoseText 請求返回的內容  
　　//textStatus 請求狀態 ：sucess、error、notmodified、timeout  
　　//XMLHttpRequest 
})

load方法引數

引數名稱	型別	說明
url	String	請求HTML頁面的URL地址
data(可選)	Object	傳送至伺服器的key/value資料
callback(可選)	Function	請求完成時的回撥函式，無論是請求成功還是失敗

$.get()和$.post()方法 load()方法通常用來從web伺服器上獲取靜態的資料檔案。在專案中需要傳遞一些引數給伺服器中的頁面，那麼可以使用$.get()和$.post()或$.ajax()方法 注意：$.get()和$.post()方法是jquery中的全域性函式 $.get()方法 $.get()方法使用GET方式來進行非同步請求

結構為：$.get(url,[data],callback,type)

如果伺服器返回的內容格式是xml文件，需要在伺服器端設定Content-Type型別 程式碼如下：header("Content-Type:text/xml:charset=utf-8") //php $.get()方法引數解析

引數	型別	說明
url	String	請求HTML頁的地址
data(可選)	Object	傳送至伺服器的key/value資料會作為QueryString附加到請求URL中
callback(可選)	Function	載入成功的回撥函式（只有當Response的返回狀態是success才呼叫該方法）
type(可選)	String	伺服器返回內容的格式，包括xml、html、script、json、text和_default

$.post()方法 它與$.get()方法的結構和使用方式相同，有如下區別

• GET請求會將引數跟著URL後進行傳遞，而POST請求則是作為Http訊息的實體內容傳送給web伺服器，在ajax請求中，這種區別對使用者不可見
• GET方式對傳輸資料有大小限制（通常不能大於2KB），而使用POST方式傳遞的資料量要比GET方式大得多（理論不受限制）
• GET方式請求的資料會被瀏覽器快取起來，因此其他人可以從瀏覽器的歷史紀錄中讀取這些資料，如：賬號、密碼。在某種情況下，GET方式會帶來嚴重的安全問題，而POST相對來說可以避免這些問題
• GET和POST方式傳遞的資料在服務端的獲取也不相同。在PHP中，GET方式用$_GET[]獲取；POST方式用$_POST[]獲取;兩種方式都可用$_REQUEST[]來獲取

總結 使用load()、$.get()和$.post()方法完成了一些常規的Ajax程式，如果還需要複雜的Ajax程式，就需要用到$.ajax()方式 $.ajax()方法 $.ajax()方法是jquery最底層的Ajax實現，它的結構為$.ajax(options) 該方法只有一個引數，但在這個物件裡包含了$.ajax()方式所需要的請求設定以及回撥函等資訊，引數以key / value存在，所有引數都是可選的 $.ajax()方式常用引數解析

引數	型別	說明
url	String	(預設為當前頁地址)傳送請求的地址
type	String	請求方式（POST或GET）預設為GET
timeout	Number	設定請求超時時間（毫秒）
dataType	String	預期伺服器返回的型別。可用的型別如下 xml:返回XML文件，可用jquery處理 html:返回純文字的HTML資訊，包含的script標籤也會在插入DOM時執行 script：返回純文字的javascript程式碼。不會自動快取結果，除非設定cache引數。注意：在遠端請求時，所有的POST請求都將轉為GET請求 json:返回JSON資料 jsonp:JSONP格式，使用jsonp形式呼叫函式時，例如：myurl?call back=?,jquery將自動替換後一個？為正確的函式名，以執行回撥函式 text:返回純文字字串
beforeSend	Function	傳送請求前可以修改XMLHttpRequest物件的函式，例如新增自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請求。XMLHttpRequest物件是唯一的引數 function(XMLHttpRequest){ this;//呼叫本次Ajax請求時傳遞的options引數 }
complete	Function	請求完成後的回撥函式（請求成功或失敗時都呼叫） 引數：XMLHttpRequest物件和一個描述成功請求型別的字串 function(XMLHttpRequest,textStatus){ this;//呼叫本次Ajax請求時傳遞的options引數 }
success	Function	請求成功後呼叫的回撥函式，有兩個引數 (1)由伺服器返回，並根據dataTyppe引數進行處理後的資料 (2)描述狀態的字串 function(data,textStatus){ //data可能是xmlDoc、``jsonObj、html、text等 this;//呼叫本次Ajax請求時傳遞的options引數 }
error	Function	請求失敗時被呼叫的函式
global	Boolean	預設為true。表示是否觸發全域性Ajax事件，設定為false將不會觸發。AjaxStart或AjaxStop可用於控制各種Ajax事件