jquery使用（一）：ajax

一、ajax基本参数配置

$.ajax({
    //请求类型
    type:"get",
    //接口地址
    url:"----",
    //超时设置（如果请求时间超过设置时间就会走err回调）
    timeout:3000,
    //除了异步和javascript默认是false，其它类型均默认true。如果不需要缓存需进行设置
    cache:"false", 
    // (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
    async: "false",
    // 请求之前执行的函数
    beforeSend:function(){},
    success:function(data){},
    // 报错或者请求超过设置的timeout时间均会执行error函数
    error:function(err){}, 
    //无论请求成功或者失败都算完成
    complete:function(){}  
})

二、ajax数据缓存优化

1.$.ajax不缓存版:

要解决：清除缓存，可以有三种解决方法：
1、在请求的参数后面加上时间，如：

$.ajax({  
    type : "get",  
    url : "http://search.json?t="+new Date(),  
    dataType : "json",  
    success : function(json) {  
    }  
});  
//这样由于每次请求的参数有所不同，程序不会从浏览器里面读取缓存。

2、在ajax请求时候加上cache:false的参数，如：

$.ajax({
    type:"GET"
    url:'test.html',
    cache:false,
    dataType:"html",
    success:function(msg){
        alert(msg);
    }
});
//cache设置为 false 将不会从浏览器缓存中加载请求信息。

3、将ajax请求类型改为post，如：

$.ajax({  
   type : "post",  
   url : "http://search.json",  
   dataType : "json",  
   success : function(json) {  
   }  
});  
//POST请求，浏览器则认为是一个变动性访问（浏览器认为POST的提交必定是有改变的），所以每次都是重新发送请求。

2.$.ajax缓存版,解决请求多次接口的问题

限制请求ajax.png

如上图：切换借款人和出借人的时候，出现多次访问接口，影响性能。

var flag = false;
var cache={};
function getscale(usertype) {
    //首先根据用户的行为判断是否已经请求过数据，如果请求过就在本地的缓存数组中拿到数据，否则就是请求接口获取数据并添加到缓存
    if(usertype in cache){
          //在缓存数据中拿到用户需要的数据
          var data = cache[usertype];
          console.log("缓存中的数据："+data);         
     } else {
        if(!flag){
        $.ajax({
            url:"/data/borrowData",
            type:"post",
            cache:true,
            data:{usertype:usertype},
            beforeSend: function(){
                flag = true;
            },  
            success:function (data) {
                //通过后台请求到数据；保存在本地缓存对象中
                var data = JSON.parse(data);
                cache[usertype]=data;
                console.log("请求成功的数据："+date);
            };             
            complete: function(){
              flag = false;
            }
        })
    }
}

说明：var cache={};if(usertype in cache){var data = cache[usertype]; };如果缓存中有数据，则data直接调缓存就好。cache:true, cache[usertype]=data;如果缓存中没有的话，直接把data添加进缓存。哈哈，这样修改的话，url:"/data/borrowData"这个接口就不会不断请求了

四、ajax常见问题解决

1.jquery ajax超时设置

var ajaxTimeoutTest = $.ajax({
      url:'',       //请求的URL
      timeout : 1000，//超时时间设置，单位毫秒
　　type : 'get',  //请求方式，get或post
　　data :{},  //请求所传参数，json格式
　　dataType:'json',//返回的数据格式
　　success:function(data){ //请求成功的回调函数
　　　　alert("成功");
　　},
　　complete : function(XMLHttpRequest,status){ 
            //请求完成后最终执行参数
             if(status=='timeout'){
            //超时,status还有success,error等值的情况
             ajaxTimeoutTest.abort();
             alert("超时");}}
   });
//设置timeout的时间，通过检测complete时status的值判断请求是否超时，如果超时执行响应的操作。

2. 乱码问题

html文件一般采用UTF-8编码，而js文件一般采用GBK编码，这样输出中文时容易出现乱码问题。
解决乱码可以：
(1)在script标签中加上charset="GBK"
(2)将js文件另存为UTF-8编码
发送请求时如果客户端服务器端以及js的编码不一致也会有乱码的问题，解决办法是首先将多个文件统一编码。如果还有问题，需要在文件中硬编码加下charset设置。

jquery使用（一）：ajax