客を待たせず、不安にさせず: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>"name"の内容は「<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であえて意味のない繰り返しを行うことで、処理に時間がかかっている様子を再現したわけだ。これでは、利用者はソフトウェアが不調になったのではないかと不安になってしまうだろう。そこで、次のようにスクリプトを変更してみよう。
- 特集: Ajax活用の5つのポイント (5件)
- 今日のトップ記事
- 昨日
- 3日前
- 4日前
- 5日前
- 7日前
- ホワイトペーパー
- 話題のタグ
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
開発環境
話題のタグを見る »
仮想化Java環境のスループットを2倍に--BEA LiquidVMの適応型メモリ管理
Firefox 3が対応したdisplayプロパティの値(3) - inline-table
MSもアドビも学生さんに開発ソフトを無償提供
「Economist」のトップページがリニューアル
あなたがプログラムを理解できない10の理由:第2回
新APIまもなく登場--Google Developer Day 2008の見所とは?
内部統制対策を実現するIT運用管理ツール
-Simplify IT- ITをシンプルに 連載第2回
リスティング広告における競争優位性の維持