自己封装的ajax
/** * ITCAST WEB * Created by lsy on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 请求内容的格式 contentType * 5. 传输的数据 data json对象 * * 6.响应成功处理函数 success function * 7.响应失败的处理函数 error function * * 这些都是动态参数 参数对象 options * */ /*封装一个函数*/ window.$ = {}; /*申明一个ajax的方法*/ $.ajax = function(options){ if(!options || typeof options != 'object'){ return false; } /*请求的类型*/ var type = options.type || 'get';/*默认get*/ /*请求地址 */ var url = options.url || location.pathname;/*当前的地址*/ /*是异步的还是同步的 */ var async = (options.async === false)?false:true;/*默认异步*/ /*请求内容的格式 */ var contentType = options.contentType || "text/html"; /*传输的数据 */ var data = options.data || {};/*{name:'',age:''}*/ /*在提交的时候需要转成 name=xjj 这种格式*/ var dataStr = ''/*数据字符串*/ for(var key in data){ dataStr += key+'='+data[key]+'&'; } dataStr = dataStr && dataStr.slice(0,-1); /*ajax 编程*/ var xhr = new XMLHttpRequest(); /*请求行*/ /*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/ xhr.open(type,(type=='get'?url+'?'+dataStr:url),async); /*请求头*/ if(type == 'post'){ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); } /*请求主体*/ /*需要判断请求类型*/ xhr.send(type=='get'?null:dataStr); /*监听响应状态的改变 响应状态*/ xhr.onreadystatechange = function(){ /*请求响应完成并且成功*/ if(xhr.readyState == 4 && xhr.status == 200){ /*success*/ var data = ''; var contentType = xhr.getResponseHeader('Content-Type'); /*如果我们服务器返回的是xml*/ if(contentType.indexOf('xml') > -1){ data = xhr.responseXML; } /*如果我们的服务器返回的是json字符串*/ else if(contentType.indexOf('json') > -1){ /*转化json对象*/ data = JSON.parse(xhr.responseText); } /*否则的话他就是字符串*/ else{ data = xhr.responseText; } /*回调 成功处理函数*/ options.success && options.success(data); } /*计时请求xhr.status不成功 他也需要的响应完成才认作是一个错误的请求*/ else if(xhr.readyState == 4){ /*error*/ options.error && options.error('you request fail !'); } } } $.post = function(options){ options.type = 'post'; $.ajax(options); } $.get = function(options){ options.type = 'get'; $.ajax(options); }