ドメインをまたいでjsonデータを取得するjqueryのajaxとgetJsonの実装方法_jquery

多くの開発者は jquery を使用してフロントエンドとサーバーサイドでデータを操作しているため、フロントエンドで jquery を使用すればあらゆるサイトのデータを読み取ることができると考えがちです。最近開発をしていた際、他社のプロジェクトとデータを共有する必要があり、サーバーリソースをあまり占有しないことを考えて、サーバー経由でデータを転送するのではなく、HTMLで直接読み込むことにしました。その後、ブラウザ側でクロスドメインアクセスの問題が発生しました。

クロスドメインのセキュリティ制限はブラウザ側を指しますが、サーバー側にはクロスドメインのセキュリティ制限はありません。

現在、ブラウザ側のクロスドメイン アクセスには 2 つの一般的な方法が使用されています:

1. jQuery の ajax によるクロスドメイン これは実際には jsonp を使用して実装されます。

jsonp は英語の json with padding の略称です。これにより、スクリプト タグをサーバー側で生成してクライアントに返すことができます。つまり、JavaScript タグが動的に生成され、データは JavaScript コールバックを通じて読み取られます。

HTML ページ側のサンプル コード:

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

//まず jquery の js パッケージを紹介します
jQuery(document).ready(function(){
$.ajax({

type: "get", //jquey はポストクロスドメインをサポートしていません

async:false、

url: "http://api.taobao.com/apitools/ajax_props.do", //クロスドメインリクエスト URL

データタイプ: "jsonp"、

//jsonp コールバック関数名を取得するためにリクエスト ハンドラーに渡されるパラメータ名 (デフォルト: callback)

jsonp: "jsoncallback"、

//カスタマイズされた jsonp コールバック関数名、デフォルトは jQuery によって自動的に生成されるランダムな関数名です

jsonpCallback:"success_jsonpCallback",

//クロスドメインサーバー上の json データの取得に成功した後、このコールバック関数は動的に実行されます

成功: function(json){

アラート(json);
サーバー側のコードが重要なポイントです。私は当初、クライアントが jsonp を通じてクロスドメイン アクセスに直接アクセスできる限り、そうではなく、サーバー側のサポートが必要であると考えていました。

コードをコピー

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

public void jsonpTest() throws IOException{ HttpServletRequest リクエスト = ServletActionContext.getRequest(); HttpServletResponse 応答 = ServletActionContext.getResponse();

//HTML で指定された jsonp コールバック関数のパラメータ名に基づいてコールバック関数の名前を取得します
//callbackName の値は実際には次のようになります: success_jsonpCallback

文字列コールバック名 = (String)request.getAttribute("jsoncallback");

//json 文字列の単純なシミュレーション。実際には変換に Google の gson を使用できます。回数は文字列のスプライスによって行われます

//{"名前":"張三","年齢":28}

//「」記号をエスケープするためです

String jsonStr = "{"名前":"張三","年齢":28}";

//最終的に返されるデータは次のとおりです: success_jsonpCallback({"name":"Zhang San","age":28})

文字列 renderStr = callbackName "(" jsonStr ")";

response.setContentType("text/plain;charset=UTF-8");

応答.getWriter().write(renderStr);

}

jsonp の原則:

まずクライアント側でコールバック (例: 'jsoncallback') を登録し、次にそのコールバック名 (例: success_jsonpCallback) をサーバー側の対応する処理関数に渡します。

サーバーはまず、クライアントに返す必要がある json データを生成します。次に、JavaScript 構文を使用して関数を生成します。関数名は、渡されたパラメーター (jsoncallback) (success_jsonpCallback) の値です。

最後に、json データがパラメーターとして関数に直接配置され、js 構文ドキュメントが生成され、クライアントに返されます。
クライアントのブラウザはスクリプト タグを解析し、サーバーから返されたデータをパラメータとして使用します。
クライアントによって事前定義されたコールバック関数を渡します (上記の例では jquery $.ajax() メソッドによってカプセル化されています)。成功: 関数 (json))。

実際には、データのクロスドメイン読み込みはスクリプトを動的に追加することで行われます。データを直接取得できないため、コールバック関数を使用する必要があります。

2. jquery の getJson を使用してドメイン間でデータを読み取る

実際、getJson メソッドの基本原理は、ajax が jsonp を使用する方法と同じです。

GetJson は、リモート データを取得し、json 形式で返すために jquery でよく使用されます。関数のプロトタイプは次のとおりです:

jQuery.getJSON(url,data,success(data,status,xhr))

パラメータ 説明 URL 必須。リクエストの送信先となる URL を指定します。 データ オプション。リクエストとともにサーバーに送信されるデータを指定します。 成功(データ、ステータス、xhr)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

オプション。リクエストが成功したときに実行する関数を指定します。

追加パラメータ:

• レスポンス - リクエストからの結果データが含まれます
• ステータス - リクエストのステータスが含まれます
• xhr - XMLHttpRequest オブジェクトが含まれます

この関数は省略された ajax 関数であり、実際には以下と同等です: コードをコピー

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


$.ajax({
url: url,
data: data,
成功: コールバック,

dataType: json
}); 🎜>本題に戻り、getJson を使用してドメイン間でデータを取得する方法を見てみましょう。

HTML ページのサンプル コード:

コードをコピー

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

$ .getJSON( "http://api.taabao.com/apitools/ajax_props.do&jsoncallback=?",
関数 (データ) {
アラート(データ);
}
);

実行原理:

リクエストを送信するときは、コールバック関数名をサーバーに渡す必要があります。サーバーはコールバック関数名を取得し、クライアントがそれを呼び出せるように、戻りデータをパラメーターの形式でクライアントに返します。 。

そのため、リクエスト URL を送信するアドレスの後には、jsoncallback=? のようなパラメーターが続く必要があります。jquery は、? 番号を自動的に生成されたコールバック関数の名前に自動的に置き換えます。

最終的な実際のリクエストは次のとおりです:

http://api.taabao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

そこで、ajax メソッドと比較したいと思います。つまり、コールバック関数の 1 つは自動生成された関数名で、もう 1 つは手動で指定した関数名です。