jsonp学习笔记

什么是jsonp
jsonp是一种基于json文本格式的使用模式,为了解决json的跨域问题,
结构相当于在json字符串外拼接一个方法名称,以括号包含该json字符串
例如:test({“key”:“hello world”})
为什么使用jsonp
js在跨域访问数据时会失效,因为违反了js的同源策略
所谓同源策略是,只要系统的访问地址、域名、端口有一个不同,就是违反同源策略 在这里插入图片描述
怎么使用jsonp,调用逻辑是什么
底层调用逻辑:
js的script标签的src属性可以访问跨域数据,将跨域数据接收到本地,利用数据结构中的方法名称,匹配本地同名函数,获取的元数据是jsonp,将其中包含的json转给了这个函数的参数进行解析。

利用jQuery获取jsonp,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp:

$("#getJsonpByJquery").click(function () {
$.ajax({
url: ‘http://localhost:8080/home/somejsonp’,
dataType: “jsonp”,
jsonp: “callback”,
success: function (data) {
console.log(data)
}
})
})

这里针对ajax与jsonp的异同再做一些补充说明:

1、ajax和jsonp这两种技术在调用方式上”看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加

test01 的页面

<!doctype html>

test02 的页面

<!doctype html>

test.json 的页面

{“key”:“hello world”}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值