jqueryのajaxとgetJsonのクロスドメインでjsonデータを取得する（グラフィックチュートリアル）

この記事では、ドメインを越えて json データを取得するための jquery の ajax と getJson の実装方法を主に紹介します。必要な友達はぜひ参考にしてください。

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

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

現在、ブラウザ側でクロスドメイン アクセスによく使用される方法は 2 つあります:

1。実際には jsonp を使用して実装される、jQuery の ajax を介したクロスドメイン。

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

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

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
});

サーバー側のサンプル コード (Java を例に取る):

サーバー側のコードが重要なポイントですが、最初はクライアントがクロスドメインに直接アクセスできればよいと考えていました。実際には、これは当てはまりません。サーバーが必要です。エンドサポートだけで十分です。

public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根据html指定的jsonp回调函数的参数名，获取回调函数的名称
//callbackName的值其实就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接
//{"name":"张三","age":28}
//\是对"号进行转义
String jsonStr = "{\"name\":\"张三\",\"age\":28}";
//最终返回的数据为：success_jsonpCallback({"name":"张三","age":28})
String renderStr = callbackName+"("+jsonStr+")";
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(renderStr);
}

jsonp の原理:

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

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

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

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

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

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

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

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

Parameters	Description
url	必須。リクエストの送信先となる URL を指定します。
データ	はオプションです。リクエストとともにサーバーに送信されるデータを指定します。
success(data,status,xhr)	オプション。リクエストが成功したときに実行する関数を指定します。 追加パラメータ: response - リクエストからの結果データが含まれます status - リクエストのステータスが含まれます xhr - XMLHttpが含まれますリクエストオブジェクト

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

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

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

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

$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
    function (data) {
        alert(data);
    }
);

実行原理:

リクエストを送信するとき、サーバーはコールバック関数名を取得し、パラメーターを使用してサーバーにコールバック関数名を渡す必要があります。データを返す クライアントが調整できるように、フォームがクライアントに返されます。

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

最終的な実際のリクエストは次のとおりです: http://api.taovao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

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

上記は私があなたのためにまとめたものです。

関連記事:

jquery+ajaxiframe適用時に高さに適応させる

AJAX二次連携の実装方法とは

jquery+ajax中国語対応文字化けしたjsonが返される現象

以上がjqueryのajaxとgetJsonのクロスドメインでjsonデータを取得する（グラフィックチュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。