在前后端分離的Web應用中,常常需要異步加載數據,特別是在面對大量數據請求時。這時候,JsonP的優點就能夠體現出來,而Php Json Callback則是其中的一種實現方式。
JsonP,全稱是JSON with Padding,是一種跨域解決方案。通常,Ajax的請求必須在同域名下才能成功,但JsonP請求允許跨域,可以通過script標簽的src屬性發送請求以獲取數據。這個過程類似于一個回調函數,服務器會返回一段JavaScript代碼,而這些代碼包含了Json格式的數據,這個回調函數將會處理這些數據。因此,對于頻繁請求數據,使用JsonP比單純使用Ajax能夠有效地減輕服務器的壓力。
而Php Json Callback則是一種將后端腳本數據轉換成JsonP格式的方法。以一個實際案例來說明。假設我們有一個頁面需要獲取百度翻譯API的數據,而API地址為:http://api.fanyi.baidu.com/api/trans/vip/translate。例如需要翻譯“Hello”的話,在URL后面添加:
?q=hello&from=en&to=zh&appid=2015063000000001&salt=1435660288&sign=2f0c9d6f1484e217e67a9c97a747b58b
注意,這個URL帶有一些參數,其中sign的值需要在后臺通過簽名生成,并且每個請求都要重新生成。我們可以發現,這是一個標準的Ajax請求,但跨域限制會讓它失效。這時候,我們可以使用Php Json Callback來處理:
function getTran(json){ console.log(json); } $.ajax({ url:"http://api.fanyi.baidu.com/api/trans/vip/translate", data:{q:"hello",from:"en",to:"zh",appid:"2015063000000001",salt:"1435660288",sign:"2f0c9d6f1484e217e67a9c97a747b58b",callback:"getTran"}, type:"get", dataType:"jsonp", jsonpCallback:"getTran" })
這里我們引入了jQuery庫,并用$.ajax發出了一個JsonP請求,其中最關鍵的就是callback參數和jsonpCallback參數,兩者值相等,而這個值就是我們定義的回調函數。然后在后臺的PHP文件中,我們需要將數據轉換成如下格式:
$json = json_encode($data); $callback = $_GET['callback']; exit("$callback($json)");
我們先將數組$data轉成Json格式,然后獲取到前端傳遞的回調函數名,最后返回拼接完整的字符串:
getTran({"from":"en","to":"zh","trans_result":[{"src":"hello","dst":"你好"}]});
因此,通過Php Json Callback,我們實現了跨域請求數據的功能,同時還提高了后端處理數據的靈活性和可靠性。