什么是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”}