关于ajax跨域请求API数据的一些问题

时间:2023-03-09 17:37:31
关于ajax跨域请求API数据的一些问题

  一般来说我们使用jquery的ajax来跨域请求API数据的时候每次请求,就只能请求一组数据,而且当我们再次点击发送ajax请求的时候,新请求的数据会覆盖掉原来的数据,那么如何每次在请求的数据的时候,保留我们上次请求的数据呢?

  做法很简单,声明全局变量,把每次请求的数据,缓存起来,这样有两个好处,一个是减少http请求,降低交互事件,另一个是方便我们查询历史数据。

  下面是我们一般使用jquery发送ajax请求的代码片段:

 function testData(arg){
$.ajax({
type:'get',//请求方式
url:'',//api地址
dataType:'jsonp',//使用jsonp来开始跨域
jsonpCallback:'Callback',//跨域需要的回调函数
success:function(data){
// 请求数据成功后的调用的函数
// data就是我们要获取的参数
}
})
}
其实通过上面代码我们很容就能看出,我们每次调用方法,发送ajax请求,都会获得一组全新的数据,因为参数data是每发送一次的请求,就会携带一组新的数据给我们!这就是问题所在:

  那么我们对下面的代码进行改造:

 var items = {};
var results = [];
function testData(arg){
$.ajax({
type:'get',//请求方式
url:'',//api地址
dataType:'jsonp',//使用jsonp来开始跨域
jsonpCallback:'Callback',//跨域需要的回调函数
success:function(data){
// 请求数据成功后的调用的函数
// data就是我们要获取的参数
// 一般API的结构是对象里面包含对象数组
// 那么首先我们先把我们想要的数据,以对象的形式的添加到数组中
results.push({
foo:data.foo,
bar:data.bar,
name:data.name
})
// 其次再把这个数组当成对象的属性,添加到一个空对对象中,这样就实现了数据的缓存
items = {
results:results
}
}
})
}