json data_javascriptスキル向けAJAXクロスドメインリクエストの実装方法

AJAX の制限の 1 つは、クロスドメイン リクエストが許可されていないことであることは誰もが知っています。 ただし、それは JSONP を使用することで実現されます。 JSONP は、クロスドメイン URL を参照できる JS スクリプトであるスクリプト タグを介して挿入する方法ですが、結果を自分で処理できるように、コールバック関数 (独自のページ上にある必要があります) を提供する必要があります。 JSONP が jQuery、MooTools、Dojo Toolkit でどのように実装されるかを見てみましょう。

jQuery の JSONP
jQuery.getJSON メソッド:

Js コード

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

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
q: "アーセナル"
} ,function(tweets) {
// ここで応答を処理します
console.info("Twitter returns: ",tweets)
});

または同様のもの

Js コード

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

$ .ajax({
> type: "get",
jsonp:"callback",
success:function(data) { >
MooTools JSONP
MooTools には Request.JSONP クラスが必要です。ここから MooTools More をダウンロードできます。
別のドメインから json を取得するのは簡単です。

Js コード " http://search.twitter.com/search.json",
data: {
q: "Arsenal"
},//送信されたパラメーター。パラメーターがない場合は、送信されません。 write
callbackKey: 'jsoncallback',//コールバック関数のパラメータ名を自分で定義します

onComplete: function(tweets) {
// 検査のために結果をコンソールに記録します
console.info ("Twitter returns: ",tweets) ;
}
}).send();


コールバック関数のパラメータ名を定義する場合と同じです。

サーバー側では次のようにする必要があります。 取得:Js コード

コードをコピー

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

String callback = request.getParameter("jsoncallback");//コールバック メソッド名を取得します
response.setHeader("Cache-Control", "no-cache"); setContentType ("text/json;charset=UTF-8");
PrintWriter out;
try {
out = response.getWriter();
out.print(callback "(" message " ) "); // ここがキーです。主にここです。
Out.flush ();
Out.Close ();
} Catch (IOEXception E) {
E.printstacktrace ();

mootools のフレームワーク設計アイデアをもう一度称賛します。

Dojo JSONP
JSONP は Dojo Toolkit に必要です。 dojo.io.script に移動します (例を表示するにはクリックしてください)


Js code

コードをコピー コードは次のとおりです: // dojo.io.script は外部スクリプトです

dojo.require("dojo.io.script");

// リソースの準備ができたとき
dojo.ready(function() {

// get メソッドを使用します
dojo.io.script.get({
) // Twitter から JSON を取得する URL
url: "http://search.twitter.com/ search.json "、
//コールバックparamater
callbackparamname：" callback "、// twitterは" callback "
//
>
jsonp is is