一、同源策略

一個頁面的ajax只能獲取這個頁面相同源(協議、域名、端口號都必須相同)的數據。

二、jsonp方法

1、json和jsonp

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式

JSONP是JSON with Padding的略稱。它是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問

2、解決跨域的原理：

首先，<script>標簽的src屬性並不被同源策略所約束，所以可以獲取任何服務器上腳本並執行。創建一個回調函數(function callback(data)

)，然後在遠程服務上調用這個函數(callback({message:"success"})

)並且將JSON 數據形式作為參數傳遞，完成回調。

將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義.

3、jquery實現jsonp

可以使用$.getJSON(url,[data],[callback])方法：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){//這樣getJSON方法才會知道是用JSONP方式去訪問服務,會自動生成一個函數名
        alert(data.name + " is a a" + data.sex);
    });
</script>

如需自定義函數名

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
   $.ajax({
        url:"http://localhost:20002/MyService.ashx?callback=?",   
        dataType:"jsonp",
        jsonpCallback:"person",//自定義的函數名
        success:function(data){
            alert(data.name + " is a a" + data.sex);
        }
   });
</script>

web前端學習歷程--跨域問題