ホームページ ウェブフロントエンド jsチュートリアル jquery_jquery配下でjsonpクロスドメインアクセスを利用する実装方法

jquery_jquery配下でjsonpクロスドメインアクセスを利用する実装方法

May 16, 2016 pm 06:22 PM
jsonp クロスドメインアクセス

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

$.ajax({
async:false,
url: '', // クロスドメイン URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', // デフォルトのコールバック
data: mydata, // Request data
timeout: 5000,
beforeSend: function(){ //jsonp メソッドがトリガーされないのは、dataType が jsonp として指定されている場合、ajax イベントではなくなることが考えられます。
},
success: function (json) { //クライアント側の jquery によって事前定義されたコールバック関数は、クロスドメイン サーバーで json データを正常に取得した後、動的に実行されます
if(json.actionErrors.length!= 0){
alert(json.actionErrors);
}

},
complete: function(XMLHttpRequest, textStatus){

},
error: function(xhr){
//Jsonp モードこのメソッドはトリガーされません
//リクエスト エラー処理
alert("リクエスト エラー (相関ネットワークのステータスを確認してください) .)");
}
});



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

$.getJSON(url "?callback=?",
function(json){

});
このメソッドは、実際には上記の $.ajax({..}) の高レベル ラッパーの例です。

サーバー側でコールバック パラメーター (例: jsonp*****) を取得して、jQuery 側で後続のコールバックを取得します
そして、次のようなものを返します: "jsonp**** *(" 返される json 配列 ")";
jquery はコールバック メソッドを通じてこれを動的にロードし、呼び出します: jsonp*****(json array);
これにより、クロスドメインの目的が達成されます。

JSONP は一種のスクリプト インジェクション (スクリプト インジェクション) 動作であるため、一定のセキュリティ リスクもあります。

注: jquey はクロスドメイン投稿をサポートしていません。
参考:
http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nginx Proxy Managerを使用してクロスドメインアクセスの認可管理を実装する方法 Nginx Proxy Managerを使用してクロスドメインアクセスの認可管理を実装する方法 Sep 27, 2023 pm 04:43 PM

NginxProxyManager を使用してクロスドメイン アクセスの認可管理を実装する方法 NginxProxyManager は、リバース プロキシ、ロード バランシング、SSL/TLS ターミナル プロキシなどの機能を実装できる強力なプロキシ サーバーです。実際のアプリケーションでは、フロントエンドのクロスドメイン アクセスで問題が発生することが多く、バックエンドのリソースを保護するために承認管理を行う必要があります。この記事では、NginxProxyManager を使用してクロスドメイン アクセスの認可管理を実装し、提供する方法を紹介します。

JSONP を使用して Vue でクロスドメイン リクエストを実装する方法 JSONP を使用して Vue でクロスドメイン リクエストを実装する方法 Oct 15, 2023 pm 03:52 PM

JSONP を使用して Vue でクロスドメイン リクエストを実装する方法の紹介 同一オリジン ポリシーの制限により、クロスドメイン リクエストを行う際にフロントエンドがある程度妨げられます。 JSONP (JSONwithPadding) はクロスドメイン リクエスト メソッドです。<script> タグの特性を使用して、<script> タグを動的に作成することでクロスドメイン リクエストを実装し、応答データをそのパラメータとして返します。コールバック関数。この記事ではVueでJSONPを使う方法を詳しく紹介します。

PHP 通信: クロスドメインのデータ送信を実現するにはどうすればよいですか? PHP 通信: クロスドメインのデータ送信を実現するにはどうすればよいですか? Aug 20, 2023 am 11:17 AM

PHP 通信: クロスドメインのデータ送信を実現するにはどうすればよいですか?はじめに: Web 開発では、多くの場合、異なるドメイン名間でのデータ送信を実現する必要があり、これにはクロスドメイン通信が必要です。この記事では、PHP 言語を使用してクロスドメイン データ送信を実現する方法を紹介し、コード例を添付します。 1. クロスドメイン通信とは何ですか?クロスドメイン通信とは、Web 開発における異なるドメイン名間でのデータ送信のプロセスを指します。通常、ブラウザーは、同一オリジン ポリシーの制限により、ページが異なるドメインのサーバーにリクエストを送信したり、応答を受信したりすることを防ぎます。したがって、異なるドメイン間で実装するには

