jsonp实现原理

最新推荐文章于 2023-05-18 15:34:39 发布

努力的学渣

最新推荐文章于 2023-05-18 15:34:39 发布

阅读量377

点赞数 1

分类专栏： web 文章标签： jsonp

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

以页面url为基础，页面内的请求使用不同的协议、域名、端口则会出现跨域问题。

这是因为浏览器的同源策略导致

jsonp 利用 ‘<script>’标签不受同源策略限制（script标签src属性中的链接可以访问跨域的js脚本）

原理：服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码

具体过程：首先在页面内定义一个函数然后添加一个script标签做请求，服务器返回script文件中回调此函数，把数据以参数的形式传入此回调函数，函数内处理数据。

下面使用JSONP，将前端代码中的ajax请求去掉，添加了一个script标签，标签的src指向了另一个域www.practice-zhao.com下的remote.js脚本

<!DOCTYPE html>
<html>
<head>
    <title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>
</body>
</html>

这里调用了跨域的remote.js脚本，remote.js代码如下：

jsonhandle({
    "age" : 15,
    "name": "John",
})

也就是这段远程的js代码执行了上面定义的函数，弹出了提示框

这里写图片描述

这里有大神更详细的解释：https://blog.csdn.net/u011897301/article/details/52679486

努力的学渣

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jsonp实现原理

以页面url为基础，页面内的请求使用不同的协议、域名、端口则会出现跨域问题。这是因为浏览器的同源策略导致jsonp 利用 ‘&lt;script&gt;’标签不受同源策略限制（script标签src属性中的链接可以访问跨域的js脚本）原理：服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码具体过程：首先在页面内定义一个函数然后添加一个script标签做请求，服务器返回scrip...
复制链接

扫一扫