这篇文章主要介绍Ajax中如何实现jsonp跨域请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联建站长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为贵池企业提供专业的成都网站建设、网站设计,贵池网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
什么是跨域?
简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。
具体策略限制情况可看下表:
URL | 说明 | 允许通信 |
http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://127.0.0.100/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许 |
http://www.a.com/a.js http://www.b.com/b.js | 不同域名 | 不允许 |
什么是JSONP?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。
JSONP跨域的原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。
跨域:js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资源(相同域名和端口,此外域名与对应的ip也算不同源,要么都域名,要么都ip).
以上就是js的跨域问题,但是这里需要注意一点的是服务器A是没有跨域的问题的,这个只有js存在这个问题,也就是说: 页面A中js-->服务器A--->跨域资源,这个路径是可以.只有 页面A中的js--->跨域资源,这个路径是不行的.
然后说一下解决方案中的jsonp,这个不是一种格式,而是一种解决方案.
jsonp的原理:js虽然有同源限制,但是引入js文件的时候却没有这个限制,也就是说:
<script type="text/javascript" src="xxx/xxxx.js"></script>
其中src属性引入js文件的时候是没有同源限制的,此时是可以引入域外资源的.jsonp的原理就在这里,通过动态的创建一个以上那行js引入语句,通过其src属性访问域外资源.而域外资源服务器只要返回一个能被解析为js语句的字符串即可达到返回结果的目的,形如:
callback({"key":"value",...})
其中callback是需要事先约定的名字,绿字部分为要返回到json字符串,然后拼接成以上那种形式直接返回即可.这样页面中的js从服务端接收到这个拼接的字符串后,就会直接执行本地的名为callback的js方法,这也就是为何callback这个需要事先约定的原因,需要保证页面侧要存在这个js方法,这个方法传入的参数就为服务器侧的返回值.
ajax是支持jsonp的,所以以上那些麻烦事情都会替我们做,写法如下:
$.ajax({ type: 'GET', url: "http://127.0.0.1:8080/xxx/xxx", async: false, dataType: "jsonp", jsonp: "callback", success: function(result){ ..... }, timeout:3000 });
红字部分标识我们使用jsonp的方式调用,实际上此时这个已经不是传统意义上的ajax的get请求了,它的真实实现方式就是我们上文中说的那样.其中红字部分的callback为我们要和服务器端进行沟通的部分,这个请求发送到服务器端,实际上这样的:
http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx
服务器端需要通过callback来取值(类似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自动生成的值,这个值实际上就是对应的我们发送请求的ajax方法中的success回调方法,服务器端如果返回
jqueryxxxx({"ret":"ok"})
页面中会自动执行success方法,且将{"ret":"ok"}传给success方法的参数result.
以上就是ajax通过jsonp的方式实现跨域访问的过程.可以看出基本不用我们做什么额外操作,全都封装好了.
ps:在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp':
$.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', success: function(data){ //处理data数据 } });
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){ //处理data数据 });
也可以简单地使用getScript方法:
//此时也可以在函数外定义foo方法 function foo(data){ //处理data数据 } $.getJSON('http://www.a.com/user?id=123&callback=foo');
以上是“Ajax中如何实现jsonp跨域请求”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页名称:Ajax中如何实现jsonp跨域请求
文章来源:https://www.cdcxhl.com/article46/pshjeg.html
成都网站建设公司_创新互联,为您提供定制开发、商城网站、网站营销、移动网站建设、域名注册、网站策划
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联