【AnglarJs】JSONPクロスドメインアクセスデータ転送

4241 ワード

アングラーJS

一文字の差しかないJSONを自然に思い出しますよね.
JSON(JavaScript Object Notation)とJSONP(JSON With Padding)はアルファベットの違いしかありませんが、彼らはまったく同じことではありません.
JSONはデータ交換形式であり、JSONPは開発者の知恵によって作成された非公式クロスドメインデータ相互作用プロトコルである.私たちは最近比較的に火のついたスパイ戦片を持っています.JSONは地下党の人たちが情報を書いたり交換したりする「暗号」です.JSONPは暗号で書いた情報を自分の同志に伝える時に使う接頭式です.見ましたか?一つは情報を記述するフォーマットであり、一つは情報伝達の双方が約束した方法である.

ブラウザは、ソースポリシーという機構があり、グローバルレベルでは、ページローディングまたは自身のソースとは異なるドメインの任意のスクリプトを実行することが禁止されている.
JSONPは、ブラウザのセキュリティ制限を回避して、異なるドメインからデータを要求する方法です.

Webページでjsファイルを呼び出すときはドメインをまたぐかどうかの影響を受けない(それだけでなく、「Src」という属性を持つラベルはドメインをまたぐ能力を持っていることも分かった.
純粋なweb端末(ActiveXコントロール、サービスエンドエージェント、未来に属するHTML 5のWebsocketなどは計算しない)でドメインをまたいでデータにアクセスしたいなら、それはリモートサーバでjs形式のファイルにデータを入れて、クライアントの呼び出しとステップアップのために処理することです.JSONの純粋な文字データフォーマットは、複雑なデータを簡潔に記述し、js元によってサポートされているので、ウェブクライアントは、呼び出しスクリプトと同じように、ドメインサーバ上で動的に生成されたjs形式ファイル(一般的にはJSONをサフィックスとする)を呼び出すことによって、JSONファイルを動的に生成することが明らかになった.クライアントに必要なデータを入れるのが目的です.クライアントがデータを使用しやすくするために、徐々に非公式転送プロトコルが形成され、JSONPと呼ばれるようになりました.このプロトコルの一つのポイントは、ユーザーがサービス端末にcalbackパラメータを渡すことを許可し、サービス先でデータを返すときに、このcalbackパラメータを手紙の数名としてJSONデータを包みます.クライアントは自分の関数をカスタマイズして、自動的にデータを返すことができます.

JSONPの原理は、XHR要求の代わりに「script」タブからGET要求を開始することである.JSONPは「script」タブを生成してDOMに挿入し、ブラウザが引き継ぎ、src属性が指すアドレスに要求を送信します.
サーバが要求を返すと、応答結果はJavaScript関数にパッケージされ、要求に対応するコールバック関数によって呼び出される.
AnglarJSは$httpサービスでJSONP補助関数を提供しています.httpサービスのjsonp方法で要求を送ることができます.以下のようにします.
$http .jsop("https://api.github.com?callback=JSON_CALLBACK").success(function){
//データ｝
要求が送信されると、AnglarJSは、DOMに次のような＜script＞タグを生成する.
＜script src=”https://api.github.com?callback=angular.callbacks._0「 type=「text/javascript」
注意、JSON_CALLBACKは、特にこの要求のために生成されたカスタム関数に置き換えられている.JSOPNをサポートするサーバがデータを返すと、データはAnglarJSから生成された名前関数anglar.callbacks.uに包装されます.この例では、GitHubサーバは、コールバック関数に含まれるJSONデータを返します.応答は以下のように見えます.
//簡潔
angglar.callbacks.u0({
'meta':''X-Rate Limit-Limit':'60','status':200','data':''current_uster':'https://api.github.com/user'})AnglarJSが指定されたコールバック関数を呼び出すと$httpのpromiseオブジェクトに対してレスリングを行います.JSONPをサポートするバックエンドサービスを自分で開発する場合、要求されたコールバック関数に応答するデータが含まれていることを確認します.JSONPを使うには潜在的な安全リスクを意識する必要があります.まず、サーバーは完全にオープンします.バックエンドサービスがアプリケーションのJavaScriptを起動することができます.私たちがコントロールしていない外部サイト(または意図的な攻撃者)は、いつでもシナリオを変更できます.サーバーまたは中間者は、追加のJavaScriptロジックをページに戻して、ユーザのプライバシーデータを暴露することができます.要求は「script」タブで送信されますので、JSONPでGET要求を送信するしかありません.そして台本の異常も扱いにくいです.JSONPを使う時は慎重に、信頼してコントロールできるサーバーだけと通信してください.

一言で言うと、scriptタグを利用して同源戦略をバイパスして、このようなデータを得ます.jsonpcalbackはページに存在するコールバック方法で、パラメータは入手したいjsonです.

Jqueryでjsonpの使用

myUrl = "http://localhost:8090/api/test";



$.ajax({

　　type:"GET",

　　url:myUrl,

　　dataType:"jsonp",

　　jsonp:"callback",

　　jsonpCallback:"jsonpCallback",

　　success:function(data){

　　　　alert(data.msg);
　　}

});



function jsonpCallback(data){

　　alert(data);

}

1.jsonpはget要求を使用して、同じソースの問題を解決し、javascriptコードに戻ります.javascriptファイルを要求するのは同じソースの問題がないからです.
2.要求データの種類がjsonpの場合、calback=JsonpCallbackをurlに加算し、http://localhost:8090/api/testcallback=jsonpCallback
3.フロントjavascriptでjsonpCallback関数を定義しています.この関数はwindowの下、つまりグローバルの関数を定義しなければなりません.そうでなければ見つけられません.
4.バックグラウンド取得要求のcalbackパラメータ値jsopCallbackは、文字列「jsonpCallback」に戻り、その結果が返ってきます.
5.戻りたいのはscriptです.まずはJsonpCallback関数を呼び出します.この関数が見つかったかどうかは関係なく、success関数を呼び出します.
6.jsonpとjsonpCallbackを定義していない場合、jsonpはデフォルトでは「calback」となり、jsopCallbackはJqueryが自動的に生成する関数名となります.

angglarJSでjsongの使用

myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";



$http.jsonp(myUrl).success(
　　function(data){

　　　　alert(data);

　　}

);



1.angularJS   $http.jsonp  

2.  callback      ，    JSON_CALLBACK ，   success    ，JSON_CALLBACK      。

3.           ，       window      。

4.url     callback

5. callback JSON_CALLBACK ，    success，  window  JSON_CALLBACK  ，        。

ジョブ20