山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで その17

Chapter 7 クライアントサイド JavaScript 開発 を極める

サーバーとの通信

php を使ったサーバとの通信

html
<form method="POST" action="php/hello.php">
    <label for="name">名前: </label>
    <input type="text" name="name" size="15" />
    <input type="submit" name="submit" value="送信"/>
</form>
hello.php
<?php
if ($_REQUEST['submit'] !== null) {
  sleep(3);
  print('こんにちは、'. htmlspecialchars($_POST['name'], ENT_QUOTES | ENT_HTML5, 'UTF-8'). 'さん!');
}

Ajax な通信

同期通信を行います。

html
<form>
  <script src="hello.js"></script>
  <label for="name">名前: </label>
  <input id="name" type="text" name="name" size="15" />
    <input id="btn" type="button" name="submit" value="送信" />
</form>
<div id="result"></div>
hello.js
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('btn').addEventListener('click', function() {
    var result = document.getElementById('result');
    var xmlHttpReq = new XMLHttpRequest();
    xmlHttpReq.onreadystatechange = function() {
      // 通信完了
      if (xmlHttpReq.readyState === 4) {
        if (xmlHttpReq.status == 200) {
          result.textContent = xmlHttpReq.responseText;
        } else {
          result.textContent = 'エラーが発生';
        }
      } else {
        result.textContent = '通信中...';
      }
    };
    xmlHttpReq.open('GET', 'hello.php?name=' + encodeURIComponent(document.getElementById('name').value), true);
    xmlHttpReq.send(null);
  }, false);
}, false);
hello.php
<?php
sleep(3);
print('こんにちは、'. $_REQUEST['name']. 'さん!');