JSONPの実装原理と事例を詳しく解説

今回は、JSONP実装の原則と事例について詳しく説明します。JSONP実装の注意点とは何ですか?実際の事例を見てみましょう。

クロスドメインの問題は、常にフロントエンドでよくある問題です。クロスドメインについて話すとき、必ず最初に登場するテクノロジーは JSONP です

私の理解では、JSONP は ajax ではなく、 script タグを document に挿入し、_callback メソッドを作成し、サーバー経由で _callback メソッドを実行し、いくつかのパラメータを渡します。JSONP の制限は、script タグが挿入されるため、パラメータは URL 経由でしか渡せないことです。特に jQuery の ajax メソッドの場合、type: 'POST' が設定されている場合でも、dataType: 'jsonp' が設定されている限り、リクエスト中に GET リクエストが自動的に使用されます

ロジックを実装する

step1: _callbackメソッドを作成する(_callback scriptタグと_callbackメソッドは削除可能)

step2: scriptタグを挿入する

step3: サーバーがjsを出力する

実装:

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 创建_callback方法
*/ 
//_callback函数名
funName = '_cb' + (Math.random() * 1000000);
//创建_callback方法
window[funName] = function (data) {
if (typeof opt.success == 'function') {
opt.success(data);
}
window[funName] = null;
delete window[funName];
document.body.removeChild(script);
script = null;
};
/*
* step2 插入script标签
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服务器输出js
* 服务器应接受url参数中_callback的值,作为函数名执行输出js
* 类似输出
* _callback({"name":"jsonp","description":"jsonp test"});
*/ 
/*
* 处理error
*/
script.addEventListener('error', function () {
window[funName] = null;
delete window[funName];
if (typeof opt.error == 'function') {
opt.error();
}
document.body.removeChild(script);
script = null;
});
};
requestJsonp({
url: 'http://www.url.org?tid=Jsx2',
success: function (data) {
console.log(data);
},
error: function () {
console.log('request error!');
}
});

ブラウザの動作は、script タグを挿入し、js コードを実行し、script タグを削除することです

実装コードでは、互換性や、データを渡した後の URL 生成の問題は考慮されていません。

jsonp の長所と短所を説明します:

JSONP の利点は次のとおりです:

XMLHttpRequestオブジェクトによって実装される Ajax リクエストのような同一生成元ポリシーによって制限されません。より優れており、古いブラウザで実行でき、XMLHttpRequest や ActiveX のサポートは必要ありません。リクエストが完了した後、コールバックを呼び出すことで結果を返すことができます。

JSONP の欠点は次のとおりです:

GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしません。クロスドメイン HTTP リクエストのみをサポートし、異なるドメインの 2 つのページ間で JavaScript を実行する方法の問題を解決できません。通話の問題。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSONPを使用するケースのまとめ

jsonをjsのパラメータとして使用する方法

以上がJSONPの実装原理と事例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。