このajaxフォームにローディングアイコンを置く場所は誰ですか？

Question

私のコードはこれのようなものです。私はチュートリアルのウェブサイトから取りましたが、私が理解していないコードのこの巨大な迷惑メールにローディングアイコンを置く場所を教えてください。 例をjsfiddleなどで表示してください。

<script language = "javascript" type = "text/javascript"> 
    <!-- 
     //Browser Support Code 
     function ajaxFunction(){ 
      var ajaxRequest; // The variable that makes Ajax possible! 

      try { 
       // Opera 8.0+, Firefox, Safari 
       ajaxRequest = new XMLHttpRequest(); 
      }catch (e) { 
       // Internet Explorer Browsers 
       try { 
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
       }catch (e) { 
       try{ 
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       }catch (e){ 
        // Something went wrong 
        alert("Your browser broke!"); 
        return false; 
       } 
       } 
      } 

      // Create a function that will receive data 
      // sent from the server and will update 
      // div section in the same page. 

      ajaxRequest.onreadystatechange = function(){ 
       if(ajaxRequest.readyState == 4){ 
       var ajaxDisplay = document.getElementById('ajaxDiv'); 
       ajaxDisplay.innerHTML = ajaxRequest.responseText; 
       } 
      } 

      // Now get the value from user and pass it to 
      // server script. 

      var age = document.getElementById('age').value; 
      var wpm = document.getElementById('wpm').value; 
      var sex = document.getElementById('sex').value; 
      var queryString = "?age=" + age ; 

      queryString += "&wpm=" + wpm + "&sex=" + sex; 
      ajaxRequest.open("GET", "ajax-example.php" + queryString, true); 
      ajaxRequest.send(null); 
     } 
    //--> 
    </script> 

    <form name = 'myForm'> 
    Max Age: <input type = 'text' id = 'age' /> <br /> 
    Max WPM: <input type = 'text' id = 'wpm' /> 
    <br /> 

    Sex: <select id = 'sex'> 
     <option value = "m">m</option> 
     <option value = "f">f</option> 
    </select> 

    <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/> 

    </form> 

    <div id = 'ajaxDiv'>Your result will display here</div> 

Answer 1

まず、準備状態に関する詳しい情報は、外thisを確認してください。

ajaxRequest.open("GET", "ajax-example.php" + queryString, true);の直前に読み込みを行い、それをif (xmlhttp.readyState==4で削除しました。あなたがロードアイコンが欲しいところ

1.

ので、表示されるようにHTMLを追加します。次に <span id="loading"></span>

2.

直前ajaxRequest.open...挿入ローディングイメージを：

document.getElementById("loading").innerHTML = '<img src="loading.gif" />';

3.

そしてif (xmlhttp.readyState == 4プット内側：

document.getElementById("loading").innerHTML = '';