Jsonp完成js跨域请求

本文介绍了JavaScript中的跨域问题及其实现原理,并详细探讨了如何通过JSONP方式解决跨域问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    js中的ajax请求是不能完成跨域请求的,这是JavaScript语言决定的。不过有时候确实需要跨域请求文件,那么应该如何实现呢?


    要想知道跨域请求的解决办法,首先得知道什么是跨域。跨域问题是JavaScript语言安全限制的同源策略造成的,JavaScript的同源策略要求一段脚本只能读取同一来源的窗口和文档的属性,也就是说主机名、协议和端口号都相同。由此可见,跨域分为两种情况,最直接的就是域名不同,其次就是域名相同时,其他条件不同。例如:域名相同,端口号不同;域名相同,协议不同;主域相同,子域不同;与域名相同个IP地址。


    解决js的跨域问题,主要采用的是jsonp的方式。


    jsonp实际上是采用了JavaScript的漏洞,虽然JavaScript不能跨域访问,但是HTML DOM标签可以跨域。采用jsonp的方式,其实就是在进行跨域访问时,在脚本中创建一个script标签,使得该标签的地址指向要跨域访问的地址。例如:

$.ajax({ 
     async: false, 
     url: "http://localhost:8081/WEB-INF/category.json", 
     type: "GET", 
     dataType: 'jsonp', 
     //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
     jsonp: 'jsoncallback', 
     //服务器段返回的对象包含name,data属性. 
     success: function (json) { 
         alert(json.data); 
     }
});


    此时就是创建script标签,标签地址指向json文件:


<script src="http://localhost:8080/WEB-INF/category.json"></script>


    jsonp方式要求返回的数据是json格式。


    jquery封装了getJSONP方法,传入跨域请求的地址即可访问要访问的文件。

$.getJSONP("htpp://localhost:8081/WEB-INF/category.json")

1、一个众所周知的问题,Ajax直接请求普通文件存在无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是请求,一律不准;   2、不过我们又发现,Web页面上调用js文件时则不受是否的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有的能力,比如[removed]、、<iframe>);   3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;   4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;   5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。   6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。   7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值