JSONのデータを表示する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JSONのデータを表示する</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
new Ajax.Request(fName, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
$("result").innerHTML = parseJSON(httpObj.responseText);
}
// JSONのデータを解析して表示
function parseJSON(jsData)
{
var data = eval("("+jsData+")");
var resultData = "<table border='1'>";
for(var i=0; i<data.item.length; i++)
{
var iCode = data.item[i].itemCode; // 商品コード
var iName = data.item[i].itemName; // 商品名
var iPrice = data.item[i].itemPrice; // 商品価格
resultData += "<tr><th>"+iCode+"</th><td>"+iName+"</td><td>"+iPrice+"円</td></tr>";
}
resultData += "</table>";
return resultData;
}
// --></script>
</head>
<body>
<h1>JSONのデータを表示する</h1>
<form>
<input type="button" value="jsondata.txtを読み込み" onClick="loadDataFile('jsondata.txt')"><br>
</form>
<div id="result"></div>
</body>
</html>

・サンプルを実行する
Ajax逆引きクイックリファレンス　説明などは本書を参考にしてください。