JSONP跨域请求

 更新时间:2017年03月02日 14:13:18   作者:小禾点点  
本文主要介绍了jsonp跨域请求的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧

什么是跨域:

1、域名不同

2、域名相同端口不同

js出于对安全考虑不支持跨域请求。我们可以使用JSONP解决跨域问题。

一、JSONP是什么

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页js是无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

原理:浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据。(js请求的不是一个单纯的json数据而是一段包含json数据的js脚本)

二、模拟JSONP

服务器域名:http://localhost:8081/rest/itemcat/list

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

1、普通的JS跨域请求

服务器数据:

客户端请求代码:

$(function(){
  $.ajax(    {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction", 
     success: function(data){
      console.info(data)
   }}); 
 });

结果

XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

2、模拟JSONP请求

客户端请求代码:

$(function(){
  greateScript("http://localhost:8081/rest/itemcat/list");
  function greateScript(src) {
   $("<script><//script>").attr("src", src).appendTo("body")
  } 
 });

结果:

list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :

三、使用JSONP

环境:

服务器域名:http://localhost:8081/rest/itemcat/list

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

服务端代码(本人使用springmvc4):

@RequestMapping("/itemcat/list")
 @ResponseBody
 public Object getItemCatList(String callback) {
  CatResult catResult = itemCatService.getItemCatList();
  MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
  //设置JSONP回调函数
  mappingJacksonValue.setJsonpFunction(callback);
  return mappingJacksonValue;
 }

客户端调用代码:

$(function(){
  $.ajax(
   { url: "http://localhost:8081/rest/itemcat/list", 
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data){
    console.info(data)
   }}); 
 });

结果:

看返回结果可以发现返回的数据不是一段单纯的json数据,而是一段js函数。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JS代码优化技巧之通俗版(减少js体积)

    JS代码优化技巧之通俗版(减少js体积)

    如果你问我网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS。模板中引用的JS文件越多,打开速度越慢,这点我深有体会,不信你看看卢松松博客首页,使劲优化后依然有100K的文件
    2011-12-12
  • javascript自定义滚动条实现代码

    javascript自定义滚动条实现代码

    这篇文章主要为大家详细介绍了javascript自定义滚动条实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 分析ES5和ES6的apply区别

    分析ES5和ES6的apply区别

    这篇文章主要介绍了分析ES5和ES6的apply区别,对ES6感兴趣的同学,可以参考下
    2021-05-05
  • ​ 一文带你了解JavaScript多文件混淆加密

    ​ 一文带你了解JavaScript多文件混淆加密

    JavaScript 代码多文件混淆加密可以有效保护源代码不被他人轻易盗取,这篇文章主要为大家介绍了JavaScript中混淆加密的实现,需要的小伙伴可以参考下
    2023-11-11
  • 对TypeScript库进行单元测试的方法

    对TypeScript库进行单元测试的方法

    这篇文章主要介绍了对TypeScript库进行单元测试的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • js的onload事件及初始化按钮事件示例代码

    js的onload事件及初始化按钮事件示例代码

    onload事件当一个页面或是一张图片加载完成时被触发,在body上不仅可以用onload,而且还支持多个HTML标签.用法如下
    2013-09-09
  • JS中new Blob()详解及blob转file示例

    JS中new Blob()详解及blob转file示例

    这篇文章主要给大家介绍了关于JS中new Blob()详解及blob转file的相关资料,Blob Blob(Binary Large Object)表示二进制类型的大对象,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 基于pako.js实现gzip的压缩和解压功能示例

    基于pako.js实现gzip的压缩和解压功能示例

    这篇文章主要介绍了基于pako.js实现gzip的压缩和解压功能,结合具体实例形式分析了pako.js实现字符串压缩与解压缩的相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • JavaScript中的对象和原型(一)

    JavaScript中的对象和原型(一)

    大家都知道在js中没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。所以大家要了解面向对象,首先要了解js中的对象和原型,下面本文给大家介绍JavaScript中的对象和原型(一)知识,一起看下吧
    2016-08-08
  • JavaScript中的变量提升和函数提升

    JavaScript中的变量提升和函数提升

    这篇文章主要介绍了JavaScript中的变量提升和函数提升,在js中对变量进行操作后打印值经常会出现undefined的现象。其实原因是因为js中有一个叫做变量提升的功能
    2022-07-07

最新评论