JSONP(JSON with Padding)是[JSON]的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
通俗来说,浏览器默认不支持跨域请求,但是script标签支持访问其它域名的数据,jsonp数据返回的是个javascript函数,函数中的参数是要使用的json数据。
使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp测试</title>
</head>
<body>
<div>
<p id="code"></p>
<p id="msg"></p>
</div>
<script>
function hello (res) {
console.log(res)
document.getElementById('code').innerText = res.code
document.getElementById('msg').innerText = res.message;
}
</script>
<script src="http://192.168.8.250:8002/test/jsonp?callback=hello"></script>
</body>
</html>
解释:
-
- 请求的script地址要带上callback参数,主要看后端人员制定的回调参数名是什么,我们这里指定的是hello
<script src="http://192.168.8.250:8002/test/jsonp?callback=hello">
- 请求的script地址要带上callback参数,主要看后端人员制定的回调参数名是什么,我们这里指定的是hello
-
- 回调参数必须要有函数存在才行
function hello (res) {
console.log(res)
document.getElementById('code').innerText = res.code
document.getElementById('msg').innerText = res.message;
}
结果:
最后
jsonp的使用方式并不复杂,也无需依赖第三方库,这里介绍一下jsonp的用法。