深入理解jsonp跨域请求原理

时间：2022-05-24 08:02:15

在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题有两种方法：

　　一、jsop 　

　　二、XMLHttpRequest2中可以配合服务端来解决，在响应头中加入Access-Control-Allow-Origin:*

1、同源：

　　同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同
　　1.1目的：保护用户信息安全
　　1.2限制：cookie、localStorage和IndexDB无法读取
　　无法操作跨域的iframe里的dom元素
　　ajax请求不能发送

2、跨域：

不同源则为跨域

      http://api.example.com/detail.html  不同源 域名不同

      https//www.example.com/detail.html   不同源 协议不同

      http://www.example.com:8080/detail.html    不同源    端口不同

      http://api.example.com:8080/detail.html    不同源    域名、端口不同

      https://api.example.com/detail.html    不同源    协议、域名不同

      https://www.example.com:8080/detail.html    不同源    端口、协议不同

      http://www.example.com/detail/index.html    同源    只是目录不同

3、jsonp原理：

其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来。

  <script>

        function fuc(data){

          console.log(data.name);

         }

      </script>

      <script src="http://www.baidu.com/api.php?callback=fuc"></script>

4、后台代码

 <?php

     $cb = $_GET['callback'];

     $data = array(

                 'name'=> 'zs',

                 'age'=>18,

                 'gender'=>true

             );

     echo $cb.'('.json_encode($data).')';

 ?>

案例：利用jsonp访问百度天气

   $(function () {

         // 发送jsonp请求

         $.ajax({

             type:"get",

             url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',

             data:{

                 location:$("#city").val()||"上海"

             },

             dataType:"jsonp",

             success: function (data) {

                 //渲染模版

                 var html = template('template',{list:data.results[0].weather_data})

                 $('tbody').html(html);

             }

         });

     });

　　使用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>

　　效果图：

深入理解jsonp跨域请求原理

相关文章