多语言展示
当前在线:506今日阅读:23今日分享:25

前端跨域请求jsonp实现

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问,有一种不同即不能访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等 。      JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的

3

第三种:借助于jquery的ajax实现。 跨域测试

4

第四种:主要是对三种的优化。1、主要是去除jsonpCallback属性,url中传callback=?定义默认调用ajax的回调函数。要与后台代码对应(String callback = request.getParameter('callback');)2、调用项目页面如下所示: 跨域测试

第四步骤:总结

1、jsonp实现的方式就是借助于script标签的src属性获取数据,然后将数据作为参数传给函数,解析数据。这一点我们需要结合后台callback +  '(' + json + ')'可以看出一二。2、跨域问题的解决方案除了jsonp方式外还有一种CORS,与jsonp不同的是这是一种后台解决方案。

注意事项

jdk 1.8

推荐信息