在ajax提取文件内容时显示加载图像 [英] Display loading image while ajax fetches file content

问题描述

我是ajax的新手，阅读了一些tut脚本，制作了一个带有多个按钮的lil脚本，单击它们后，每个脚本将在特定的div中加载一个php文件.为此我使用

i am new to ajax and read some tuts to make a lil script which has multiple buttons and on click each will load a php file in a specific div. for that im using this

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文件即可完美加载.但因为需要花费一些时间来处理，因此显示空白区域.这样就可以在处理过程中显示正在加载的图像或文本，完成后将隐藏图像并显示文件内容吗?
感谢您的帮助:}
欢呼

I made it to this part and on click the php file is loading perfectly. but coz it takes time to process it shows blank area. so is it possible to show a loading image or text while it processes and after completion it will hide the image and display file content?
Help is appreciated :}
cheers

推荐答案

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

<script>
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();
}
</script>

这篇关于在ajax提取文件内容时显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！