0

我是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>

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

4

2 回答 2

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 开发网络文档是纯 Javascript ajax 的一个很好的资源。

于 2013-03-22T16:26:19.990 回答
1

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

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

3）在xmlhttp.onreadystatechange回调函数中，再次隐藏图片表示加载完成。

于 2013-03-22T16:27:43.497 回答