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

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

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


<!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() {
        // ここで、画像を表示する
        document.getElementById('areaName').innerHTML = '<img src="loading.gif" width="16" height="16" />';
        var http = new JKL.ParseXML('site_list.xml.php');
        var func = function(data) {
            document.getElementById('areaName').innerHTML = data.site_list.site[0].name;
        }
        http.async(func);
        http.parse();
    }
}
</script>
</head>

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

</body>
</html>

　ここでは、Ajaxの通信を始める直前に、<img>要素を<div>要素に表示している。これにより、通信中はずっと画像が表示されることになる。通信が完了すると、<div>要素内は結果の内容で上書きされるため、画像はそれに合わせて消えるというわけだ。利用者はWebサイトを利用しているときに、小さなストレスをいくつも経験している。これが蓄積すると、そのWebサイト自体を利用するのを辞めてしまうので、細かな配慮で利用者の不安やストレスを取り除いていくと良いだろう。

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