Ajax 如果没有缓存可用则请求
Ajax request if no cache is available
我是 JavaScript/jQuery 的新手,我认为我的问题并不难解决。
我想在会话中缓存一个变量(列表),如果之前未缓存该列表,则应发出 ajax 请求。
我的问题是 globalList
在 ajax 请求之后为空,所以我想我必须等待完成请求,但我不确定该怎么做。
var globalList;
function initStuff() {
globalList = JSON.parse(sessionStorage.getItem('globalList'));
// if no cached variable is available, get it via ajax request
if (!globalList) {
$.getJSON('jsonGetStuff.htm', function (data) {
sessionStorage.setItem('globalList', JSON.stringify(data));
globalList = JSON.stringify(data);
});
}
// null, if no cached value is available
console.log("globalList=" + globalList);
// TODO: process 'globalList'
}
当您的 url 对于浏览器是唯一的时,您的请求响应将不会被缓存。众所周知,练习使用它就像 "your.domain.com/some/uri?{timestamp}".
试试这个:
var globalList;
function initStuff() {
globalList = JSON.parse(sessionStorage.getItem('globalList'));
// if no cached variable is available, get it via ajax request
if (!globalList) {
$.getJSON('jsonGetStuff.htm?' + (new Date()).getTime(), function (data) {
sessionStorage.setItem('globalList', JSON.stringify(data));
globalList = JSON.stringify(data);
});
}
// null, if no cached value is available
console.log("globalList=" + globalList);
// TODO: process 'globalList'
}
而且 jquery 有 cache: false 特性(参考:http://www.w3schools.com/jquery/ajax_ajaxsetup.asp):
$(function() {
$.ajaxSetup({ cache: false });
});
但我喜欢像上面第一个例子那样做。
或更好的:
$.ajax({
cache: false,
url: "jsonGetStuff.htm",
method: "GET",
dataType: "json",
success: function(data) {
sessionStorage.setItem('globalList', JSON.stringify(data));
globalList = JSON.stringify(data);
}
});
这是适合您的示例代码:
var jqxhr = $.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function() {
console.log( "second complete" );
});
您可以根据需要进行必要的更改。
我是 JavaScript/jQuery 的新手,我认为我的问题并不难解决。
我想在会话中缓存一个变量(列表),如果之前未缓存该列表,则应发出 ajax 请求。
我的问题是 globalList
在 ajax 请求之后为空,所以我想我必须等待完成请求,但我不确定该怎么做。
var globalList;
function initStuff() {
globalList = JSON.parse(sessionStorage.getItem('globalList'));
// if no cached variable is available, get it via ajax request
if (!globalList) {
$.getJSON('jsonGetStuff.htm', function (data) {
sessionStorage.setItem('globalList', JSON.stringify(data));
globalList = JSON.stringify(data);
});
}
// null, if no cached value is available
console.log("globalList=" + globalList);
// TODO: process 'globalList'
}
当您的 url 对于浏览器是唯一的时,您的请求响应将不会被缓存。众所周知,练习使用它就像 "your.domain.com/some/uri?{timestamp}".
试试这个:
var globalList;
function initStuff() {
globalList = JSON.parse(sessionStorage.getItem('globalList'));
// if no cached variable is available, get it via ajax request
if (!globalList) {
$.getJSON('jsonGetStuff.htm?' + (new Date()).getTime(), function (data) {
sessionStorage.setItem('globalList', JSON.stringify(data));
globalList = JSON.stringify(data);
});
}
// null, if no cached value is available
console.log("globalList=" + globalList);
// TODO: process 'globalList'
}
而且 jquery 有 cache: false 特性(参考:http://www.w3schools.com/jquery/ajax_ajaxsetup.asp):
$(function() {
$.ajaxSetup({ cache: false });
});
但我喜欢像上面第一个例子那样做。
或更好的:
$.ajax({
cache: false,
url: "jsonGetStuff.htm",
method: "GET",
dataType: "json",
success: function(data) {
sessionStorage.setItem('globalList', JSON.stringify(data));
globalList = JSON.stringify(data);
}
});
这是适合您的示例代码:
var jqxhr = $.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
// Perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function() {
console.log( "second complete" );
});
您可以根据需要进行必要的更改。