客を待たせず、不安にさせず：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にログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Windows XP UI iPod touch モバイル Linux Chrome iPhone 3G 小技 iPhone Flash Windows 7 WebKit Apple Windows Webサービス Ajax セキュリティ Internet Explorer Safari HTML Firefox 3 オープンソース Tips JavaScript Mac OS X Windows Vista Off Topic Google 開発環境 Database ソフトウェア開発 プログラミング言語 Webデザイン インストール ブラウザ Firefox 脆弱性 アプリケーション データベース PHP Microsoft OS Opera Mozilla マイクロソフト Java リファレンス CSS 仮想化 RIA
  • 話題のタグを見る »