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

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