JSONPの実現原理
5494 ワード
次の機能があります.
1.原生方法
2.jqueryパッケージ後の方法
JSONPのクライアントの具体的な実現:
jQueryにしてもExtJsにしても、jsonpをサポートする他のフレームワークにしても、彼らの背後で行われている仕事は同じです.次に、クライアントでのjsonpの実現を徐々に説明します.
1、ドメインjsファイル内のコード(もちろんwebスクリプトセキュリティポリシーに合致する)にまたがっても、webページは無条件に実行できることを知っています.
リモートサーバremoteserver.comルートディレクトリの下にremoteがあります.jsファイルコードは以下の通りです.
ローカルサーバlocalserver.comの下にjsonpがあります.htmlページコードは以下の通りです.
ドメイン間呼び出しに成功したことを示すプロンプトフォームがページからポップアップされることは間違いありません.
2、今私たちはjsonpにいます.htmlページで関数を定義し、リモートremote.jsに入力されたデータが呼び出されます.
jsonp.htmlページコードは以下の通りです.
remote.jsファイルコードは以下の通りです.
実行後に結果を表示すると、ページは正常にプロンプトウィンドウをポップアップし、ローカル関数がドメイン間のリモートjsによって呼び出され、リモートjsによるデータも受信されたことを示します.ドメイン間でリモートでデータを取得する目的は基本的に実現されましたが、もう一つの問題が発生しました.リモートjsに呼び出すべきローカル関数の名前をどのように知らせますか?結局jsonpのサービス者は多くのサービスオブジェクトに直面しなければならないが、これらのサービスオブジェクトはそれぞれローカル関数が異なるのではないでしょうか.私たちは次に下を見ます.
3、聡明な开発者は简単に考えて、サービス侧が提供するjsスクリプトがダイナミックに生成されていればいいのではないでしょうか.そうすれば、呼び出し者はパラメータを伝えてサービス侧に「XXX関数を呼び出すjsコードがほしいので、返してください」と伝えることができ、サーバーはクライアントの需要に応じてjsスクリプトを生成して応答することができます.
見てみろhtmlページのコード:
今回のコードの変化は比較的大きく,リモートjsファイルを直接書くのではなく,動的クエリを符号化して実現することであり,これもjsonpクライアント実現の核心部分であり,本例の重点はjsonp呼び出しの全過程をどのように完成させるかにある.
呼び出しurlにcodeパラメータが渡されているのを見て、CA 1998便の情報をサーバに伝えると、callbackパラメータはサーバに、私のローカルコールバック関数はflightHandlerと呼ばれているので、クエリーの結果をこの関数に転送して呼び出してください.
はい、サーバーは頭がいいです.これはflightResultと呼ばれています.aspxのページは、jsonpに提供するこのようなコードを生成する.html:
フライトの基本情報を記述するjsonがflightHandler関数に伝達されるのを見た.ページを実行して、正常にプロンプトウィンドウをポップアップして、jsonpの実行の全過程は順調に完成します!
4、ここまでなら、jsonpのクライアント実現原理が理解できると思いますよね?残りは、ユーザーインタフェースとインタラクティブになるようにコードをカプセル化し、複数回の呼び出しと繰り返しの呼び出しを実現する方法です.
何?あなたはjQueryを使っていますが、jQueryがどのようにjsonp呼び出しを実現するか知りたいですか?では、私は良い人に最後までやって、jQueryにjsonpのコードを使用してあげます(私たちは依然として上のフライト情報で検索した例に沿って、jsonpの結果を返すと仮定します):
ちょっとおかしいですか?どうして私は今回flightHandlerという関数を書かなかったのですか?しかも運行に成功!ははは、これがjQueryの功労で、jqueryはjsonpタイプのajaxを処理する時(やはりツッコミをこらえきれず、jqueryもjsonpをajaxに分類したが、実はそれらは本当に同じではない)、自動的にコールバック関数を生成してデータを取り出してsuccess属性方法で呼び出すのを手伝って、とても爽やかではないでしょうか?
1.原生方法
2.jqueryパッケージ後の方法
JSONPのクライアントの具体的な実現:
jQueryにしてもExtJsにしても、jsonpをサポートする他のフレームワークにしても、彼らの背後で行われている仕事は同じです.次に、クライアントでのjsonpの実現を徐々に説明します.
1、ドメインjsファイル内のコード(もちろんwebスクリプトセキュリティポリシーに合致する)にまたがっても、webページは無条件に実行できることを知っています.
リモートサーバremoteserver.comルートディレクトリの下にremoteがあります.jsファイルコードは以下の通りです.
alert(' ');ローカルサーバlocalserver.comの下にjsonpがあります.htmlページコードは以下の通りです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script></head><body>
</body></html>ドメイン間呼び出しに成功したことを示すプロンプトフォームがページからポップアップされることは間違いありません.
2、今私たちはjsonpにいます.htmlページで関数を定義し、リモートremote.jsに入力されたデータが呼び出されます.
jsonp.htmlページコードは以下の通りです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert(' ， remote.js ， js ：' + data.result);
}; </script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script></head><body>
</body></html>remote.jsファイルコードは以下の通りです.
localHandler({"result":" js "});実行後に結果を表示すると、ページは正常にプロンプトウィンドウをポップアップし、ローカル関数がドメイン間のリモートjsによって呼び出され、リモートjsによるデータも受信されたことを示します.ドメイン間でリモートでデータを取得する目的は基本的に実現されましたが、もう一つの問題が発生しました.リモートjsに呼び出すべきローカル関数の名前をどのように知らせますか?結局jsonpのサービス者は多くのサービスオブジェクトに直面しなければならないが、これらのサービスオブジェクトはそれぞれローカル関数が異なるのではないでしょうか.私たちは次に下を見ます.
3、聡明な开発者は简単に考えて、サービス侧が提供するjsスクリプトがダイナミックに生成されていればいいのではないでしょうか.そうすれば、呼び出し者はパラメータを伝えてサービス侧に「XXX関数を呼び出すjsコードがほしいので、返してください」と伝えることができ、サーバーはクライアントの需要に応じてjsスクリプトを生成して応答することができます.
見てみろhtmlページのコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script type="text/javascript">
//
var flightHandler = function(data){
alert(' ： ' + data.price + ' ，' + data.tickets + ' 。');
}; // jsonp url （ ， javascript ）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // script ，
var script = document.createElement('script');
script.setAttribute('src', url); // script head， document.getElementsByTagName('head')[0].appendChild(script); </script></head><body>
</body></html>今回のコードの変化は比較的大きく,リモートjsファイルを直接書くのではなく,動的クエリを符号化して実現することであり,これもjsonpクライアント実現の核心部分であり,本例の重点はjsonp呼び出しの全過程をどのように完成させるかにある.
呼び出しurlにcodeパラメータが渡されているのを見て、CA 1998便の情報をサーバに伝えると、callbackパラメータはサーバに、私のローカルコールバック関数はflightHandlerと呼ばれているので、クエリーの結果をこの関数に転送して呼び出してください.
はい、サーバーは頭がいいです.これはflightResultと呼ばれています.aspxのページは、jsonpに提供するこのようなコードを生成する.html:
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});フライトの基本情報を記述するjsonがflightHandler関数に伝達されるのを見た.ページを実行して、正常にプロンプトウィンドウをポップアップして、jsonpの実行の全過程は順調に完成します!
4、ここまでなら、jsonpのクライアント実現原理が理解できると思いますよね?残りは、ユーザーインタフェースとインタラクティブになるようにコードをカプセル化し、複数回の呼び出しと繰り返しの呼び出しを実現する方法です.
何?あなたはjQueryを使っていますが、jQueryがどのようにjsonp呼び出しを実現するか知りたいですか?では、私は良い人に最後までやって、jQueryにjsonpのコードを使用してあげます(私たちは依然として上のフライト情報で検索した例に沿って、jsonpの結果を返すと仮定します):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",// ， jsonp ( :callback) jsonpCallback:"flightHandler",// jsonp ， jQuery ， "?"，jQuery success: function(json){
alert(json.price + json.tickets + ' 。');
},
error: function(){
alert('fail');
}
});
}); </script>
</head>
<body>
</body>
</html>ちょっとおかしいですか?どうして私は今回flightHandlerという関数を書かなかったのですか?しかも運行に成功!ははは、これがjQueryの功労で、jqueryはjsonpタイプのajaxを処理する時(やはりツッコミをこらえきれず、jqueryもjsonpをajaxに分類したが、実はそれらは本当に同じではない)、自動的にコールバック関数を生成してデータを取り出してsuccess属性方法で呼び出すのを手伝って、とても爽やかではないでしょうか?