ajax
ajax简介
简单的说Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readyState):
0-未初始化、1-正在初始化、2-发送数据、3-正在发送数据、4-完成。
当XMLHttpRequest.readyState为4时,表示ajax请求已经完成可以得到响应结果。
ajax的success和error方法根据响应状态码来触发。当XMLHttpRequest.status为200的时候,表示响应成功,此时触发success(),其他状态码则触发error()。
除了根据响应状态码外,ajax还会在下列情况下走error方法:
返回数据类型不是JSON(所以集合类型的数据一定不能为null)
网络中断
后台响应中断
$.ajax({ url:url, dataType:'json', //告诉服务器返回的数据一定要是json,否则执行error函数 data:{}, type:'post', success:function(data){ }, error:function(){ } });
ajax封装
/*ajax封装*/ jQuery.ax = function(url, data, type, successfn, errorfn, async) { success_fn = successfn; //防止ax执行完回收successfn,所以赋给全局success_fn error_fn = errorfn; var contentType = "application/x-www-form-urlencoded; charset=utf-8"; //或者"application/json; charset=utf-8";根据后台架构来 var contype_application = "application/x-www-form-urlencoded"; if ((data == null || data == "" || typeof(data) == "undefined")) { $.ajax({ type: type, async: async, url: url, dataType: "json", beforeSend: function(request) { request.setRequestHeader("Content-type", contype_application); }, contentType: contentType, success: function(d) { successfun(d) }, error: function(e) { errorfn(e); } }); } else { $.ajax({ type: type, async: async, url: url, data: data, //根据后台处理机制,也可以写成JSON.stringify(data) dataType: "json", contentType: contentType, beforeSend: function(request) { request.setRequestHeader("Content-type", contype_application); }, success: function(d) { success_fn(d) }, error: function(e) { error_fn(e); } }); } }
参数
url : ajax请求的url
data : 请求参数
type: GET或者POST
successfn : 成功函数
errorfn : 失败函数
async : 是否异步,异步true,同步false
调用
var data = {id:module.id,modulename:'未命名'}; $.ax('./permission/insertSelective', data, 'POST', function(d) { /*success*/ }, function(e) { /*error*/ }, false); //同步
注意事项
同步问题
async默认为true(异步),如果设为false时会变为同步,同步时会锁定浏览器;设为同步时注意ajax上面的函数执行,如果上面函数未执行完,ajax开始执行就直接锁定浏览器无法执行,得等到执行完毕时才能执行上面的代码;在ajax导出前进度条展示时尤为重要(展示进度条时如果用函数,ajax一定不要用同步)。
解决同步问题可以设为异步async:true或者用jquery的when() then()
$.when( //先执行 ).then(function(data, textStatus, jqXHR){ //后执行 });
如果这篇文章对你有用,可以关注本人微信公众号获取更多ヽ(^ω^)ノ ~
![微信公众号二维码](https://images.cnblogs.com/cnblogs_com/aeolian/1679458/o_wechat_gzh_qrcode.jpg)