Ajax

轻松搞定Ajax（分享下自己封装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 });