<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>タブで表示する</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function yahooSearch()
{
var kwd = $F("keywordYST");
var sURL = "yst.rb?query="+encodeURI(kwd);
new Ajax.Request(sURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
for (var i=0; i<5; i++) $("tab"+i).innerHTML = "";
var xmlObj = httpObj.responseXML;
var titleTag = xmlObj.getElementsByTagName("Title");
var resultTag = xmlObj.getElementsByTagName("Result");
for (i=0; i<resultTag.length; i++)
{
var urlTag = resultTag[i].getElementsByTagName("Url");
var linkURL = urlTag[0].childNodes[0].nodeValue;
var result = "<a href='"+linkURL+"' target='pageArea'>";
result += titleTag[i].childNodes[0].nodeValue;
result += "</a><br>";
$("tab"+i).innerHTML = result;
}
}
// --></script>
</head>
<body>
<h1>タブで表示する</h1>
<form onSubmit="yahooSearch();return false;">
<input type="text" value="Ajax" id="keywordYST">
<input type="button" value="検索" onClick="yahooSearch()">
</form>
<div id="tabArea">
<div id="tab0"></div>
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
</div>
<iframe id="pageArea" name="pageArea"></iframe>
</body>
</html>
説明などは本書を参考にしてください。