首页 > 代码库 > 原生js封装ajax代码

原生js封装ajax代码

 

1、ajax函数封装:

 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 =http://www.mamicode.com/== object){ //处理 data 35 var str = ‘‘; 36 var value = http://www.mamicode.com/‘‘; 37 for(var key in defaults.data){ 38 value =http://www.mamicode.com/ defaults.data[key]; 39 if( defaults.data[key].indexOf(&) !== -1 ) value = http://www.mamicode.com/defaults.data[key].replace(/&/g, escape(&)); //对参数中有&进行兼容处理 40 if( key.indexOf(&) !== -1 ) key = key.replace(/&/g, escape(&)); //对参数中有&进行兼容处理 41 str += key + = + value + &; 42 } 43 defaults.data = http://www.mamicode.com/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 }

 

2、ajax函数调用:

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

 

转摘于:http://www.cnblogs.com/Ivangel/p/3825701.html?utm_source=tuicool&utm_medium=referral

感谢原作者

 

原生js封装ajax代码