AJAXで YAHOO GOOGLEのAPIを使う

Sec.1　JSONPで別ドメインからデータを取得する

ここではJqueryを使いHeartRailより駅の情報を取得します。
JqueryはPrototypeと並んで有名なフレームワークになります。
Jqueryは↑のメニュよりダウンロードできます。

ここで扱うJSON形式のフォーマットはこちらです。
選択された駅の情報を表示させます。

【サンプル】

<html>
<head>
<script type="text/javascript" src="http://express.heartrails.com/api/express.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>//①Jqueryをインクルードします
</head>
<script>
function geteki()
{

//②Jqueryでフォームの内容を取得します
var ekiline = $(line).val();
var ekiname = $(station).val();

//③クエリー文字列を生成します
var param = {
name: ekiname,
jsonp: 'callbacks',
encoding: 'UTF-8'
};
var search = jQuery.param(param);
var url = 'http://express.heartrails.com/api/json?method=getStations&'+search;

//④JSONPを呼び出します
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.charset = param.encoding;
script.src = url;
document.body.appendChild( script );

}

function callbacks (res) {

$('#result').empty();

//⑤検索結果が0件の場合はエラーを表示して終了します
if ( res.Count-0 == 0 ) {
alert( '見つかりませんでした。' );
return;
}

//⑥データを表示させるテーブルを作成します
var table = document.createElement( 'table' );
var tbody = document.createElement( 'tbody' );
table.appendChild( tbody );
$('#result').append( table );

//⑦取得したデータを編集します
for( var i=0; i<res.response.station.length; i++ ) {
　var entry = res.response.station[i];
　var tr = document.createElement( 'tr' );
　tbody.appendChild( tr );

　var tddate = document.createElement( 'td' );
　$(tddate).text("線区は："+entry.line+"　||駅名は："+ entry.name+"　||前の駅は"+ entry.prev+"　||次の駅は"+entry.next);
　tr.appendChild( tddate );

}
}

</script>
<body onload="HRELoadArea('area', 'line', 'station');">

<select id="area" name="area" onchange="HREOnChangeArea();">
<option value="エリアを選択してください">エリアを選択してください</option>
</select>
<select id="line" name="line" onchange="HREOnChangeLine();">
<option value="路線を選択してください">路線を選択してください</option>
</select>
<select id="station" name="station" onchange="geteki();">
<option value="駅を選択してください">駅を選択してください</option>
</select>
<p id="result"></p>

</body>
</html>

いかがでしょうか。CGIファイルを使うことなく、直接、別のドメインからデータを取得できました
JSON形式のデータはその扱い易さから、多くのサイトで取り入れられています。

Point1：　別のドメインから直接データを取得できる(セキュリティ上の問題もあり機密情報は扱うべきでない)
Point2：　Json形式のデータはXMLよりも扱い易い

AjaxでJSONPを使う