輕鬆搞定Ajax（分享下自己封裝ajax函數，其實Ajax使用很簡單，難是難在你得到資料後來怎樣去使用這些資料）

標籤：style   blog   http   java   color   使用   

hey,guys!今天我們一起討論下ajax吧！此文只適合有一定ajax基礎，但還是模糊狀態的同志，當然高手也可以略過~~~

一、概念

Ajax(Asynchronous Javascript + XML（非同步JavaScript和XML ）)

 

二、效果

實現無重新整理效果，向後台非同步取資料（不是只有AJAX才能實現這樣的效果的哦，如img , script標籤中的src屬性也可以實現一樣的效果，可以自己嘗試一下哦）

 

三、本質

可能我們在學習過程中會覺得ajax好難，我也是這樣過來的，我覺得是我們把重心放錯了。

因為ajax用起來是很方便的（只是寫一下請求地址，請求方式，是否非同步），我們之所以覺得難，很大一部分原因是因為我們不清楚ajax內部的工作原理。我們應該把重心放在取資料後怎樣去用這些資料。

OK,那ajax的本質是什麼呢？？

ajax的目的還是去背景甘個路徑取資料，取檔案，就像是img/srcipt標籤一樣，走的還是http協議！

所以，如果你想瞭解ajax的工作原理，最好是看一下http協議，因為ajax裡面所設定的參數，都是為了遵循http協議才這樣寫的。

也不多說了，直接介紹一個我看過比較靠譜，說得很不錯的視頻教程，大家可以去下載學習哦（不是打廣告~~真心說得好~~嘻嘻）http://pan.baidu.com/s/1vg4hi

 

四、總結

還是那句，ajax使用並不難，理解過後封一個ajax函數直接取資料就行，  難的是你取到資料後怎樣去利用這些資料去進一步的開發。

ajax運用例子： 留言本，瀑布流等等，這些取資料的方式是一樣的，但對資料進行處理才是重點。

ajax就像是你用script標籤去引入JQ一樣，這個是很簡單的，但引入來之後你怎麼用才是重點。

 

OK,下面分享下我自己封裝的ajajx函數（有詳細注釋的哦~~），用法和JQ的ajax相似，當然沒JQ的那麼完善，但基本夠用了。

 

 1 /* 2  *author: Ivan 3  *date: 2014.06.01 4  *參數說明： 5  *opts: {‘選擇性參數‘} 6  **method: 請求方式:GET/POST,預設值:‘GET‘; 7  **url:    發送請求的地址, 預設值: 當前頁地址; 8  **data: string,json; 9  **async: 是否非同步:true/false,預設值:true;10  **cache: 是否緩衝：true/false,預設值:true;11  **contentType: HTTP頭資訊，預設值：‘application/x-www-form-urlencoded‘;12  **success: 請求成功後的回呼函數;13  **error: 請求失敗後的回呼函數;14 */15 function ajax(opts){16     //一.設定預設參數17     var defaults = {    18             method: ‘GET‘,19                url: ‘‘,20               data: ‘‘,        21              async: true,22              cache: true,23        contentType: ‘application/x-www-form-urlencoded‘,24            success: function (){},25              error: function (){}26         };    27 28     //二.使用者參數覆蓋預設參數    29     for(var key in opts){30         defaults[key] = opts[key];31     }32 33     //三.對資料進行處理34     if(typeof defaults.data === ‘object‘){    //處理 data35         var str = ‘‘;36         for(var key in defaults.data){37             str += key + ‘=‘ + defaults.data[key] + ‘&‘;38         }39         defaults.data = str.substring(0, str.length - 1);40     }41 42     defaults.method = defaults.method.toUpperCase();    //處理 method43 44     defaults.cache = defaults.cache ? ‘‘ : ‘&‘ + new Date().getTime() ;//處理 cache45 46     if(defaults.method === ‘GET‘ && (defaults.data || defaults.cache))    defaults.url += ‘?‘ + defaults.data + defaults.cache;    //處理 url    47     48     //四.開始編寫ajax49     //1.建立ajax對象50     var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);51     //2.和伺服器建立聯絡，告訴伺服器你要取什麼檔案52     oXhr.open(defaults.method, defaults.url, defaults.async);53     //3.發送請求54     if(defaults.method === ‘GET‘)    55         oXhr.send(null);56     else{57         oXhr.setRequestHeader("Content-type", defaults.contentType);58         oXhr.send(defaults.data);59     }    60     //4.等待伺服器回應61     oXhr.onreadystatechange = function (){62         if(oXhr.readyState === 4){63             if(oXhr.status === 200)64                 defaults.success.call(oXhr, oXhr.responseText);65             else{66                 defaults.error();67             }68         }69     };70 }

 

調用方式：

如   

 1 ajax({ 2  3 　　url: ‘1.php‘, 4  5 　　data: {name: ‘ivan‘, sex: ‘male‘, age: ‘23‘}, 6  7 　　success: function (data){ alert(‘返回資料是：‘ + data); } 8  9 });10 11 ajax({12 13 　　url: ‘1.php‘,14 15 　　data: ‘name=ivan&sex=male&age=23‘,16 17 　　cache: false,18 19 　　success: function (data){ alert(‘返回資料是：‘ + data); }20 21 });

 

如有bug,請望指正； 水平有限，歡迎拍磚~~