显示加载图像，而阿贾克斯提取文件内容

Question

我是新来的ajax和阅读一些tuts使一个lil脚本有多个按钮，并点击每个将加载一个特定的div中的PHP文件。使用此

function loadXMLDoc() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("1").innerHTML=xmlhttp.responseText; 
      } 
    } 
xmlhttp.open("GET","feedchck.php",true); 
xmlhttp.send(); 
} 

动作按钮，即时通讯：

<button type="button" onclick="loadXMLDoc();">Request</button> 
<div id="1">asdf</div> 

我做到了这部分，点击PHP文件加载完美。但由于它需要时间来处理它显示空白区域。所以它有可能在处理过程中显示加载图像或文本，完成后它会隐藏图像并显示文件内容？
帮助表示赞赏：}
欢呼

Answer 1

<button type="button" onclick="loadXMLDoc();">Request</button> 
<span id="loading"></span> // An empty tag - this be the loading image 
<div id="1">asdf</div> 


function loadXMLDoc() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
document.getElementById("loading").innerHTML = ''; // Hide the image after the response from the server 
    document.getElementById("1").innerHTML=xmlhttp.responseText; 
     } 
    } 
document.getElementById("loading").innerHTML = '<img src="../loading.gif" />'; // Set here the image before sending request 
xmlhttp.open("GET","feedchck.php",true); 
xmlhttp.send(); 
}