JSONPを使用したクロスドメイン通信

はじめに

非同期JavaScriptおよびXML（AJAX）は、WEB 2.0に分類される新世代のサイトの重要な技術です。 AJAXを使用すると、面倒なページのリロードなしでデータを処理できます。 データはXMLHttpREquestオブジェクトを使用して処理されます。これにより、クライアント側のJavaScriptがリモートサーバーへのHTTP接続を作成できます。 AJAXは、いくつかの異なるソースからのコンテンツを統合する多くのマッシュアップで使用されます。



ただし、クロスドメイン接続は禁止されています-これはブラウザーのポリシーです。 別のドメインにリクエストを送信しようとすると、セキュリティエラーが表示されます。 もちろん、ドメインにのみリクエストを送信すればこれらのエラーを回避できますが、サーバーよりも先に行けない場合はどのようなWebアプリケーションになりますか？ それでも他のドメインからデータを受信する必要がある場合はどうなりますか？

初期制限

最初の制限は、あるドメインからダウンロードされたスクリプトが別のドメインで操作を実行できないことです。 URLによって要求されるドメインは、現在のページのドメインと同じである必要があります。 ブラウザは、コンテンツを変更から保護するために、さまざまなソースからコンテンツを分離します。 このブラウザポリシーは非常に古く、Netscape Navigator 2.0に根ざしています。



この制限を克服するために最初に思い浮かぶのは、ドメイン内のサーバーとドメイン内のサーバーにアクセスするページを使用することです。これは、必要なサードパーティサーバーへの一種のプロキシです。 しかし、このアプローチはうまく拡張できません。 別のオプションは、フレームを使用して、GETリクエストを使用してサードパーティのコンテンツがロードされるページ上の領域を作成することです。 ただし、フレームにロードした後、このコンテンツは上記の制限の対象にもなります。



この問題を解決するはるかに有望な方法は、スクリプト要素をページに動的に挿入することです。 このスクリプトは別のドメインからロードされ、必要なすべてのデータが含まれています。

JSONおよびJSONP

JSONは、ブラウザーとサーバー間のデータ交換のための軽量形式（xmlに類似）です。 JSONはJavaScriptオブジェクトのテキスト表現です。 たとえば、シンボルと価格の2つの属性を持つオブジェクトがあります。 JavaScriptでこのように定義できます。

var ticker = {symbol: 'IBM', price: 91.42};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これは単なるJSON表現です。

 {symbol: 'IBM', price: 91.42}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下は、呼び出されたときに価格を表示する簡単なJavaScript関数の例です。

 function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JSON表現をパラメーターとして使用して呼び出すことができます。

 showPrice({symbol: 'IBM', price: 91.42}); // : Symbol: IBM, Price: 91.42
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、これらの例を両方とも1ページにまとめる準備ができました。

 function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } showPrice({symbol: 'IBM', price: 91.42});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページをロードすると、次のメッセージが表示されます。







これまでのところ、この記事では、静的JSONパラメーターを使用して関数を呼び出す方法についてのみ説明しました。 関数呼び出しでJSONを動的に「ラップ」できます。動的データを使用して関数を呼び出すことができます-この手法は動的JavaScript挿入と呼ばれます。 仕組みを理解するために、次の行を別のticker.jsファイルに記述します。

 showPrice({symbol: 'IBM', price: 91.42});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ページのコードを変更します。

 //         JSON function showPrice(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); } var url = “ticker.js”; //   ,   . //      JavaSCript. var script = document.createElement('script'); script.setAttribute('src', url); // load the script document.getElementsByTagName('head')[0].appendChild(script);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複雑なことは何もありません。 このリーマでは、ページが読み込まれた後、スクリプトの2番目の部分がトリガーされ、ticker.jsファイルが動的に読み込まれます。 このファイルには、JSONデータを使用した関数呼び出しのみが含まれています。

そして今、私たちはクロスドメイン通信に来ています。

最後のスクリプトの1行のみを変更します。

 var url = "http://some_another_domain.com/script_generator.php?param1=data1¶m2=data2"; //   ,   .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、このスクリプトはどこからでもダウンロードできます。 任意のドメインから。 そして、ロードするだけでなく、GETメソッドを使用する前にこれにパラメーターを渡します。 ダウンロード可能なスクリプト自体は、任意の方法で生成できます。 ネイティブJSONサポートは、ほとんどの言語で利用可能です。