JSONP

时间 2019-11-17

标签 jsonp 栏目 JSON 繁體版

原文原文链接

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

AJAX属于同源策略，JSONP属于非同源策略（跨域请求，跨域请求有不少中，JSONP只是最经常使用的一种）html

JSONP的原理（JSONP请求必定须要对方的服务器作支持才能够）java

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

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

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

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

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

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

<!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>