ここでは職種の詳細を表示し企業サイトへリンクさせてみましょう。
まず、職種はOfferタグ内のJobTypeDetailタグにあります。このJobTypeDetailタグの最初のノードの値を読み出せば職種に関する詳細情報を取得することができます。
次に企業サイトのURLを取得しますが、これはOfferタグ内のUrlタグに記載されています。ただし、全ての企業がURLを掲載しているわけではないため、普通に取得するとエラーになってしまいます。子ノードがあるかどうか調べて処理する方法もありますが、サンプルではエラー処理を行うtry...catchを使っています。URLが取得できた場合には企業へリンクし、そうでない場合には何もせず通常の文字のままにします。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>フロムエー・ナビ Ajaxサンプル</title>
<style type="text/css"><!--
h1 {
font-size:18pt;
color:white;
background-color:#006;
width:640px;
}
h2 {
font-size:11pt;
color:black;
background-color:#ddd;
width:640px;
margin-bottom:0px;
}
a {
text-decoration:none;
}
p {
font-size:8pt;
color:#f44;
width:630px;
margin-top:0px;
margin-bottom:30px;
padding:4px;
border:1px solid gray;
border-top:0px solid gray;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function getList()
{
var myKey = "api_key=3awyo24gh29hp6k31z8b210k44nac0f6";
var findType = "ksjcd=10"; // 検索軸＝職種から
var jobType = "nv_jb_type_cd=108"; // 職種番号
var reqURL = "http://xml.froma.com/s/r/jobSearch.jsp?"+myKey+"&"+findType+"&"+jobType;
new Ajax.Request("getXML.rb?"+reqURL, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
var xmlObj = httpObj.responseXML;
var offerTag = xmlObj.getElementsByTagName("Offer");
var txt = "";
for (var i=0; i<offerTag.length; i++)
{
var url ="";
var corpName = offerTag[i].getElementsByTagName("CorporateName")[0].firstChild.nodeValue;
var money = offerTag[i].getElementsByTagName("JobTypeDetail")[0].firstChild.nodeValue;
try { url = offerTag[i].getElementsByTagName("Url")[0].firstChild.nodeValue; }catch(e){}
if (url !="")
{
txt += "<h2><a href='"+url+"'>"+corpName+"</a></h2><p>"+money+"</p>";
}else{
txt += "<h2>"+corpName+"</h2><p>"+money+"</p>";
}
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>フロムエー・ナビ Ajaxサンプル (職種の詳細を表示)</h1>
<form>
<input type="button" value="求人情報取得" onClick="getList()">
</form>
<div id="result"></div>
</body>
</html>
[
目次へ]
(2006.6.17)