JSONP作用和原理

JSONP(JSON with Padding)是一种用于在客户端跨域请求数据的技术。它通过动态创建script标签并将其插入到HTML文档中来实现这一目的。该标签的src属性指向一个包含JSON数据的远程URL,并且该URL的响应被包装在一个函数调用中。

由于JavaScript在浏览器中运行,因此它受到同源策略的限制,即只能从与当前页面具有相同协议、主机和端口号的地址加载资源。但是,由于

JSONP的基本原理是:当客户端发起一个跨域请求时,服务器返回的不再是一个单独的JSON数据,而是一个JSON数据加上一个函数调用,例如:

callback({"name": "John", "age": 30})

其中,callback是客户端定义的一个函数名,服务器会把它作为参数传递进去。在客户端,我们需要定义一个与服务器返回的函数名相同的全局函数,以便正确解析响应数据。例如:

function callback(data) {
  console.log(data.name);
}

在发起跨域请求时,我们需要将callback函数名作为一个参数传递给服务器,例如:

<script src="http://example.com/api?callback=callback"></script>

在这个例子中,我们将回调函数的名称指定为“callback”,然后在服务器响应中使用相同的名称包装JSON数据。当浏览器加载该脚本时,它会立即执行全局函数,并将服务器返回的JSON数据作为参数传递给它。

总之,JSONP是一种利用script标签来跨域请求数据的技术,它通过在服务器端返回一个包装在函数调用中的JSON数据来实现此目的。客户端定义一个与返回的函数名相同的全局函数,以便正确解析响应数据。

后台返回什么?
后台会返回一个字符串,这个字符串其实是一个函数,函数名由请求方给出,后台将请求的执行结果拼接好作为参数包裹在函数名里返回,相当于返回一个函数调用。

跨域是什么?
首先基于安全的原因,浏览器会受到同源策略的限制。跨域就是域名,协议,端口有一个不同,就会阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有趣的小良

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值