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){
   //后执行
});