Ajaxを極める

Sec.1　YAHOO検索サービスを利用する

まずはこちらからYahooのAPIを取得しよう。

【サンプル】

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Yahoo検索をする</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="./pra/xmlhttp.js"></script>
<script type="text/javascript" src="./pra/prototype.js"></script>

<script type="text/javascript"><!--
function YahooSearch()
{
　srchStr = $("queryString").value;
if (srchStr == "") return;
　httpObj = createXMLHttpRequest(readComplete);
if (httpObj)
{
//①CGIでデータを取得します
　httpObj.open("GET","yahoo.cgi?query="+encodeURI(srchStr)+"&results=30"+"&cache="+(new Date()).getTime(),true);

//②encodeURI：データをエンコードします。CGI側で無駄な処理が省けます。
//③results：一度に表示させる件数です。
//④cache：最新の状態を取得します。
　httpObj.send(null);
}
}
function readComplete()
{
　if ((httpObj.readyState == 4) && (httpObj.status == 200))
　{
　　txt = "";
　　//⑤CGIから取得したXMLデータを変数へ格納します
　　xmlData = httpObj.responseXML;
　　resultObj = xmlData.getElementsByTagName("Result");
　　titleList = xmlData.getElementsByTagName("Title");

for (i=0; i<titleList.length; i++)
{
　　str = titleList[i].childNodes[0].nodeValue;
　　sURL = resultObj[i].getElementsByTagName("ClickUrl")[0].childNodes[0].nodeValue;
　　txt += '<a href="'+sURL+'">' + str + "</a><br>";
}
$("result").innerHTML = txt;
}
else
{
$("result").innerHTML = "Loading・・・"
}
}
// --></script>
</head>
<body>
<p><a href="http://developer.yahoo.co.jp/">Yahoo Developer</a></p>
<form method="get" name="ajaxForm" onsubmit="YahooSearch();return false;">
<input type="text" value="Ajax" id="queryString">
<input type="button" value="Yahoo検索" onClick="YahooSearch()">
</form>
<div id="result"></div>
</body>
</html>
　　　  


以下はCGIのサンプルです。
出力結果はこちらで確認できます。


use LWP::Simple;

if ($ENV{'REQUEST_METHOD'} eq "POST") {
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
} else {
$buffer = $ENV{'QUERY_STRING'};
}

$appid = "あなたのAPI";
$query = $buffer;

$url = "http://api.search.yahoo.co.jp/WebSearchService/V1/webSearch?appid=$appid&query=$query";

$response = get($url);
print $response;


exit;