模拟jQuery简单封装ajax
1 /*模拟jQuery的写法 (简单写法)*/ 2 var $={}; 3 /*ajax*/ 4 $.ajax = function (options) { 5 /* 6 * 请求 7 * 1.请求接口 type get post 默认的是get 决定是否设置请求头 8 * 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径 9 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求 10 * 4.提交数据 data 默认的是对象 {name:'XXX',age:'19'} 默认是{} 11 * 12 * 响应 13 * 1.成功回调函数 success 代表的是一个函数 用来处理成功之后的业务逻辑的函数 14 * 1.1 字符串 xml json格式的字符串 数据转换 15 * 2.失败回调函数 error 代表的是一个函数 用来处理失败之后的业务逻辑的函数 16 * 2.1 返回一些错误信息 17 * */ 18 19 20 21 22 /*处理默认参数*/ 23 if(!options || typeof options != 'object') return false; 24 /*如果没有传 使用默认的get方式提交*/ 25 var type = options.type || 'get'; 26 /*如果没有传 使用默认的当前路径*/ 27 var url = options.url || location.pathname; 28 /*强制 是false的时候就是同步 否则都是异步*/ 29 var async = options.async === false?false:true; 30 /*如果没有就是空对象*/ 31 var data = options.data || {}; 32 /*对象是无法进行传输 {name:'',age:''} 拼接字符串 name=xzz&age=18*/ 33 var dataStr = ''; 34 for(var key in data){ 35 dataStr+=key+'='+data[key]+'$'; 36 } 37 dataStr = dataStr && dataStr.slice(0,-1); 38 39 /*ajax封装编程*/ 40 /*初始化*/ 41 var xhr = new XMLHttpRequest(); 42 xhr.open(type,type == 'get'?url+'?'+dataStr:url,async); 43 /*请求头*/ 44 if(type == 'post'){ 45 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 46 } 47 /*请求主体*/ 48 xhr.send(type=='get'?null:dataStr); 49 50 51 52 /*响应*/ 53 xhr.onreadystatechange = function () { 54 /*一定要完全完成通讯*/ 55 if(xhr.readyState == 4){ 56 if(xhr.status == 200){ 57 /*请求成功*/ 58 /*字符串 xml josn格式的字符串 数据转换*/ 59 /*获取响应类型*/ 60 var contentType = xhr.getResponseHeader("Content-Type"); 61 var result = null; 62 63 if(contentType.indexOf('xml')>-1){ 64 /*xml*/ 65 result = xhr.responseXML; 66 }else if(contentType.indexOf('json')>-1){ 67 /*json*/ 68 result = JSON.parse(xhr.responseText); 69 }else{ 70 /*string*/ 71 result = xhr.responseText; 72 } 73 options.success && options.success(result); 74 75 }else{ 76 /*请求失败*/ 77 options.error && options.error({status:xhr.status,statusText:xhr.statusText}); 78 } 79 } 80 } 81 }; 82 83 /*get*/ 84 $.get = function (options) { 85 options.type = 'get'; 86 $.ajax(options); 87 } 88 /*post*/ 89 $.get = function (options) { 90 options.type = 'post'; 91 $.ajax(options); 92 }
注：简单写法，仅供参考。
