AJAX跨域請求json資料的實作方法_javascript技巧

我們都知道，AJAX的一大限制是不允許跨域請求。 不過透過使用JSONP來實現。 JSONP是一種透過腳本標記注入的方式，它是可以引用跨域URL的js腳本，不過需要提供一個回呼函數（必須在您自己的頁面上），因此，你可以自己處理結果。 讓我們看看JSONP的是怎麼在jQuery，MooTools的，Dojo Toolkit中實現的。

jQuery的JSONP
jQuery.getJSON方法：

Js程式碼

複製程式碼

複製碼> 程式碼如下:

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
    q: "Arsenal"
} ,function(tweets) {
    // Handle response here
    console.info("Twitter returned: ",tweets);
});

或類似🎜>或類似🎜>
Js程式碼

複製程式碼 程式碼如下:

$. >                type:"get",
                 url:url,
                dataType:"jsonp",
        success:function(data){
                      $.each(data, function(key, val    $("#myDiv").html($("#myDiv").html() val.cvalue "");
                      });
      });


回呼方法的參數可以透過getJSON 取得到json物件

MooTools JSONP
MooTools 需要Request.JSONP Class , 可以從這裡下載MooTools More .  選擇Request.JSONP,

這樣從另一個域取得json就是小菜一碟了.

這樣從另一個領域取得json就是小菜一碟了.

Js

複製程式碼 程式碼如下:new Request.JPSON({

new Request.JPSON({
 ://search.twitter.com/search.json",
    data: {
        q: "Arsenal"
    },///提交的參數, 沒有參數可以不寫參數可以不寫一個參數可以不寫jsoncallback',//自行定義回呼函數的參數名稱
        onComplete: function(tweets) {
       ets);
    }
}).send();


如果自己定義了回呼函數的參數名稱. 跟jquery一樣.

伺服器端你需要這樣去取得:

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