客を待たせず、不安にさせず：Ajax活用の5つのポイントふたつめ

たにぐちまこと（H2O Space.）
2007/12/20 11:00

Ajaxを使えば、利用者が「待ち」状態の間、不安にならないように工夫することが出来る。今回はその例を示そう。

　インターネットを利用していると、通信回線の不調や時間のかかる処理などで、利用者を「待たせる」事が多々ある。しかし、利用者にとって待つことはストレスになるうえ、「パソコンが不調になったのではないか」とか「うまく操作ができなかったのではないか」など、不安を感じることもあるだろう。

　Ajaxでは、このようなケースでも利用者を不安にさせないことができることが、利点の一つである。例えば、次のようなスクリプトを試してみよう。

　なお、このサンプルスクリプトを試すためには、PHPの動作環境が必要だ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JKL.ParseXMLを使う</title>
<script type="text/javascript" src="js/jkl-parsexml.js"></script>
<script type="text/javascript">
window.onload = function() {
    document.getElementById('btnUpdate').onclick = function() {
        var http = new JKL.ParseXML('site_list.xml.php');
        var data = http.parse();
        document.getElementById('areaName').innerHTML = data.site_list.site[0].name;
    }
}
</script>
</head>

<body>
<p>&quot;name&quot;の内容は「<span id="areaName"></span>」です</p>
<div><input id="btnUpdate" type="button" value="ページを更新する" /></div>

</body>
</html>

<?php
// 10秒間待ちます
sleep(10);
?>
<?php echo '<?xml version="1.0" encoding="UTF-8"?>' ?>
<site_list>
<site>
<name>CNET Japan</name>
<url>http://japan.cnet.com/</url>
</site>
<site>
<name>ZDNet Japan</name>
<url>http://japan.zdnet.com/</url>
</site>
<site>
<name>CNET Venture View</name>
<url>http://v.japan.cnet.com/</url>
</site>
<site>
<name>GameSpot Japan</name>
<url>http://japan.gamespot.com/</url>
</site>
</site_list>

　このスクリプトを実行すると、しばらくの間Webブラウザが反応しない状態になる。PHPであえて意味のない繰り返しを行うことで、処理に時間がかかっている様子を再現したわけだ。これでは、利用者はソフトウェアが不調になったのではないかと不安になってしまうだろう。そこで、次のようにスクリプトを変更してみよう。

記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Safari Firefox イロハ XHTML Off Topic まとめ Mac OS X server Adobe Apple Database Webアプリケーション開発 Windows IDE Mozilla Ajax Eclipse Python Firefox 3 HTML Google Ruby Webデザイン Tips JavaScript MySQL Internet Explorer Ruby on Rails Linux 仮想化 オープンソース フレームワーク Leopard ブラウザ リファレンス iPhone ライブラリ Flash PHP C/C++ 小技 Apache RIA Java SOA Microsoft CSS 入門 iPod touch 開発環境
  • 話題のタグを見る »