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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="
</body>
</html>解释：
请求的script地址要带上callback参数，主要看后端人员制定的回调参数名是什么，我们这里指定的是hello
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://192.168.8.250:8002/test/jsonp?callback=hello">
回调参数必须要有函数存在才行
function hello (res) {
console.log(res)
document.getElementById('code').innerText = res.code
document.getElementById('msg').innerText = res.message;
}结果：
页面结果
最后
jsonp的使用方式并不复杂，也无需依赖第三方库，这里介绍一下jsonp的用法。
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
