ホームページ >ウェブフロントエンド >jsチュートリアル >js/ajax スパニング アクセス - jsonp の原則と例 (javascript および jquery 実装コード)_javascript スキル

js/ajax スパニング アクセス - jsonp の原則と例 (javascript および jquery 実装コード)_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 17:45:071343ブラウズ

幸いなことに、黙示録の後、私は再び日の出を見たので、ここで記事を書くことができます。話題に戻りましょう。私は最近プロジェクトに取り組んでおり、メインドメイン名の下にある既存の関数を呼び出すためにサブドメイン名を使用する必要がありました。ということで、私はそれを思いつきました。通常のプロジェクトでこのニーズを抱えている友人がたくさんいるので、今後の参考のために記録し、皆さんのお役に立てれば幸いです。

JSONP プロトコルとは何ですか?
JSONP はパディング付きの JSON です。同一オリジン ポリシーの制限により、XmlHttpRequest は現在のソース (ドメイン名、プロトコル、ポート) からのリソースのみを要求できます。クロスドメインリクエストを行いたい場合は、HTMLのscriptタグを使用してクロスドメインリクエストを行い、レスポンスで実行するスクリプトコードを返すことができます。JavaScriptオブジェクトはJSONを使用して直接渡すことができます。このクロスドメイン通信方式は JSONP と呼ばれます。
明らかに、JSONP はスクリプト インジェクション動作であり、そのセキュリティには特別な注意が必要です。

Jquery の jsonp インスタンス
プロトコルのクライアントとサーバーの役割をそれぞれ引き受けるには 2 つのページが必要です。

クライアント コード:

コードをコピー コードは次のとおりです:




/title> > <script type="text/javascript" src="http://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> <br><script type="text/ javascript "> <br>jQuery(document).ready(function(){ <br>$.ajax({ <br>type: "get", <br>async: false, <br>url: "http: / /www.xxxxxxxxxxxx.cn/demos/jsonp.php", <br>dataType: "jsonp", <br>jsonp: "callback", // jsonp コールバック関数名パラメータを取得するためにリクエスト ハンドラーまたはページに渡されますname (通常、デフォルトは callback) <br>jsonpCallback: "feedBackState", // カスタマイズされた jsonp コールバック関数名、デフォルトは jQuery によって自動的に生成されるランダムな関数名です <br>success: function(data){ <br> var $ul = $("<ul></ul>"); <br>$.each(data,function(i,v){ <br>$("<li/>") . text(v["id"] " " v["name"]).appendTo($ul) <BR>}); <BR>$("#remote").append($ul); , <BR>エラー: function(){ <BR>alert('fail'); <BR>}); head> <br><body> <br>リモートデータは次のとおりです: <br><div id="remote"><br></body> ; <br></html> <br><br> <br><br>サーバー コード (この例では PHP を使用します) <br>: <br><br> </div> <br><strong> コードをコピーします</strong><br><div class="codetitle"> コードは次のとおりです。 <span><a style="CURSOR: pointer" data="68849" class="copybut" id="copybut68849" onclick="doCopy('code68849')"> <u><?php </U>$jsonp = $_REQUEST["callback"] </a>$str = '[ {"id" :"1","name":"テスト 1"},{"id":"2","name":"テスト 2"}]'; </span>$str = $jsonp " (" .$ str.")"; </div>echo $str; <div class="codebody" id="code68849">?> <br><br> <br><br> <br><br>Jsonp の原則と簡単な例<br> </u></a></span> </div>jquery カプセル化されているため、実際の実装メソッドが表示されない場合があります。説明するために次の例を使用します。 <br>クライアント コード: <img alt="" src="http://files.jb51.net/file_images/article/201212/201212270948472.jpg"><br><strong></strong><br>コードをコピーします。 🎜><br><br> コードは次のとおりです: <div class="codetitle"> <div class="codebody" id="code46823"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><meta http-equiv="Content-Type" content="text/html; 文字セット=utf-8" /> <br><head> <br><title>jsonp テスト例



button" value="クリックしてリモート データを取得" onclick="CallJSONPServer('http://www.xxxxxxxxxxxx.cn/demos/jsonp_original.php')" />



サーバーコード


🎜>
コードをコピーします

コードは次のとおりです:
$str = '[{"id":"1 ","name" :"テスト 1"},{"id":"2","name":"テスト 2"}]'; $str = "OnJSONPServerResponse(" .$str.")" ; echo $str; ?>

これがどのように実装されているかは、コードを見れば誰でも理解できると思います。

注意事項
:
1. jquery は ajax 処理でパラメーターを転送するために utf-8 エンコーディングを使用するため、jsonp 処理側で utf-8 エンコーディングを使用するのが最善であり、これによりコーディングが節約されます。 , utf-8 でない場合は変換することを忘れないでください。そうしないと中国語が文字化けします。
2. 要求されたサーバー URL を http://www.xxxxxxxxxxxx.cn/?act=add のように記述することは避けてください。 http://www.xxxxxxxxxxxx.cn/index.php のように記述する必要があります。 ?act=add、アプリケーション プロセス中に互換性がありません。
それで、友達が何か問題に遭遇したら、投稿して一緒に話し合いましょう。
誰でも再版を歓迎します。再版する場合は、オリジナリティを示し、リンクを追加する必要があります。そうでない場合は...ここでは単語は省略されています署名: 一緒にコミュニケーションし、一緒に学び、困っている人を助け、成功を達成する一緒の道。