[Javascript] 用 JSNOP 來解決 Cross Domain 問題

Screenshot 2016-03-01 01.23.47

Ajax cross domain

之前我的解法都是

在後端的API 上,以PHP為例:

 

目前都只在後端解決過 cross doamin issue

除了在 Header 加上 access-control-allow-origin 資訊外

其他在後端的解法也可以寫個 Proxy API 的方式(以PHP舉例來說,可以使用 file_get_contents 來取外部資料) 的方式,在後端取到資料後,再丟回前端來

之前都是在後端解決這類問題

直到最近在一個因緣際會下,認識了 JSONP(JSON with Padding)才豁然開然「前端」也可以有方法解 Cross domain 不能取得資料問題!

 

JSONP是資料格式 JSON 的一種「使用模式」,可以讓網頁從別的網域要資料。另一個解決這個問題的新方法是跨來源資源共享。

ref: wikipedia https://zh.wikipedia.org/zh-tw/JSONP

 

來看看範例吧!

以下是從 Stackoverflow 的參考範例 Ref: http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about

Example 1. Basic JavaScript example (simple Twitter feed using JSONP)

 

Example 2. Basic jQuery example (simple Twitter feed using JSONP)

 

有注意到 Example 1

URL裡頭有個 callback=myCallback 嗎?

這裡的作用是說 將結果傳進 myCallback 這支 function 內

以上兩種範例的連結網址結果都是一樣的回傳結果

 

比較 jQuery 以及原生 Javascript 的JSNOP寫法後

我自己是比較 喜歡 jQuery $.ajax寫法,因為方便以及快速許多啊!!

 

Leave a Reply