我們都知道,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.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