0

私はajaxを初めて使用します。w3スクールで勉強しました。これで、Webサイトにパーツをロードできます。しかし、読み込みが発生するときは、そこで読み込み中の画像をユーザーに表示したいと思います。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>

将来の参考のために、MozillaDevelopmentNetworkのドキュメントはプレーンなJavascriptajaxの優れたリソースです。

于 2013-03-22T16:26:19.990 に答える
1

1）読み込み中のアニメーション画像（imgタグ）をHTMLドキュメントに追加し、表示したい場所に配置しますが、CSSで非表示にするにはdisplay: none

2）xmlhttp.send（）の前に、画像を設定して画像を表示しますdisplay: ''

3）xmlhttp.onreadystatechangeコールバック関数で、画像を再度非表示にして、読み込みが終了したことを示します。

于 2013-03-22T16:27:43.497 に答える