改訂新版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']. 'さん!');
本
改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: Kindle版
- この商品を含むブログを見る