深刻理解jsonp跨域請求原理

在進行網站開發的過程當中常常會用到第三方的數據，可是因爲同源策略的限制致使ajax不能發送請求，所以也沒法得到數據。解決ajax的跨域問題有兩種方法：

　　1、jsop 　

　　2、XMLHttpRequest2中能夠配合服務端來解決，在響應頭中加入Access-Control-Allow-Origin:*

一、同源：

　　同源策略是瀏覽器的一種安全策略，所謂同源是指，域名，協議，端口號徹底相同
　　1.1目的：保護用戶信息安全
　　1.2限制：cookie、localStorage和IndexDB沒法讀取
　　沒法操做跨域的iframe裏的dom元素
　　ajax請求不能發送

 二、跨域：

不一樣源則爲跨域

1      http://api.example.com/detail.html  不一樣源 域名不一樣  
2      https//www.example.com/detail.html   不一樣源 協議不一樣  
3      http://www.example.com:8080/detail.html    不一樣源    端口不一樣  
4      http://api.example.com:8080/detail.html    不一樣源    域名、端口不一樣  
5      https://api.example.com/detail.html    不一樣源    協議、域名不一樣  
6      https://www.example.com:8080/detail.html    不一樣源    端口、協議不一樣  
7      http://www.example.com/detail/index.html    同源    只是目錄不一樣  

三、jsonp原理：

其本質是利用了標籤具備可跨域的特性，由服務端返回預先定義好的javascript函數的調用，而且將服務端數據以該函數參數的形式傳遞過來。

1  <script>
2        function fuc(data){
3          console.log(data.name);
4         }
5      </script>
6      <script src="http://www.baidu.com/api.php?callback=fuc"></script>    

四、後臺代碼

1 <?php
2     $cb = $_GET['callback'];
3     $data = array(
4                 'name'=> 'zs',
5                 'age'=>18,
6                 'gender'=>true
7             );
8     echo $cb.'('.json_encode($data).')';
9 ?>    

案例：利用jsonp訪問百度天氣

 1   $(function () {
 2         // 發送jsonp請求
 3         $.ajax({
 4             type:"get",
 5             url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',
 6             data:{
 7                 location:$("#city").val()||"上海"
 8             },
 9             dataType:"jsonp",
10             success: function (data) {
11                 //渲染模版
12                 var html = template('template',{list:data.results[0].weather_data})
13                 $('tbody').html(html);
14 
15             }
16         });
17     });

　　使用template加載數據

<script type="text/template" id="template">
      <% for(var i=0 ; i< list.length ;i++){ %>
          <tr>
          <% var item = list[i]; %>
          <td><%=item.date%></td>
          <td><img src="<%=item.dayPictureUrl%>" alt=""/></td>
          <td><img src="<%=item.nightPictureUrl%>" alt=""/></td>
          <td><%=item.temperature%></td>
          <td><%=item.weather%></td>
          <td><%=item.wind%></td>
          </tr>
       <%}%>
</script>

　　效果圖：