Using the XMLHttpRequest Object


プログラムの説明

  1. Polling はサーバーに対して自分自身を定期的に呼び出すように要求するのに対して、今回は直接必要なデータを送信するように要求します。
    XMLHttpRequest は環境によってかなり違いがあるようで注意が必要です。
    私は Windos10 のOSで、次のブラウザを使って実行を確認しました。
    Microsoft Edge 38.14393.1066.0, Internet Explorer 11.0.14393.953
    Google Chrome バージョン 58.0.3029.110 (64-bit)
    div で定義された "Change Content" をクリックすると、サーバーから送信された "Hello PHP" に変わります。
    このページは PHP が使えるサーバー上で実行して下さい。ローカル環境では XMLHttpRequest は動作しません。
    PHP の代わりに Perl を使うことも出来ます。
    Perl のプログラムは Using the XMLHttpRequest Object を参照して下さい。
  2. XMLHttpRequest でサーバーに要求するソースコードです。
    <div id="demo">
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
    </div>
    
    <script>
    function loadXMLDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
      xhttp.open("GET", "hello.php", true);
      xhttp.send();
    }
    </script>
    
  3. <div id="demo"> で定義した button をクリックすると loadXMLDoc() 関数が呼び出されます。
    クリックで関数を呼び出す例題は Text chenge を参照して下さい。
  4. var xhttp = new XMLHttpRequest(); で XMLHttpRequest を生成します。
  5. xhttp.onreadystatechange = で実行する関数を定義します。
  6. if (this.readyState == 4 && this.status == 200) が正常に実行された時で ("demo").innerHTML = にサーバーから送信されてきた TEXT を表示します。
  7. xhttp.open("GET", "hello.php", true); でサーバーに実行を要求するプログラムを設定します。
    xhttp.send(); で hello.php の実行結果を受け取ります。
  8. サーバーに実行の要求するプログラム(hello.php)のソースコードです。
    詳細は Hello PHP を参照して下さい。
    <?php
    print "Hello PHP";
    ?>
    

前田稔の超初心者のプログラム入門
PHP Program