2013年9月21日 星期六

Ajax跨域請求 - jQuery.getJSON

從事前端開發的工程師應該或多或少都知道ajax無法做跨域請求,除了JSONP這種形式以外:
$.getJSON( 
    "http://localhost:3030/parse?callback=resHandler",
    { q: queryText }
);

但是這樣的用法是不會觸發success callback的,因為從server side回傳的資料會被當做script直接執行,假設從server side回傳的訊息為:
{
    name: "kevin",
    age: 18
}

如此一來在收到這個訊息後會直接執行這段程式碼,但是因為這段訊息並不遵守javascript的文法,因此會fail掉。聰明的程序猿一定知道,我們必須在server side回傳的資料上加點料,讓我們要的資料能適合的函式處理。
從第一段程式碼中看到,我們在請求的url上加了一個callback參數,通知server side 我們要用什麼函式來對資料做處理,假如這段函式叫resHandler好了,我們期待的運算是這樣:
resHandler(data);

data為server應該要回傳的資料。所以在server side我們就應該要這樣處理:
var data = '{msg: "success!"}' //主機回傳資料
var callbackFunction = req.query.callback;

res.send(callbackFunction+"("+")");

這時client端接收到這段資訊後會直接執行他:
resHandler({msg: "success!"})

假如resHandeler為 function(data){alert(data.msg);} ,user便會看到視窗跳出"success"的提示。