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,请望指正； 水平有限，欢迎拍砖~~