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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

May 16, 2016 pm 05:45 PM

ajax jsonp

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

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

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

クライアントコード:

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

 
<!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://www.xxxxxxxxxxxx.cn/js/jquery.min.js"></script> 
<script type="text/ javascript "> 
jQuery(document).ready(function(){ 
$.ajax({ 
type: "get", 
async: false, 
url: "http: / /www.xxxxxxxxxxxx.cn/demos/jsonp.php", 
dataType: "jsonp", 
jsonp: "callback", // jsonp コールバック関数名パラメータを取得するためにリクエスト ハンドラーまたはページに渡されますname (通常、デフォルトは callback) 
jsonpCallback: "feedBackState", // カスタマイズされた jsonp コールバック関数名、デフォルトは jQuery によって自動的に生成されるランダムな関数名です 
success: function(data){ 
 var $ul = $("<ul></ul>"); 
$.each(data,function(i,v){ 
$("<li/>") . text(v["id"] " " v["name"]).appendTo($ul) 
}); 
$("#remote").append($ul); , 
エラー: function(){ 
alert('fail'); 
}); head> 
<body> 
リモートデータは次のとおりです: 
<div id="remote">
</body> ; 
</html> 

 

サーバー コード (この例では PHP を使用します) 
: 

コードをコピーします

コードは次のとおりです。 <?php $jsonp = $_REQUEST["callback"] $str = '[ {"id" :"1","name":"テスト 1"},{"id":"2","name":"テスト 2"}]'; $str = $jsonp " (" .$ str.")";

echo $str;

?> 

Jsonp の原則と簡単な例

jquery カプセル化されているため、実際の実装メソッドが表示されない場合があります。説明するために次の例を使用します。
クライアントコード:

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

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

 
<!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" > 
<meta http-equiv="Content-Type" content="text/html; 文字セット=utf-8" /> 
<head> 
<title>jsonp テスト例</title> 
<script type="text/javascript" src="http:// www .xxxxxxxxxxxx.cn/js/jquery.min.js"></script> 
<script type="text/javascript"> 
function CallJSONPServer(url){ // JSONP サーバーを呼び出します , url はリクエストサーバーのアドレスです 
var oldScript =document.getElementById(url); // 呼び出しサーバーがページに登録されている場合は、再度呼び出します 
if(oldScript){ 
oldScript.setAttribute(" src ",url); 
return; 
} 
var script =document.createElement("script"); // サーバーが登録されていない場合は、登録してリクエストします 
script.setAttribute (" type", "text/javascript"); 
script.setAttribute("src",url); 
document.body.appendChild(script) ); 
} 
function OnJSONPServerResponse(data){ 
var $ul = $(""); 
$.each(data,function(i, v) { 
$("<li/>").text(v["id"] " " v["name"]).appendTo($ul) 
}); $( "#remote").append($ul); 
</script> 
<body> 
 button" value="クリックしてリモート データを取得" onclick="CallJSONPServer('http://www.xxxxxxxxxxxx.cn/demos/jsonp_original.php')" /> 
<div id="remote"> ;< /div> 
</html> 

 サーバーコード


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

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

<?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、アプリケーション プロセス中に互換性がありません。 

それで、友達が何か問題に遭遇したら、投稿して一緒に話し合いましょう。
誰でも再版を歓迎します。再版する場合は、オリジナリティを示し、リンクを追加する必要があります。そうでない場合は...ここでは単語は省略されています

署名: 一緒にコミュニケーションし、一緒に学び、困っている人を助け、成功を達成する一緒の道。