XML Http

非同期通信を受け持つ XMLHttpRequest(XHR) のプログラムです。
XHR でサーバーに処理を要求し、その処理結果をページに反映させます。
  名前：  maeda          送信
Hello, maeda !

次のリンクをクリックするとサーバーの JavaScript の "xmlhttp.html" が呼び出されます。
Change Content ボタンをクリックすると PHP の hello.html が呼び出されて "Hello PHP 漢字テスト(Shift-Jis)" が表示されます。
Hello PHP

プログラムの説明

  1. XMLHttpRequest(XHR) を実行するには、XHR に対応しているサーバーが必要です。
    このコーナーでは、私のページを格納しているサーバーの PHP プログラムを呼び出します。
    XMLHttpRequest で呼び出される "php/hello.php" のソースコードです。
    詳細は Hello PHP を参照して下さい。
    <?php
print "Hello PHP 漢字テスト(Shift-Jis)";
?>
  2. 最初に AngularJS を使わずに JavaScript の基本機能だけでプログラミングします。
    <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>XML Http</title>
</head>

<body>
<h2>Using the XMLHttpRequest Object</h2>
<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", "../php/hello.php", true);
  xhttp.send();
}
</script>

</body>
</html>
  3. ボタンのクリックで loadXMLDoc() 関数を呼び出します。
    <div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>
  4. var xhttp = new XMLHttpRequest(); で XMLHttpRequest を生成します。
    xhttp.onreadystatechange = で実行する関数を定義します。
    if (this.readyState == 4 && this.status == 200) が正常に実行された時の処理です。
    getElementById("demo").innerHTML = にサーバーから送信されてきた TEXT を表示します。
    "demo" は div の id で定義された名前です。
    xhttp.open("GET", "../php/hello.php", true); でサーバーに実行を要求するプログラムを設定します。
    xhttp.send(); で hello.php の実行結果を受け取ります。
    <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", "../php/hello.php", true);
  xhttp.send();
}
</script>

PHP プログラムの作成

  1. AngularJS を使ったプログラムです。
    まず method: 'GET' で name パラメータを受け取る PHP のプログラムを作成します。
    http.php をサーバーにアップロードします。
    <?php
    $data= $_GET["name"];
    if (!isset($data))  $data = "name Error";
    print "Hello, $data !";
?>
  2. 次のリンクをクリックして http.php の実行を確認して下さい。
    http.php のテスト
    http.php のテストを呼び出すリンクでは name=maeda に設定しています。
      <a href="http://maedakobe.rw.xsi.jp/javascript/http.php?name=maeda">http.php のテスト</a>

次のリンクをクリックするとサーバーの "ngp_xmlhttp.html" が呼び出されます。
名前をタイプして送信ボタンをクリックすると「Hello,名前！」が応答されます。
AngularJS XHR

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_xmlhttp.html" です。
    <!doctype html>
<html ng-app="myApp">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyController', ['$scope', '$http', function($scope, $http)
  { $scope.onclick = function()
    { // サーバーに対してリクエストを送信
      $http(
      { method: 'GET',
        url: 'http.php',
        params: { name: $scope.name }
      })
      // 成功時の処理（ページにあいさつメッセージを反映）
      .success(function(data, status, headers, config)
      { $scope.result = data;
      })
      // 失敗時の処理（ページにエラーメッセージを反映）
      .error(function(data, status, headers, config)
      { $scope.result = '通信失敗！';
      });
    };
  }]);
</script>
</head>

<body>
<body ng-controller="MyController">
<form name="myForm" novalidate>
  <label for="name">名前：</label>
  <input id="name" name="name" type="text" ng-model="name" />
  <button ng-click="onclick()">送信</button>
</form>
<div>{{result}}</div>
</body>

</html>
  2. このプログラムは、非同期通信 XMLHttpRequest(XHR) のプログラムです。
    事前に PHP がサポートされているサーバーに http.php と ngp_xmlhttp.html をアップロードして下さい。
    PHP をサポートしていないサーバーやローカル環境では実行できません。
    ngp_xmlhttp.html を実行してインプットボックスから名前をタイプしてボタンをクリックすると "Hello, Maeda !" のようにサーバーから返送されたメッセージが表示されます。
  3. onclick 関数でサーバーに対してリクエストを送信します。
    url: 'http.php' の実行結果が送り返されます。(少し上に 'http.php' のソースコードを掲載)
    angular.module('myApp', [])
  .controller('MyController', ['$scope', '$http', function($scope, $http)
  { $scope.onclick = function()
    { // サーバーに対してリクエストを送信
      $http(
      { method: 'GET',
        url: 'http.php',
        params: { name: $scope.name }
      })
      // 成功時の処理（ページにあいさつメッセージを反映）
      .success(function(data, status, headers, config)
      { $scope.result = data;
      })
      // 失敗時の処理（ページにエラーメッセージを反映）
      .error(function(data, status, headers, config)
      { $scope.result = '通信失敗！';
      });
    };
  }]);
  4. Form でインプットボックスとボタンを定義します。
    input id="name" にサーバーから送り返されたメッセージが表示されます。
    <form name="myForm" novalidate>
  <label for="name">名前：</label>
  <input id="name" name="name" type="text" ng-model="name" />
  <button ng-click="onclick()">送信</button>
</form>
  5. XMLHttpRequest はサーバーにデータを送信するように要求する機能です。
    非同期通信(XMLHttpRequest(XHR)) の詳細は 超初心者のプログラム入門(PHP) から 「PHP ゲーム/XMLHttpRequest」を参照して下さい。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)