Question

我是ajax的新手。在w3学校学习。现在我可以在网站上加载一部分。但是当加载将要发生时，我想向用户显示加载图像。我在stackoverflow中搜索。发现了一些问题，但他们正在使用一些我不知道的其他类型的ajax。

这是我的代码

<script>
 function loadXMLDoc(a)
  {
     var xmlhttp;
     var temp = "myname.php?id=" + a;


     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("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
   xmlhttp.open("GET",temp,true);
   xmlhttp.send();
 }
</script>



<h2>AJAX</h2>
  <button type="button" onclick="loadXMLDoc('1')">Request 1</button>
  <button type="button" onclick="loadXMLDoc('2')">Request 2</button>
  <button type="button" onclick="loadXMLDoc('3')">Request 3</button>
<div id="myDiv"></div>

如果有人可以根据我的编码给我一个例子或链接，那将有所帮助。

Answer 1

创建一个隐藏的<img>元素，然后在调用ajax时显示它，完成后隐藏它。

<script>
 function loadXMLDoc(a)
  {
     var xmlhttp;
     var temp = "myname.php?id=" + a;

     // show the loading image
     document.getElementById("loading").style.display = "";

     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)
            {
                 // hide the loading image
                 document.getElementById("loading").style.display = "none";

                 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          }
   xmlhttp.open("GET",temp,true);
   xmlhttp.send();
 }
</script>



<h2>AJAX</h2>

<img src="loading.gif" alt="Loading..." id="loading" style="display:none;" />

  <button type="button" onclick="loadXMLDoc('1')">Request 1</button>
  <button type="button" onclick="loadXMLDoc('2')">Request 2</button>
  <button type="button" onclick="loadXMLDoc('3')">Request 3</button>
<div id="myDiv"></div>

为了将来参考，Mozilla Development Network文档是普通Javascript ajax的一个很好的资源。

Answer 2

1）在HTML文档中添加加载动画图像（img标记）并将其放在要显示的位置，但是通过设置display: none

可以使用CSS隐藏它

2）在你的xmlhttp.send（）之前，通过设置图像显示图像display: ''

3）在xmlhttp.onreadystatechange回调函数中，再次隐藏图像以指示加载已完成。

正在加载ajax的图像

2 个答案: