Javascript 如何防止重新蚀刻AJAX数据?
我使用的是javascript,但不是jQuery 假设我的数据库中有3个用户[Kim、Ted、Box]和3个按钮,如下所示:Javascript 如何防止重新蚀刻AJAX数据?,javascript,ajax,Javascript,Ajax,我使用的是javascript,但不是jQuery 假设我的数据库中有3个用户[Kim、Ted、Box]和3个按钮,如下所示: <button class="user">Kim</button> <button class="user">Ted</button> <button class="user">Box</button> <div id="displayArea"></div> Kim 特德
<button class="user">Kim</button>
<button class="user">Ted</button>
<button class="user">Box</button>
<div id="displayArea"></div>
Kim
特德
盒子
如果一个人单击任何按钮,它将在div中显示用户信息
假设我单击Kim按钮,它使用ajax并显示Kim的信息。现在我点击Ted,它还调用一个新的ajax函数来获取数据。但是当我再次单击Kim时,我调用新的ajax函数来获取数据,而不是从缓存或某个地方获取数据。如果之前加载了数据,我如何在不从ajax函数获取数据的情况下实现它
我之所以需要这样做,是因为我不希望用户等待再次获取之前加载的数据。通过创建一个函数来添加一个抽象级别,该函数负责缓存并从缓存返回数据或发出Ajax请求。例如:
var getDataForUser = (function() {
/**
* We use an object as cache. The user names will be keys.
* This variable can't be accessed outside of this function
*/
var cache = {};
/**
* The function that actually fetches the data
*/
return function getDataForUser(user, callback) {
if (cache.hasOwnProperty(user)) { // cache hit
callback(cache[user]);
} else {
// somehow build the URL including the user name
var url = ...;
makeAjaxRequest(url, function(data) { // cache miss
cache[user] = data; // store in cache
callback(data);
});
}
};
}());
然后你打电话
getDataForUser('John', function(data) { /*...*/ });
两次,第二次将命中缓存。只需将加载的数据存储在局部变量中即可。如果新数据已经在局部变量中,则不要获取它。AJAX调用可能最终从浏览器的缓存中获取数据,这取决于原始响应返回的缓存指令。这正是我想要的。对不起,我的语法错误,因为我是中国人=)无论如何,谢谢。