添加一个 AJAX 预加载器
这是一种在执行 AJAX 调用时显示 GIF 预加载器的方法。我们需要准备添加和删除预加载器功能:
function addPreloader() {
// if the preloader doesn't already exist, add one to the page
if(!document.querySelector('#preloader')) {
var preloaderHTML = '<img id="preloader" src="https://goo.gl/cNhyvX" />';
document.querySelector('body').innerHTML += preloaderHTML;
}
}
function removePreloader() {
// select the preloader element
var preloader = document.querySelector('#preloader');
// if it exists, remove it from the page
if(preloader) {
preloader.remove();
}
}
现在我们来看看在哪里使用这些功能。
var request = new XMLHttpRequest();
在 onreadystatechange
函数中你应该有一个条件为:request.readyState == 4 && request.status == 200
的 if 语句。
如果为 true :请求已完成且响应准备就绪,我们将使用 removePreloader()
。
否则,如果为 false :请求仍在进行中,在这种情况下,我们将运行 addPreloader()
函数
xmlhttp.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
// the request has come to an end, remove the preloader
removePreloader();
} else {
// the request isn't finished, add the preloader
addPreloader()
}
};
xmlhttp.open('GET', your_file.php, true);
xmlhttp.send();