InfoseekやYahooやGoogleと比べて検索結果が表示されるのが遅いため、本当にスクリプトが動作しているかどうか不安になります。このような処理速度が遅く、待ち時間が発生する場合には、状況を示すプログレスバー（進行状況を示すグラフ）を表示するようにします。プログレスバーの表示は、あらかじめdivタグでメッセージ等を用意しておき、スタイルシートで非表示にしておきます。検索が開始されたら、非表示になっていたプログレスバーを表示させます。検索が終了したら、プログレスバーを非表示にすればできあがりです。（サンプルを
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Infoseek検索結果をマルチウィンドウで表示する</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function InfoseekSearch()
{
srchStr = document.getElementById("query").value;
if (srchStr == "") return;
srchStr = srchStr.replace(/ /g,"%20");
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET","curl.rb?query="+encodeURI(srchStr)+"&cache="+(new Date()).getTime(),true);
$("progress").style.visibility = "visible";
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
newWindow();
$("result"+ winNum).innerHTML = httpObj.responseText;
winNum++;
}
}
function newWindow()
{
$("progress").style.visibility = "hidden";
var dObj = $("window0").cloneNode(true);
var winObj = $("contents").appendChild(dObj);
winObj.id = "window"+winNum;
winObj.childNodes[0].id = "result"+winNum;
addEvent("window"+winNum,"click",closeWindow,false);
addEvent("window"+winNum,"mousedown",dragObj.dragStart,false);
winObj.style.left = 10+Math.floor(Math.random()*400)+"px";
winObj.style.top = 150+Math.floor(Math.random()*200)+"px";
winObj.style.visibility ="visible";
winObj.style.zIndex = dragObj.zIndex + 1;
winObj.childNodes[0].style.visibility = "visible";
dragObj.window.push("window"+winNum);
dragObj.maxLayer = dragObj.window.length;
}
// ウィンドウを閉じる処理
function closeWindow(e)
{
// クローズボックス上でマウスボタンが押されたか？
if ((dragObj.offsetX < 2) || (dragObj.offsetX >14) || (dragObj.offsetY < 4) || (dragObj.offsetY > 16)) return;
wObj = getEventTarget(e);
contObj = $("contents");
// ウィンドウをノードから削除
for (var i=0; i<contObj.childNodes.length; i++)
{
if(contObj.childNodes[i].id == wObj.id) contObj.removeChild(contObj.childNodes[i]);
}
// ウィンドウリストから削除
var temp = new Array();
for (i=0; i<dragObj.window.length; i++)
{
if (dragObj.window[i] != wObj.id) temp.push(dragObj.window[i]);
}
dragObj.window = temp;
}
function initObj()
{
window.document.onmousemove = dragObj.dragProc;
window.document.onmouseup = dragObj.dragEnd;
winNum = 1;
dragObj.window = [];
dragObj.maxLayer = 1; // 最大レイヤー枚数
}
// --></script>
</head>
<body onload="initObj()" oncontextmenu="return false">
<h1>Infoseek検索結果をマルチウィンドウで表示する</h1>
<p>読み込み中はプログレスバー（進行状況表示）が表示されます</p>
<form method="get" name="ajaxForm" onsubmit="InfoseekSearch();return false;">
<input type="text" value="" id="query">
<input type="button" value="Infoseek検索" onClick="InfoseekSearch()">
</form>
<div id="contents"></div>
<div id="window0" class="windowBorder"><div id="result0" class="windowContents"></div>
</div>
<div id="progress"><img src="ring.gif"> 検索結果を読み込み中です...</div>
</body>
</html>