XML POST

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

次のリンクをクリックするとサーバーの "ngp_xmlpost.html" が呼び出されます。
名前をタイプしてボタンをクリックすると、送られてきたメッセージが表示されます。
XML HttpRequest

プログラムの説明

  1. このプログラムは、非同期通信 XMLHttpRequest(XHR) のプログラムです。
    事前に PHP がサポートされているサーバーに post.php と ngp_xmlpost.html をアップロードして下さい。
    PHP をサポートしていないサーバーやローカル環境では実行できません。
  2. HttpRequest を受けて、メッセージを送信する "post.php" です。
    <?php
    $buf = json_decode(file_get_contents('php://input'), TRUE);
    $data = $buf['name'];
    if (!isset($data))  $data = "name Error";
    print "Hello, $data !";
?>
  3. AngularJS サンプルプログラム "ngp_xmlpost.html" です。
    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>

<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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

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

</body>
</html>
  4. 実行結果は XML Http と同じですが、パラメーターを POST で渡します。
    パラメータとして渡す方法には GET で渡す方法と POST で渡す方法があります。
    GET で渡すとパラメータが丸見えになり文字列長にも制限があるのに対して、POST を使うと隠匿することが出来て制限も無くなります。
    今回も私のページを格納しているサーバーに PHP プログラム(post.php)をアップロードして呼び出します。
    POST で受け取るデータ形式は「application/x-www-form-urlencoded」です。
    そこで JSON 形式のデータを「application/x-www-form-urlencoded」に変換します。
    形式が変換されたら、後は GET の場合と同様です。
        $buf = json_decode(file_get_contents('php://input'), TRUE);
    $data = $buf['name'];
    if (!isset($data))  $data = "name Error";
    print "Hello, $data !";
  5. POST でパラメータを渡します。
    GET のときは params: { name: $scope.name } を使っていましたが、POST では data: { name: $scope.name } を使います。
          $http({
        method: 'POST',
        url: 'post.php',
        data: { name: $scope.name }
      })

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