關於jsonp跨域請求的實現原理

jsonp作爲常見的跨域方法，它的實現原理或許都有所瞭解，就是利用標籤的src屬性，避開同源策略的限制。.

實際操作如下：

1、首先是www.domain.com下的index.html頁面

    var ur="http://www.test.com/test.php?callback=func" //定義請求url,其中參數值func爲自定義的回掉函數名
    var script=document.createElement("script");          //創建script標籤
    script.setAttribute("src",ur);                        //爲srcipt標籤設置scr值爲ur
    var body=document.getElementsByTagName("body")[0];    //獲取body
    body.appendChild(script)                              //將寫好的script標籤添加到頁面中

    function func(res){                                    //自定義的回調函數
        console.log(res)                                   //處理返回來的數據
        body.removeChild(script)                           //清除去script標籤
    }

這樣，當這段代碼被執行之後，頁面會被創建一個script標籤，該標籤的src屬性指向另一個不同域名www.test.com下邊的test.php文件，同時攜帶參數callback=func。發出的請求爲:www.test.com/php?callback=func,請求類型爲：script。

2、www.test.com域下的test.php

<?php

    $data='[{"Name":"a1","Number":"123","Contno":"000","QQNo":""},{"Name":"a1","Number":"123","Contno":"000",
"QQNo":""},{"Name":"a1","Number":"123","Contno":"000","QQNo":""}]';       //需要返回的數據

    $callback=$_REQUEST['callback'];                                      //獲取回掉函數名
    echo $callback."($data)";                        //將數據作爲參數，傳給回調函數，返回給頁面 

?>

test.php首先定義了需要返回給請求的數據（json字符串格式），然後獲取到請求攜帶的參數callback（它的值爲func），然後將數據作爲回調函數的參數，返回給頁面。響應回的具體內容爲：

其實就是把自定義的回掉函數func裏填充進具體的數據並執行該函數，當這段代碼，作爲script標籤的內容被返回到
頁面之後就會被執行。執行結果如下：

可以看到自定義的回調函數func填充進數據之後，被執行，console.log輸出了數據的具體內容。跨域獲取數據完成！

3、關於jquery裏的ajax跨域

jquery中的可以利用ajax方法的jsonp跨域，其實他的原理跟原生js的jsonp跨域是相同的（通過創建script標籤，利用
src屬性來完成），而跟ajax、xhr這些其實是沒什麼關係的。

$.ajax({
    url:"http://www.test.com/test.php",
    dataType:"jsonp",
    success:function(res){
        console.log(res)
    },
    error:function(mes){
        console.log(mes)
    }
})

利用jquery中的 ajax jsonp對同樣php文件進行跨域請求，發出的請求如下：

這裏的Type類型暴露了它的本質，其實也是利用了script的src，只是這裏對它進行了封裝，不需要再自己寫回掉函數
（jquery隨機生成），而是統一在success裏對返回的數據進行處理。當然也可以通過jsonpCallback參數來自定義回
掉函數名。

好了，關於jsonp，知道的就這些啦！再見，各位！