Question

所以我不是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代码，而不是额外的库。

Answer 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);

Answer 2

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

Ajax加载图形

2 个答案: