6

私はajaxが初めてで、複数のボタンを持ち、クリックするとそれぞれが特定のdivにphpファイルをロードするlilスクリプトを作成するためにいくつかのtutsを読んでいます。そのため、これを使用しています 

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ファイルが完全に読み込まれます. しかし、処理に時間がかかるため、空白の領域が表示されます。処理中に読み込み中の画像またはテキストを表示し、完了後に画像を非表示にしてファイルの内容を表示することは可能ですか?
助けていただければ幸いです:}
乾杯

4

1 に答える 1

8 
<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>
于 2012-05-18T04:54:41.833 に答える