Jsonpの原理と実現

6796 ワード
JSONP javascript
最近プロジェクトをしていますが、フロントシステムとバックグラウンド情報発信システムは異なるサーバに展開する必要があります.また、2級ドメイン名も違っています.自分でインターネットを利用してJSONP関連の文章を探してみました.以下のようにまとめました.
1.JSON(JavaScript Object Notation)とJSONP(JSON with Padding)の違い
        
JSONとJSONPは文字だけの違いがありますが、彼らはまったく同じことではありません.JSONはデータ交換形式であり、JSONPは非公式契約であり、サーバー側にScript tagsを統合してクライアントに戻り、javascript calbackという形でクロスドメインアクセスを実現します.JSONがJavaScriptの開発者に魅力的な理由は、JSON自体がJavascriptの対象であることにある.
ドメインをまたぐという問題が発生する原因は、ブラウザのソースポリシーの制限にある.
2.同源戦略の制限
        
ソースポリシーとは、コードの取得を阻止するか、または他のドメインから取得したファイルまたは情報を変更することです.つまり、私たちの要求住所は現在のサイトの住所と同じでなければなりません.ソースポリシーは、異なるソースからのファイルまたは情報を分離することにより、リソースの保護を実現する.
3.JSONPの役割
        
同ソースポリシーの制限により、XmlHttpRequestは、現在のソース(ドメイン名、プロトコル、ポート)のリソースのみを要求することができ、ドメイン間の要求を実現するために、scriptタグを通じてドメイン間の要求を実現し、その後、サービス端末でJSONデータを出力し、リターン関数を実行し、ドメイン間のデータ要求を解決することができる.
4.JSONPの発生
        
同ソースポリシーの制限を解決するための比較的簡単な方法は、サーバ側で要求を送信し、サーバーが第三者リソースに到達するための代理中継として機能することである.広く使われていますが、この方法はあまり柔軟ではありません.もう一つの方法は、フレーム要素を使用して、現在のWebページにおいて新たな領域を作成し、GET要求を用いて任意の第三者リソースを取得することである.ただし、リソースを取得すると、フレームワークの内容はソースポリシーによって制限されます.
非常に巧妙な方法があります.ページで動的コード要素を使い、コードのソースはサービスアドレスを指し、自分のコードにデータをロードします.これらのコードローディングが実行されると、ソースポリシーは、動的スクリプトの挿入を阻止しないため、同じソースポリシーが、ウェブページを提供するドメインからスクリプトをロードしたものと見なされるので、制限されない.クライアントはJSONファイルの呼び出しに成功してから、自分の必要なデータを獲得しました.残りは自分のニーズに応じて処理して展示しました.このようにリモートデータを取得する方式はAJAXのように見えますが、実は違っています.
5.JSONPの原理: 
1)まずクライアントにcalbackを登録して、calbackの名前をサーバーに伝えます.
2)サーバーさんはjsonデータになります.
3)それからjavascript文法の方式で、一つのfunctionを生成します.
4)最後にJsonデータを直接に入力し、functionに置くと、js文法の文書が生成され、クライアントに返されます.
5)クライアントブラウザは、scriptタグを解析し、返信されたjavascriptドキュメントを実行します.この時、データはパラメータとして、クライアントがあらかじめ定義したcalback関数に入力されました.
6.JSONPの具体的な実現
具体的な例を通して説明します.1)ローカルのJSファイルで方法を宣言し、リモートJSで呼び出し、リモートJSは既に存在します.今私たちはjsop. htmlページで関数を定義して、リモートremote.jsでデータを入力して呼び出します.
        jsonip.の内容は以下の通りです.



    Jsonp Demo
    
    
        var localHandler = function (data) {//   data          
            alert('         remote.js  ，  js      ：' + data.result);
        };
        remote.jsの は の りです.
localHandler({"result":"    js     "});
        しかし、よく すると、どうやってリモートjsに び されるべきローカル の が かりますか?jsonpのサービス なので、 くのサービス に しています.これらのサービス はそれぞれローカル が います.この は の で します.
2)ローカルのJSファイルで を し、リモートJSで び し、リモートJSはサービスエンドプログラムを じて に される. な は に いつきます.サーバーが するjsスクリプトがダイナミックに されればいいですよ.そうすると、サーバーはパラメータを してサービス に えられます.        このインスタンスのjsonip.コードは の りです.



    Jsonp Demo
    
    
        var localHandler = function (data) {//   data          
            if (data.success) {
                window.location.href = data.url;
            } else {
                alert(data.url);
            }
        }
        //   jsonp   url  （          ，            javascript  ）
        var url = "http://demo.jsonp.com/JsonpServlet?callback=localHandler¶m=baidu";
        //   script  ，     
        var script = document.createElement('script');
        script.setAttribute('src', url);
        //  script    head，      
        document.getElementsByTagName('head')[0].appendChild(script);
        リモート呼び出しは、Servletを介してローカルにjsメソッドの呼び出しを書き込みます.
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;

public class JsonpServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //       
        String callback = request.getParameter("callback");
        //      
        String url = request.getParameter("param");
        PrintWriter out = response.getWriter();
        if("baidu".equals(url)){
            out.write(callback + "({success:true, url:'http://www.baidu.com'})");
        } else {
            out.write(callback + "({success:false, url:'http://www.google.com'})");
        }
    }
}
        web.xmlは、このServletを構成する.



    
        JsonpServlet
        JsonpServlet
    
    
        JsonpServlet
        /JsonpServlet
        今回のコードの変化が大きく、リモートjsファイルを直接書き込みせず、リモートのサーバ端末プログラムにアクセスし、JSコンテンツをリモートサーバプログラムで動的に生成します.以上のプログラムで生成されたダイナミックなJSファイルの内容は以下の通りです.
localHandler({success:true, url:'http://www.baidu.com'})
        今まで、JSONPの実現原理を完全に理解できると信じています.        JSフレームを使ってJSONPを実現する原理は同じです.jqueryフレームの実現方法は以下の通りである.



    Jsonp Demo
    
    
    
        jQuery(document).ready(function () {
            jQuery.ajax({
                asyc: false,
                type: "GET",
                url: "http://demo.jsonp.com/JsonpServlet?param=baidu",
                dataType: "jsonp",
                jsonp: "callback",//             ，    jsonp         (   :callback)
                jsonpCallback: "localHandler",//    jsonp      ，   jQuery          
                success: function (data) {
                    if (data.success) {
                        window.location.href = data.url;
                    } else {
                        alert(data.url);
                    }
                }
            });
        });
        ちょっとおかしいですか?なぜflight Handlerという関数が書かれていますか?しかも運行に成功しました.理由はjqueryがjsonpタイプのajaxを処理する時に自動的にあなたのためにコールバック関数を生成して、データを取り出してsuccess属性の方法によって調整します.
        参考記事:1)http://justcoding.iteye.com/blog/1366102
2)http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
javascript高級---惰性関数