您的位置: 首页  >  文章  >  Jsonp跨域原理剖析

Jsonp跨域原理剖析

分类: 文章 • 2024-08-31 21:18:22

    所谓jsonP的跨域访问加载数据的原理其实应用的是<script src=""></script>中src属性可以跨域加载js文件来实现的。

    具体的流程可以通过一张图来分析

 Jsonp跨域原理剖析

2.JsonP的实现

        1.客户端（js）：

        <script  src="htpp://localhost:8080?callback=mycall"></script>

        <script>

                    function mycall(data){

            }

        </script>

        2.客户端（JQuery）

        <script>

                    

            $.ajax({
             dataType: 'jsonp',
             url: 'htpp://localhost:8080',
             success:   function(data){
            //处理data数据
              }   
            });

        </script>

    服务端实现

        Jsonp跨域原理剖析

    服务端在做返回的时候是将需要返回的数据拼装在在回调函数callback函数的形参上，请求成功后将在前端页面执行回调函数，所以便可在前端页面js中的回调函数中获得jsonp跨域请求返回的数据。

至此jsonp跨域访问原理就是酱紫

相关推荐