博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jsonp: js跨域
阅读量:5970 次
发布时间:2019-06-19

本文共 2283 字,大约阅读时间需要 7 分钟。

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信,在后来的Web服务中非常流行。本文将详细介绍JSONP

 JSONP的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来

  当通过<script>元素调用数据时,响应内容必须用javascript函数名和圆括号包裹起来。而不是发送这样一段JSON数据,这就是JSONP中P的意义所在

[1, 2, {"buckle": "my shoe"}]

  JSONP看起来与JSON差不多,只不过是被包含在函数调用中的JSON,它会发送这样一个包裹后的JSON响应:

handleResponse([l, 2, {"buckle": "my shoe"}])

  

 包裹后的响应会成为<script>元素的内容,它先判断JSON编码后的数据,然后把它传递给handleResponse()函数

  在实践中,支持JSONP的服务不会强制指定客户端必须实现的回调函数名称,比如handleResponse。相反,它们使用査询参数的值,允许客户端指定一个函数名,然后使用函数名去填充响应。许多支持JSONP的服务都能分辨出这个参数名。另一个常见的参数名称是callback,为了让使用到的服务支持类似特殊的需求,就需要在代码上做一些修改了

  JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据

http://freegeoip.net/json/?callback=handleResponse

  

这个URL是在请求一个JSONP地理定位服务。通过査询字符串来指定JSONP服务的回调参数是很常见的,就像上面的URL所示,这里指定的回调函数的名字叫handleResponse()

  JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL。这里的<script>元素与<img>元素类似,都有能力不受限制地从其他域加载资源。因为JSONP是有效的javascript代码,所以在请求完成后,即在JSONP响应加载到页面中以后,就会立即执行

function handleResponse(response){    alert ("You're at IP address " + response.ip + ", which is in " + response.city + ", "+ response.region_name);}var script = document.createElement("script");script.src = "http://freegeoip.net/json/?callback=handLeResponse"; document.body.insertBefore(script, document.body.firstChild);

  

 JSONP之所以在开发人员中极为流行,主要原因是它非常简单易用,老式浏览器全部支持,服务器改造非常小。与图像Ping相比,它的优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信

  使用<script>元素进行Ajax传输,不受同源策略的影响,因此可以使用它们从其他的服务器请求数据;而且,包含JSON编码数据的响应体会自动解码(即执行)

  不过,JSONP也有两点不足:首先,JSONP是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码,而此时除了完全放弃JSONP调用之外,没有办法追究。因此在使用不是自己运维的Web服务时,一定得保证它安全可靠;其次,要确定JSONP请求是否失败并不容易。虽然HTML5给<script>元素新增了一个onerror事件处理程序,但目前还没有得到任何浏览器支持。为此,开发人员不得不使用计时器检测指定时间内是否接收到了响应。但就算这样也不能尽如人意,毕竟不是每个用户上网的速度和带宽都一样

 

简易示例

【前端】

  

【后端】

  

百度搜索框

  百度搜索框就是使用了JSONP的技术,在百度搜索的URL中,有用的查询如下 

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=123&&cb=a

  

结果为:

a({q:"123",p:false,s:["12306","12306铁路客户服务中心","12308汽车订票官网","12306火车票网上订票官网","12333","12315","12345","12333社保查询网","123网址之家","12366"]});

  

 所以,wd为关键词,cb用来JSONP的函数名。在获取的数据中,s为以关键词开始的数据组成的数据

  百度搜索的关键URL如下

https://www.baidu.com/s?wd=a

  

wd为关键词,当wd=a时,将打开关键词为a的网页

      

     

    转载地址:http://dtwox.baihongyu.com/

    你可能感兴趣的文章
    tzcacm去年训练的好题的AC代码及题解
    查看>>
    [CF460E]Roland and Rose
    查看>>
    linux系统开机静态分配ip地址
    查看>>
    HTTP长连接短连接
    查看>>
    InputStream转成String
    查看>>
    测试缺陷分析务实篇-转
    查看>>
    在浏览器中输入网址后的流程
    查看>>
    拿什么来拯救你,我的table
    查看>>
    OpenNI2下简单操作两个体感设备(Xtion与Kinect for Xbox 360)
    查看>>
    Velocity
    查看>>
    Day12 前端html
    查看>>
    ssh端口映射,本地转发
    查看>>
    springboot单元测试通过MockMvc类调用controller接口
    查看>>
    MySQL常用简单小命令
    查看>>
    验证状态、禁用
    查看>>
    Errors occurred during the build
    查看>>
    selenium + python自动化测试unittest框架学习(五)webdriver的二次封装
    查看>>
    spring系统学习:20180611: Spring中AOP通知的类型
    查看>>
    Java集合源码分析(二)ArrayList
    查看>>
    快速排序
    查看>>