Ajax 加载图形答案

【问题标题】：Ajax loading graphicAjax 加载图形
【发布时间】：2011-09-08 14:32:20
【问题描述】：

所以我不是 JavaScript 天才，但我可以按照教程进行操作。我收到了我的 Ajax JavaScript 请求。如何在请求信息时制作 .gif 动画节目？代码如下：

function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('confirm');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    var number = document.getElementById('number').value;
    var message = document.getElementById('message').value;
    var queryString = "?number=" + number + "&message=" + message;
    ajaxRequest.open("GET", "sms.php" + queryString, true);
    ajaxRequest.send(null); 
}

GIF 文件的名称是 ajax-loader.gif。

我知道这可以通过 jQuery 轻松完成，但我只能使用直接的原始 JavaScript 代码，而不是额外的库。

【问题讨论】：

@icktoofay 正如我所说，使用了教程。他一定用过同一个。
我知道，我只是说一个教程如何在 Stack Overflow 上获得多个问题很有趣。

标签： javascript ajax gif

【解决方案1】：

当你启动 AJAX 请求时，添加一个img 元素：

var image=document.createElement('img');
image.setAttribute('src', 'ajax-loader.gif');
document.getElementsByTagName('body')[0].appendChild(image);

AJAX 请求完成后，将其删除。（此代码假定 image 仍在范围内）

image.parentNode.removeChild(image);

【讨论】：

那么这是否将图像放入body div中？
它会将其放入body。没有div 参与。
只是……身体的任何部位？
body 的末尾。您可以根据需要更改它。

【解决方案2】：

如果可以，我会避免对您的 XHR 请求使用这种方法。我会使用 jQuery 或其他一些框架。它们为您提供了更多经过测试的选项，您可以在任何合理的时间内自行编写代码。 http://api.jquery.com/jQuery.ajax/ 是一个很好的起点。您可以使用 beforeSend 和 afterSend 事件。

【讨论】：