HTML_AJAXによるAJAXの実践（３）ーー同期と非同期の実感

Ajax

簡単に言ってしまえば、同期処理は順序処理で、
ユーザは一つのタスクが終わる前に待つしかないです。
非同期処理はマルチ処理で、ユーザは一つの処理を開始した後、
別の処理も行えます。
この違いでAJAXのメリットを実感できると思います。

下記、HTML_AJAXで体験してみましょう。

１、画面作成：

<!-- 同期.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML_AJAX.grad</title>
<script type="text/javascript" src="server.php?client=all"></script>
<script type="text/javascript">
<!--
function grab() {
  document.getElementById("message").innerHTML = HTML_AJAX.grab('message.php');
}
//-->
</script>
</head>

<body>
<input type="button" onClick="grab()" value="HTML_AJAX.grad in sync mode">
<div id="message"></div>
</body>
</html>

<!-- 非同期.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML_AJAX.grad</title>
<script type="text/javascript" src="server.php?client=all"></script>
<script type="text/javascript">
<!--
// コールバック関数を使用
function callback(message) {
  document.getElementById("message").innerHTML = message;
}
function grab() {
  document.getElementById("message").innerHTML = "";
  HTML_AJAX.grab('message.php', callback);
}
//-->
</script>
</head>

<body>
<input type="button" onClick="grab()" value="HTML_AJAX.grad in async mode">
<div id="message"></div>
</body>
</html>


２、HTML_AJAXを読み込んで、インスタンス化します。

<?php
// server.php
//
include 'HTML/AJAX/Server.php';

$server = new HTML_AJAX_Server();
$server->handleRequest();
?>

３、実行するバック処理のPHPファイルを作成

<?php
// message.php
//
sleep(3);
echo "HTML_AJAX<br />";
echo "Show this in 3 Sec";
echo date('l jS \of F Y h:i:s A');
?>

画面を見てみよう：
?同期の場合、ボタンが押下された後、３秒待って画面上時刻が表示される。
待つ間再度ボタンを押下することはできない。
?非同期の場合、ボタンが押下された後、すぐボタンが最後押下可能な状態に戻り、
連続押下すると、画面上の時刻は連続更新される。押下後結果が表示するまで、待つことはない。