首页 > 代码库 > 原生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代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。