JSON と JSONP
●JSON(JavaScript Object Notation:JavaScriptオブジェクト表記法)
JavaScriptにおけるオブジェクトの表記法をベースとした軽量なデータ記述言語です。
JSONは単純であるので、特にAjaxの分野で利用が広がりつつあります。
<---- ウィキペディア（Wikipedia）より。
【JSONの使用例】
json.html
<html>
<head>
<title>json test</title>
<script language="JavaScript">
<!--
//XMLHttpRequestオブジェクト生成
function createHttpRequest()
{
//Win ie用
if(window.ActiveXObject){
try {
//MSXML2以降用
return new ActiveXObject("Msxml2.XMLHTTP")
} catch (e) {
try {
//旧MSXML用
return new ActiveXObject("Microsoft.XMLHTTP")
} catch (e2) {
return null
}
}
} else if(window.XMLHttpRequest){
//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
return new XMLHttpRequest()
} else {
return null
}
}
//ファイルにアクセスし受信内容を確認します
window.onload = function()
{
//XMLHttpRequestオブジェクト生成
var xmlHttpObj = createHttpRequest()
//open メソッド
xmlHttpObj.open( 'GET', 'http://localhost/ajax/test/json.php' , true )
//受信時に起動するイベント
xmlHttpObj.onreadystatechange = function()
{
//readyState値は4で受信完了
if (xmlHttpObj.readyState==4)
{
//コールバック
mkHtml(xmlHttpObj)
}
}
//send メソッド
xmlHttpObj.send( '' )
}
//コールバック関数 ( 受信時に実行されます )
function mkHtml(obj)
{
//レスポンスを取得
res = obj.responseText
}
//レスポンスされた文字列をJavaScriptとして実行
eval(res)
//受け取ったJSONを使ってHTML文字列を作成
var html = "名前: " + jsonData.Name + "
住所: " + jsonData.Addr
//DIV へ出力
document.getElementById('list').innerHTML = html
}
//-->
</script>
</head>
<body>
<!-- ここへ出力 -->
<table width=800>
<tr bgcolor="#cccccc">
<td id="list">名前<br>住所</td>
</tr>
</table>
</body>
</html>
json.php
<?php
$fn = "./json.txt";
if(is_file($fn)){
$fhandle = fopen($fn, "r");
while(feof($fhandle) == FALSE){
$str = fgets($fhandle);
echo $str;
}
} else {
print "file open error:".$fn;
}
?>
json.txt
jsonData =
{
"Name":"Tsuchida",
"Addr":"Chiba,Japan"
}
結果表示
json.htmlは、以下の結果を表示します。
| 名前: Tsuchida 住所: Chiba,Japan |
●JSONP（JSON with Padding）
JSON のデータフォーマットにちょっとした記述を加えて JavaScript の関数を呼び出せるようにしたものです。
「クロスドメインの制約」からXMLHttpRequest を使う方法では読込先が他ドメインの場合は使ません。
そこでデータを JSONP の形式にして JavaScriptのソースとしてインクルードしてしまうわけです。
また JSONP は関数呼び出しの形式になっているので，その関数の処理を別に記述することでコールバック関数のように機能します。
<---- [鏡] 入門 JSON 3 -- JSONP とコールバック関数より。
【JSONPの使用例】
jsonp.html
<html>
<head>
<title>jsonp test</title>
<script>
<!--
window.onload = function(){
var req_url = "http://localhost/ajax/test/jsonp.php";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = req_url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function jsonpData(obj){
var name = obj.Name;
var addr = obj.Addr;
var html = "名前: "+ name +"<br>住所: "+ addr;
document.getElementById("list").innerHTML = html;
}
-->
</script>
</head>
<body>
<!-- ここへ出力 -->
<table width=800>
<tr bgcolor="#cccccc">
<td id="list">名前<br>住所</td>
</tr>
</table>
</body>
</html>
jsonp.php
<?php
$fn = "./jsonp.txt";
if(is_file($fn)){
$fhandle = fopen($fn, "r");
while(feof($fhandle) == FALSE){
$str = fgets($fhandle);
echo $str;
}
} else {
print "file open error:".$fn;
}
?>
jsonp.txt
jsonpData(
{
"Name":"Tsuchida",
"Addr":"Chiba,Japan"
}
);
結果表示
jsonp.htmlは、json.htmlと同じく以下の結果を表示します。
| 名前: Tsuchida 住所: Chiba,Japan |
最後に
JSON と JSONP は似て非なるもの。
JSON はオブジェクトの表記法であり、JSONP は（引数としてJSONを使用するものの）
「関数をコールするソースの生成」です。
似ているのは名称だけですね。
まあ、もっともJSONPが考えられた背景には、XMLHttpRequestの「クロスドメイン制約」があるので
両者が違うのも当り前なのでしょう。
0 件のコメント:
コメントを投稿