Ajax loading graphic

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事件。