minglight

談JSONP之前要先談一下瀏覽器的限制 :

    瀏覽器是不允許存取不同domain的資源(JSON, HTML, XML...etc), 也就是說, 你沒辦法用Javascript去讀別人網站的內容, 唯一能做的就是用iframe把別人網頁內容顯示出來而已

為什麼可以用JSONP可以呼叫別的網站的內容, 這是漏洞嗎? 

    瀏覽器是可以允許你去執行別的網站的JS檔, 也許你有用過但是沒有注意到, 你曾經直接用<script> 去執行jquery的script.
    也就是說執行JS是允許的, 但是不能去撈別人網站資料來改. 這也就是為什麼會有cross site script attack的原因 (所以有做留言版的功能的記得要擋掉<script>tag)

什麼是JSONP?

    JSONP其實就是騙瀏覽器, 把你本來要的資料當成Javascript執行, 但是也需要一些條件,
   
    用jquery舉例來說, 你想要得到別的網站的user information, 格式為 {user : 'Hank'}, 你需要這麼做

    Browser端 

    1. $.ajax的option, dataType : 'jsonp' 

         讓browser把回傳的東西當做javascript執行

    2. create global function : function handleUser(data){.......}

        Server回傳的text長這樣 : "handleUser({user : 'Hank'});", 然後瀏覽器就會乖乖執行了

    3. 告訴Server傳回的function名稱

        一般來說會加一個querystring : callback=handleUser => http://xxx.xxx.com?callback=hanldleUser

  Server端 : 

    1. 收到request時, 要分析如果有querystring是callback, 要把本來回傳的json, 外面包一個function name => "handleUser({json....});"

  錯誤處理 : 

    基本上你使用JSONP是沒辦法錯誤處理的, jquery的$.ajax就有提到, error這個function不會被呼叫到! 你也沒辦法得到error code以及response等資訊

    現在只有一種做法就是設定timeout, 如果太久沒有回應, 就執行timeout的function

    這裡有一個jquery lib : jqeury-jsonp https://github.com/jaubourg/jquery-jsonp/blob/master/doc/API.md

    幫你implement timeout處理, 以及語法錯誤處理 XD