Nginx サーバーをセットアップするためのクロスドメイン アクセス構成および CORS プロトコル サポート ガイド Nginx サーバーをセットアップするためのクロスドメイン アクセス構成および CORS プロトコル サポート ガイド Aug 04, 2023 pm 10:57 PM

Nginx サーバー構築のためのクロスドメイン アクセス構成および CORS プロトコル サポート ガイド はじめに: 現在の Web アプリケーション開発では、クロスドメイン リクエストが一般的な要件になっています。セキュリティを確保するために、ブラウザーはデフォルトで AJAX リクエストを介したクロスドメイン操作を制限します。 CORS (Cross-Origin Resource Sharing) プロトコルは、クロスドメイン アクセスの制御可能な承認を実現する信頼性の高いソリューションを開発者に提供します。 Nginx は高性能 Web サーバーおよびリバース プロキシ サーバーです。この記事では、Nginx を使用して構築する方法を紹介します。

Java でのクロスドメイン アクセスの問題を解決する方法 Java でのクロスドメイン アクセスの問題を解決する方法 Oct 11, 2023 am 08:01 AM

Java でのクロスドメイン アクセスの問題を解決する方法 Java を使用して Web アプリケーションを開発する場合、クロスドメイン アクセスの問題が頻繁に発生します。クロスドメイン アクセスとは、クライアントによって要求されたリソースが異なるドメインからのものであることを意味します。たとえば、domain2.com のリソースは www.domain1.com の Web ページから要求されます。同一オリジンポリシーの制限により、このようなクロスドメインリクエストは許可されません。この記事では、Java でのクロスドメイン アクセスの問題を解決するためのいくつかの方法を紹介し、具体的なコード例を示します。方法 1: フィルターを使用する

Vue プロジェクトでクロスドメインリクエストに JSONP を使用する方法 Vue プロジェクトでクロスドメインリクエストに JSONP を使用する方法 Oct 15, 2023 am 10:07 AM

Vue プロジェクトでクロスドメイン リクエストに JSONP を使用する方法 はじめに: Vue プロジェクトでは、サードパーティ API を呼び出してデータを取得するなど、異なるドメイン名からデータを取得する必要がある状況に遭遇することがあります。 、ブラウザが異なるため、ソース ポリシー、直接のクロスドメイン リクエストは禁止されています。ただし、場合によっては、JSONP テクノロジーを使用してクロスドメイン リクエストを実装できます。この記事では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法を紹介し、具体的なコード例を示します。 1. JSONP の仕組み

jsonp がクロスドメインの問題を解決する方法 jsonp がクロスドメインの問題を解決する方法 Nov 29, 2023 am 10:18 AM

JSONP は、<script> タグを動的に作成することでクロスドメイン リクエストを可能にするテクノロジーです。手順は次のとおりです: 1. サーバーから返されたデータの処理に使用されるコールバック関数をクライアント ページに作成します; 2. <script> タグを動的に作成し、その src 属性をターゲット サーバーの URL に設定します。を URL に追加します コールバック関数の名前であるパラメータを渡します; 3. サーバーがリクエストを受信した後、返されたデータのコールバック関数内のデータをラップしてクライアントに返します。 。

PHP で API が JSONP リクエストとクロスサイトリクエストを処理する方法 PHP で API が JSONP リクエストとクロスサイトリクエストを処理する方法 Jun 17, 2023 am 10:37 AM

クロスサイトリクエストや JSONP テクノロジーをサポートする Web アプリケーションが増えているため、PHP の API 設計者はこれらのリクエストを処理する方法を検討する必要があります。この記事では、PHP で JSONP リクエストとクロスサイトリクエストを処理する方法を説明します。まず、JSONP について見てみましょう。 JSONP (JSONwithPadding) は、クライアントとサーバー間のデータのクロスドメイン要求を可能にするテクノロジーです。これは、JavaScript コードを使用して &lt; を動的に作成することによって行われます。

See all articles