手记

简易Jsonp请求

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=" 
</body>
</html>

解释:


  1. 请求的script地址要带上callback参数,主要看后端人员制定的回调参数名是什么,我们这里指定的是hello
    <script src="http://192.168.8.250:8002/test/jsonp?callback=hello">


  1. 回调参数必须要有函数存在才行

function hello (res) { 
   console.log(res)    
   document.getElementById('code').innerText = res.code    
   document.getElementById('msg').innerText = res.message;
}

结果:


页面结果

最后

jsonp的使用方式并不复杂,也无需依赖第三方库,这里介绍一下jsonp的用法。

0人推荐
随时随地看视频
慕课网APP