JavaScript:JSONP


1、JSONPはJSON with padding(充填式JSON)の簡略であり、JSONを適用する方法であり、JSONと同じように見える.関数呼び出しに含まれるJSONに過ぎない.
calback({name:'lwl')
  JSONPは二つの部分から構成されています.コールバック関数とデータ、コールバック関数は応答が来たらページで呼び出すべき関数で、データは着信コールバック関数のJSONデータです.以下は典型的なJSONP要求である.
        http://example.com/jsonp?callback=handleResponse  
  JSONPも「同ソースポリシー」に制限されていないので、画像pingと同じで、「script」タグも越えることができます.だから、JSONPを利用して「script」を動的に作成して、クロスドメインURLを指して、クロスドメインサーバとの通信ができます.
2、JSONP
(1)、JSONP構造
   JSONPは一般的なドメイン間要求方式であり、一般的なJSONP要求フォーマットは以下の通りである.
http://www.othersite.com/demo5.ashx?callback=showResult
   応答結果は、関数呼び出しに含まれるJSON構造のように見える.
show Result(\"weat her":"晴れ","wind":"そよ風"))
   JSONP結果は2つの部分から構成される:コールバック関数とデータ.コールバック関数は、一般的に開始要求時に指定され、応答が完了すると、ページで呼び出す関数です.データはもちろん、戻りを要求したJSONデータの結果です.
(2)、開始要求:
   JSONPは、原理的に動的タグを利用して実現され、scriptオブジェクトを作成し、そのsrc属性をクロスドメイン要求のurlアドレスに設定する.要求が完了すると、JSONPはページに応答してすぐに実行します.
<script>
    function showResult(json){                
           var obj= document.getElementById("result");
           obj.innerHTML="天气:"+json.weather+";风力:"+json.wind;
    }
    var script=document.createElement("script");
    script.src="http://www.othersite.com/demo5.ashx?callback=showResult";
    document.body.insertBefore(script,document.body.firstChild);
</script>
(3)、特徴:
     JSONPは、ブラウザとサーバの双方向通信を実現し、応答中のテキストにアクセスすることができる.
     JSONPは他のドメインからコードをロードして実行しますので、その安全性に注意してください.
     JSONPが結果の成否を求めるのは容易ではない.
3、jsonはコールバックのJsonで、元の名前はJson with paddingで、翻訳は充填式jsonで、パラメーター式jsonです.scriptのsrcはドメインをまたぐことができるので、送信URLの後にcalbackパラメータを追加してサーバーに渡して、サーバーから戻ってきたデータはcalbackのパラメータとして使用されます.このcalbackは私達自身が実現したので、受け取ったjsonデータに対して処理を進めることができます.
簡単なコードは以下の通りです.
<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/?callback=call'></script>
  ここではシナリオのsrcをhttp://freegeoip.net/json/?callback=callを選択しますhttp://freegeoip.netこれはユーザのipアドレスのapiを取得して、calbackをパラメータとしてURLにつづり合わせた後、戻ってきたjsonデータをcalbackのパラメータとして使用します.ここでcalbackをcall関数と定義します.つまり戻ったjsonデータはcallのパラメータとして伝えられます.このcall関数はユーザーの都市cityだけをイジェクトします.