首頁 > web前端 > js教程 > AJAX跨域請求json資料的實作方法_javascript技巧

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

WBOY
發布: 2016-05-16 17:16:27
原創
1044 人瀏覽過

我們都知道,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
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板