JSONP原理小记

最新推荐文章于 2026-06-19 10:22:27 发布

转载最新推荐文章于 2026-06-19 10:22:27 发布 · 177 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/JRliu/p/5960023.html

标签

#json #javascript #ViewUI

本文详细解释了JSONP(JSON with padding)的工作原理，通过动态插入<script>标签实现跨域数据请求，展示了如何定义回调函数接收服务器返回的数据。

大家都知道JSONP(JSON with padding参数式JSON)是跨域传输数据的方法，jq等很多类库都封装了JSONP的方法，但是他的原理是怎样的呢？下面举个我认为最浅显的栗子，大家看过了都会明白原理！

JSONP的原理，概括点说，就是动态插入<script>元素，当然<script>元素引用的js文件是服务器传过来的，他与<img>元素一样可以不受限制地从其他域加载资源。

栗子：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
    // 定义回调函数
    var alertMessage = function(data){
        alert(' 姓名: ' + data.name + '，性别: ' + data.sex + '，职位：'+ data.position);
    };　　
    // 提供jsonp服务的url地址（即动态<script>元素的src值）
    var url = "http://test.com/jsonp?number=9527&callback=alertMessage";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.src = url;
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
    </script>
</head>
<body>
 
</body>
</html>

服务器传过来的js文件栗子：

alertMessage({ 
    'name':'James',
    'sex':'male',
    'position':'manager' 
})

加载到服务器传过来的js文件后，解析，执行函数alertMessage！

弹出提示框：姓名：James，性别：male，职位：manager

看到这里，大家应该清楚了，JSONP的使用流程：

1、定义一个调用跨域数据的函数 function fn(date){...}；

2、获取数据时，动态插入<script>标签，其src属性为请求地址；

3、服务器返回js文件，其代码执行函数fn，并提供参数，即fn(response)，此处，response就是跨域调用的数据！

转载于:https://www.cnblogs.com/JRliu/p/5960023.html