JSONP跨域请�

什么是跨域：

1.不同的域名

2.相同的域名和不同的端口

出于安全原因，Js不支持跨域请求。我们可以用JSONP来解决跨域的问题。

1.什么是JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可以用来解决主流浏览器的跨域数据访问问题。由于同源策略，一般来说，除了HTML脚本元素之外，位于server1.example.com的js无法与server1.example.com以外的服务器进行通信。有了脚本元素的这种开放策略，Web页面就可以获得其他来源动态生成的JSON数据，这种使用模式被称为JSONP。JSONP捕获的数据不是JSON，而是任意的JavaScript，由JavaScript文字翻译器执行，而不是JSON解析器。

原则：在js请求中，浏览器允许通过脚本标签的src进行跨域请求。回调方法名称可以添加到请求结果中，方法可以在请求页面中定义，不仅可以获得跨域请求的数据。(js请求包含json数据的js脚本，而不是简单的json数据)

第二，模拟JSONP

服务器域名：http://localhost :8081/rest/item cat/list

客户端服务器：http://localhost :8082/test . html

1.常见的JS跨域请求

服务器数据：

客户端请求代码：

$(function(){ $)。Ajax({ URL : ' http://localhost :8081/rest/item cat/list？callback=myFunction '，success : function(data){ console . info(data)} })；});结果

XMLHttpRequest无法加载http://localhost :8081/rest/item cat/list？回调=myfunction .请求的资源上不存在“访问控制-允许-原始”头.原始“http://localhost :8082”用于不允许的访问. 2 .模拟JSONP请求

客户端请求代码：

$(function(){ greateScript(' http://localhost :8081/rest/item cat/list ')；函数greateScript(src){ $(' script//script ')。attr('src '，src)。appendo(' body ')} })；结果：

名单？_=1488425374097:1未捕获的语法分析器：意外标记：

第三，使用JSONP

环境：

服务器域名：http://localhost :8081/rest/item cat/list

客户端服务器：http://localhost :8082/test . html

服务器代码(我使用springmvc4):

@ request mapping('/item cat/list ')@ response body public Object getitemtcatlist(字符串回调){ CatResult CatResult=itemtcatservice . getitemtcatlist()；mapping jacksonvalue mapping jacksonvalue=new mapping jacksonvalue(catResult)；//设置JSONP回调函数mapping jacksonvalue . setjsonfunction(回调)；返回mappingJacksonValue}客户端调用代码：

$(function(){ $)。Ajax({ URL : ' http://localhost :8081/rest/item cat/list '、dataType: 'jsonp '、jsonp: 'callback '、success:函数(数据){ console.info(数据)} })；});结果：

查看返回的结果，我们可以发现返回的数据不是简单的json数据，而是一个js函数。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！