JsonP实现跨域访问的原理图文分析

 

 

1. JsonP实现跨域访问的原理分析:
    1.首先理解几个知识点:
        1.跨域:所谓跨域,就是指当 服务器A 响应(回来的html) 中有向 服务器B 发送的请求,当然这样说不太
            准确,准确地说:只要 :协议,IP,端口,三者中有一个不同,那么都会出现同源访问策略问题,这个时候
            的访问都是跨域访问;
        2.<Script> 这个是引用外部js的一个标签,这个标签 没有同源访问策略的限制,所有它可以很方便地访问
            其他服务器上的js资源,简而言之,这个标签中的 src 可以跨域请求js;
            2.1补充一个知识点:就是 我们根据经验知道:我们用 <script> 访问远程js数据时,返回的结果数据会
                原原本本地被放到我们的 <script>标签中; 如果返回的是一个函数调用形式: show(data) , 
                那么 show() 方法会直接执行;
            
         3.JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
            padding 衬垫,此处意思是在 json 数据外又加了一层"衬子": callback(json数据);
    2.基于以上知识点,我们很容易相当利用 <Script> 的跨域访问功能,让它作为载体,将我们需要的数据封装到这
        个载体上,一并传回来,那么我们就要写一个函数,这个函数的功能就是,给它一个 url,它会根据这个url创建
        一个 <script src = url> 然后直接把我们的 url 请求发送到指定服务器,我们更关心的是数据返回的问题,
        我们是如何将数据返回的呢? 我们在服务端
        
2.     JsonP实现跨域访问的原理分析之终极总结:
        其实 JsonP 实现跨域访问可以说是一个不成文的协议了,为什么这么说呢? 因为这个需要服务器端和浏览器端
    按照约定做一些事情:
        1.浏览器端: 要创建一个<script src=url> 实现跨域请求到其他服务器,只是请求,还有响应要考虑:
        2.浏览器端,根据JsonP约定 要在url 后加一个callback=fanhui 参数, 这个参数以后会在服务器返回时作为JsonP的P
           部分: fanhui(服务器返回的json数据); 返回给浏览器的<script> 那么此时此刻,服务器已经完成了将数据返回,
           并且同时会调用一个名叫 fanhui 的函数;
        3.在第2.步中,我们已经知道,服务器将返回 JsonP [fanhui(服务器返回的json数据)] 给<script> 直接触发了:fanhui()
            函数被调用,所以我们应该在<script>中预先定义好 fanhui(data) 这个函数,这样在服务器端返回 JsonP时,直接调用
            到了这个方法;同时我们也获得了其中的数据;
    简而言之:1. 浏览器端的<script src=url> 实现了跨域url的请求,
             2. 服务器端返回的 JsonP 实现对 请求的响应;
             3. 浏览器端预置 的 与JsonP 中的 P 同名的 函数,实现了数据的接收;