JSONP

JSONP和AJAX相同，都是客户端向服务器端发送请求：给服务器端传递数据或者从服务器端获取数据的方式

AJAX属于同源策略，JSONP属于非同源策略（跨域请求，跨域请求有很多中，JSONP只是最常用的一种）

JSONP的原理（JSONP请求一定需要对方的服务器做支持才可以）

　　在script的世界中，没有同源跨域这一说，只要你给我的src属性中的地址是一个合法的地址，script都可以把对应的内容请求回来，

　　JSONP就是利用了script的这个原理，

　　1. 首先把需要请求数据的那个跨域的API数据接口地址赋值给script的src 

　　2. 把当前页面中的某一个函数名当作参数值传递给跨域请求数据的服务器（url跨域传参）

　　3. 服务器接收到请求后需要特殊处理：把你传递进来的函数名和它需要的数据拼接成一个JSON格式的字符串  例如：我们传递进去的函数名是fn。他准备好的数据是‘fn([{"name":"zhangsan"}])’,我传递的函数名fn（需要给我们的数据）

　　4. 最后服务器把准备的数据通过HTTP协议返回给我们的客户端，客户端发现其实就是让我们的fn执行，而且还给fn传递了一堆数据，那些数据就是我们想要的

　

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script charset="utf-8" type="text/javascript">
            function fn(data) {
                console.log(data)
            }
        </script>
// 以腾讯的接口为例
        <script charset="utf-8" type='text/javascript' scr="http://matchweb.sports.qq.com/kbs/calendar>columnId=100000&callback=fn"></script>
    </body>
</html>

 

posted on 2017-11-05 17:32  最爱小vue  阅读(97)  评论(0)  编辑  收藏  举报

导航