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'){ //處理 data 35 var str = ''; 36 var value = ''; 37 for(var key in defaults.data){ 38 value = defaults.data[key]; 39 if( defaults.data[key].indexOf('&') !== -1 ) value = defaults.data[key].replace(/&/g, escape('&')); //對參數中有&進行兼容處理 40 if( key.indexOf('&') !== -1 ) key = key.replace(/&/g, escape('&')); //對參數中有&進行兼容處理 41 str += key + '=' + value + '&'; 42 } 43 defaults.data = str.substring(0, str.length - 1); 44 } 45 46 defaults.method = defaults.method.toUpperCase(); //處理 method 47 48 defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//處理 cache 49 50 if(defaults.method === 'GET' && (defaults.data || defaults.cache)) defaults.url += '?' + defaults.data + defaults.cache; //處理 url 51 52 //四.開始編寫ajax 53 //1.創建ajax對象 54 var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 55 //2.和服務器建立聯系，告訴服務器你要取什么文件 56 oXhr.open(defaults.method, defaults.url, defaults.async); 57 //3.發送請求 58 if(defaults.method === 'GET') 59 oXhr.send(null); 60 else{ 61 oXhr.setRequestHeader("Content-type", defaults.contentType); 62 oXhr.send(defaults.data); 63 } 64 //4.等待服務器回應 65 oXhr.onreadystatechange = function (){ 66 if(oXhr.readyState === 4){ 67 if(oXhr.status === 200) 68 defaults.success.call(oXhr, oXhr.responseText); 69 else{ 70 defaults.error(); 71 } 72 } 73 }; 74 }
調用方式：
如
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,請望指正； 水平有限，歡迎拍磚~~