学習Jsonp(asp.net jquery jsonp)

3301 ワード

昨日の会議で、技術総監はjsonpというものについて話しました.霧の水か?神馬事情がわからない~~~~.多くの同胞は私と同じようにこの東が神馬であることを知らないと信じて、だから今日貼ってみんなにこの東を見せます.
ついでに私が作ったDemo~.
Asynchronous JavaScript and XML(Ajax)は、次世代Webサイト(Web 2.0サイトという用語が流行している)を駆動するキーテクノロジーです.Ajaxでは、Webアプリケーションの表示や動作に干渉することなくバックグラウンドでのデータ取得を可能にします.XMLHttpRequest関数を使用してデータを取得します.これはAPIで、クライアントJavaScriptがHTTPを介してリモートサーバに接続できるようにします.Ajaxも多くのmashupの駆動力であり、複数の場所からのコンテンツを単一のWebアプリケーションに統合することができます.
ただし、ブラウザの制限を受けるため、この方法ではドメイン間通信は許可されません.異なるドメインからデータを要求しようとすると、セキュリティエラーが発生します.これらのセキュリティ・エラーは、データが存在するリモート・サーバを制御し、各リクエストが同じドメインに移動する場合に回避できます.しかし、自分のサーバにとどまれば、Webアプリケーションは何の役に立つのでしょうか.複数のサードパーティサーバからデータを収集する必要がある場合、どうすればいいですか?
同源ポリシーは、あるドメインからロードされたスクリプトが別のドメインのドキュメント属性を取得または操作することを阻止します.すなわち,要求されたURLのドメインは,現在のWebページのドメインと同一でなければならない.これは、ブラウザが異なるソースからのコンテンツを分離し、それらの間の操作を防止することを意味します.このブラウザポリシーは古く、Netscape Navigator 2.0バージョンから存在します.
この制限を克服する比較的簡単な方法は、WebページをソースとするWebサーバにデータを要求し、Webサーバをエージェントのように真のサードパーティサーバに転送することである.この技術は一般的に使用されているが,伸縮不可能である.もう1つの方法は、フレームワーク要素を使用して現在のWebページに新しい領域を作成し、GETを使用してサードパーティのリソースの取得を要求することである.ただし、リソースを取得すると、フレームワーク内のコンテンツは同源ポリシーによって制限されます.
この制限を克服するより理想的な方法は、他のドメインのサービスURLを指し、自身のスクリプトでデータを取得するWebページに動的スクリプト要素を挿入することである.スクリプトがロードされると、実行が開始されます.この方法は、同じソースポリシーが動的スクリプトの挿入を阻止せず、スクリプトをWebページを提供するドメインからロードされたものと見なすため、実行可能である.ただし、スクリプトが別のドメインからドキュメントをロードしようとすると、成功しません.幸いなことに、JavaScript Object Notation(JSON)を追加することで、この技術を改善することができます.
JSONP JSONPとは、サーバ側でScript tagsを統合してクライアントに戻り、javascript callbackの形式でドメイン間アクセスを実現する非公式のプロトコルです(これはJSONPの簡単な実装形式にすぎません).
Jsonp原理:
まずクライアントにcallbackを登録し、callbackの名前をサーバに渡します.
このとき、サーバさんはjsonデータになります. 
そしてjavascript構文でfunctionを生成し、functionの名前は伝達されたパラメータjsonpである.
最後にjsonデータを直接パラメータとしてfunctionに配置すると、js構文のドキュメントが生成され、クライアントに返されます.
クライアントブラウザは、scriptタグを解析する、返されたjavascriptドキュメントを実行するが、このときデータはパラメータとしてクライアントが予め定義するcallback関数に伝達される.(動的実行コールバック関数)
#regionサーバコード
Jsonp_learn.aspx
 protected void Page_Load(object sender, EventArgs e)    {               string callback = Request["callback"];             string response = string.Format("'value1':'{0}','value2':'{1}'",Request.QueryString["p1"],Request.QueryString["p2"]);             string call = callback + "({"+ response + "})";             Response.Write(call);     }
#endregion
#regionクライアントコード
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">                    $(document).ready(function () {            jQuery.ajax({                type: "get",                url: "Jsonp_learn.aspx",                dataType: "jsonp",                jsonp: "callback",                data: "p1=1&p2=2&callback=?",                 success: function (msg) {                    alert("value1:"+ msg.value1 + "value2:"+ msg.value2);                }            });          });   
#endregion
これはただの簡単なDemoです.JSOnPを簡単に知ることができます.詳細については...別途資料を調べてください~~.