一般来说我们使用jquery的ajax来跨域请求API数据的时候每次请求,就只能请求一组数据,而且当我们再次点击发送ajax请求的时候,新请求的数据会覆盖掉原来的数据,那么如何每次在请求的数据的时候,保留我们上次请求的数据呢?
做法很简单,声明全局变量,把每次请求的数据,缓存起来,这样有两个好处,一个是减少http请求,降低交互事件,另一个是方便我们查询历史数据。
下面是我们一般使用jquery发送ajax请求的代码片段:
1 function testData(arg){ 2 $.ajax({ 3 type:'get',//请求方式 4 url:'',//api地址 5 dataType:'jsonp',//使用jsonp来开始跨域 6 jsonpCallback:'Callback',//跨域需要的回调函数 7 success:function(data){ 8 // 请求数据成功后的调用的函数 9 // data就是我们要获取的参数 10 } 11 }) 12 }
其实通过上面代码我们很容就能看出,我们每次调用方法,发送ajax请求,都会获得一组全新的数据,因为参数data是每发送一次的请求,就会携带一组新的数据给我们!这就是问题所在:
那么我们对下面的代码进行改造:
1 var items = {}; 2 var results = []; 3 function testData(arg){ 4 $.ajax({ 5 type:'get',//请求方式 6 url:'',//api地址 7 dataType:'jsonp',//使用jsonp来开始跨域 8 jsonpCallback:'Callback',//跨域需要的回调函数 9 success:function(data){ 10 // 请求数据成功后的调用的函数 11 // data就是我们要获取的参数 12 // 一般API的结构是对象里面包含对象数组 13 // 那么首先我们先把我们想要的数据,以对象的形式的添加到数组中 14 results.push({ 15 foo:data.foo, 16 bar:data.bar, 17 name:data.name 18 }) 19 // 其次再把这个数组当成对象的属性,添加到一个空对对象中,这样就实现了数据的缓存 20 items = { 21 results:results 22 } 23 } 24 }) 25 }