跨域請求方式一：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")[]; //擷取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":"","Contno":"","QQNo":""},{"Name":"a1","Number":"","Contno":"",
"QQNo":""},{"Name":"a1","Number":"","Contno":"","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參數來自定義回 掉函數名。