You are here
深入理解jsonp跨域请求原理
星期三, 2017-09-20 18:11 — adminshiping1
在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题有两种方法：
一、jsop
二、XMLHttpRequest2中可以配合服务端来解决，在响应头中加入Access-Control-Allow-Origin:*
1、同源：
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同
1.1目的：保护用户信息安全
1.2限制：cookie、localStorage和IndexDB无法读取
无法操作跨域的iframe里的dom元素
ajax请求不能发送
2、跨域：
不同源则为跨域
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 同源 只是目录不同
3、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>
4、后台代码
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>
效果图：
普通分类: