在ajax加载时创建加载图像

Question

这是我的代码.我正在尝试插入一个图像来显示ajax正在加载,但我无法做到这一点; 我尝试了很多可能的方法,但它只是不起作用.有关该怎么办的任何建议？

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
$("#main_result").empty().html('<img src="loading.gif" />');

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;
var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item;
ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true);
ajaxRequest.send(null);

Answer 1

你可以通过几种不同的方式来解决这个问题

1. 预加载图像并在发送请求时创建元素,并在完成后将其销毁
2. 与文档一起创建它,然后隐藏它直到发送请求,然后在完成后再次隐藏它
3. 两者的结合:在javascript中预加载和创建元素,并从那里隐藏/显示每个请求/完成时的元素.

#1当请求很少发送时,可能是最优选的,因为它不会干扰文档的负载,而是在完成其他所有操作后加载.由于创建/销毁元素比简单地隐藏/显示元素需要更多的处理时间,因此这不是推荐的方法.

#2经常发送请求时首选,因为您将经常使用加载程序映像,因此无需创建/销毁它,只需从一开始就可以使用它.我推荐这种方法.

#3当你想要安全地玩时,首选.在页面加载完成之前,这不会加载图像,只需要很少的处理时间.

示例#1 | 码

HTML

<div id='content'></div>

使用Javascript

var PreloadIt = new Image(441,291);
PreloadIt.src="loader.gif";

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById('content').removeChild(document.getElementById('ajaxloader'));
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    var eLoader = document.createElement("img");

    eLoader.src = "loader.gif";
    eLoader.alt = "";
    eLoader.id = "ajaxloader";

    document.getElementById('content').appendChild(eLoader);

    http.send(params);
}

BeginLoading();

示例#2 | 码

HTML

<div id='content'>
    <div id='ajaxloader'><img src="loader.gif" style="display: none"/></div>
</div>

使用Javascript

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById('ajaxloader').style.display = "none";
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    document.getElementById('ajaxloader').style.display = "block";
    http.send(params);
}

BeginLoading();

例#3 | 码

HTML

<div id='content'></div>

使用Javascript

function CreateLoader(){
    var img = document.createElement("img");
    img.id = "ajaxloader";
    img.src = "loader.gif";
    img.alt = "";

    document.getElementById("content").appendChild(img);

    img.show = function(){ img.style.display = "block"; }
    img.hide = function(){ img.style.display = "none"; }

    img.hide();        

    return img;        
}

var eLoader = CreateLoader();

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        eLoader.hide();
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    eLoader.show();
    http.send(params);
}

BeginLoading();

杂项

我建议跟踪返回的状态.当请求失败时,您的代码将返回错误,因为您没有处理它.确保请求成功并处理您的错误.

encodeURIComponent()如果你有特殊字符的数据,比如空格等,你也应该考虑使用.

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;

var url = "main_search_special.php"
var parameters = "section=special&category=" + encodeURIComponent(category) + "&brand=" + encodeURIComponent(brand) + "&item=" + encodeURIComponent(item);

ajaxRequest.open("GET", url+"?"+parameters, true);

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4 && http.status == 200){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }else{
        console.log("Request for \""+url+ "\" failed.");
    }
}

ajaxRequest.send();