JSONP原理及实现

接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则通过Ajax进行跨域访问。

1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语

法的方式,生成一个function

2、接下来,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段js语法文档,返回给客户端。

3、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片段,此时数据作为参数传入到了预先定义好的

回调函数里(动态执行回调函数)。

这种动态解析js文档和eval函数是类似的。

AJAX端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
       
       
$("#but1").click(function(){ 
     $.ajax({ 
        url:'http://127.0.0.1:8080/DevInfoWeb/get', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
        jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
$("#but2").click(function(){ 
     $.ajax({ 
        url:'http://127.0.0.1:8080/DevInfoWeb/getJsonp', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
        jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一起传递回来  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
}); 
</script> 
</head> 
<body> 
   
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div> 
<button id="but1">按钮1</button> <br/> 
<button id="but2">按钮2</button> 
   
</body> 
</html>

 

SpringMVC端：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@RequestMapping("/get") 
 public void get(HttpServletRequest req,HttpServletResponse res) { 
     res.setContentType("text/plain"); 
     String callbackFunName =req.getParameter("callbackparam");//得到js函数名称 
     try { 
         res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据 
     } catch (IOException e) { 
         e.printStackTrace(); 
     } 
 } 
    
 @RequestMapping("/getJsonp") 
 @ResponseBody 
 public JSONPObject getJsonp(String callbackparam){ 
Company company=new Company(); 
company.setAddress("广州天河华景软件园"); 
company.setEmail("123456@qq.com"); 
company.setName("广州讯动网络可以有限公司"); 
company .setPhone("12345678912"); 
  return new JSONPObject(callbackparam, company);  
 }

Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域的更多相关文章

  1. JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  2. 跨域请求之JSONP 一

    跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...

  3. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  4. js跨域请求（jsonp）

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

  5. Spring MVC体系结构和处理请求控制器

    Spring MVC体系结构和处理请求控制器 一:MVC设计模式: (1.)数据访问接口:DAO层 (2.)处理业务逻辑层:Service层 (3.)数据实体:POJO (4.)负责前段请求接受并处理 ...

  6. Spring MVC 原理探秘 - 一个请求的旅行过程

    1.简介 在前面的文章中,我较为详细的分析了 Spring IOC 和 AOP 部分的源码,并写成了文章.为了让我的 Spring 源码分析系列文章更为丰富一些,所以从本篇文章开始,我将来向大家介绍一 ...

  7. Spring MVC的handlermapping之请求分发如何找到正确的Handler(BeanNameUrlHandlerMapping,SimpleUrlHandlerMapping)

    本文讲的是Spring MVC如何找到正确的handler, 前面请求具体怎么进入到下面的方法,不再细说. 大概就是Spring mvc通过servlet拦截请求,实现doService方法,然后进入 ...

  8. Ajax+Spring MVC实现跨域请求（JSONP）(转)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  9. Ajax+Spring MVC实现跨域请求（JSONP）

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

随机推荐

  1. shell中$0,$?,$!

    变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代码(返回值) $- 使用Set命令设定的Flag一览 ...

  2. Struts2-3.struts.xml的action可以简写

    如果只是跳转到某个页面的话,可以这样写 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE s ...

  3. js--事件对象的理解2

    实例1:一串跟着鼠标飞舞的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. php基础（七）文件

    PHP 文件处理 PHP 操作文件 当您操作文件时必须非常小心.如果您操作失误,可能会造成非常严重的破坏.常见的错误是: 编辑错误的文件 被垃圾数据填满硬盘 意外删除文件内容 PHP readfile ...

  5. hdu_5036_Explosion(bitset优化传递闭包)

    题目链接:hdu_5036_Explosion 题意: 一个人要打开或者用炸弹砸开所有的门,每个门里面有一些钥匙,一个钥匙对应一个门,有了一个门的钥匙就能打开相应的门,告诉每个门里面有哪些门的钥匙,问 ...

  6. 5、Web应用程序中的安全向量 -- Open Redirect Attack（开放重定向）

    开放重定向攻击的概念:那些通过请求(如查询字符串和表单数据)指定重定向URL的Web应用程序可能会被篡改,而把用户重定向到外部的恶意URL. 在执行重定向之前需先检查目标地址的有效性,可使用Url.I ...

  7. JVM基础01-内存分配

    一.什么是JVM Java作为主流编程语言: 它摆脱了硬件的束缚,一处编写,处处运行: 它提供了一种相对安全的内存管理和访问机制,避免了大部分的内存泄露和指针越界问题: 它实现了热点代码的检测和运行时 ...

  8. vc中主线程等待子线程退出的方法

    VC线程同步,在子线程中等待另一子线程结束,通过WaitForSingleObject可以实现,但是如果在主线程中等待子线程结束,这个函数是无法完成要求的,因为它会造成主线程挂起,导致程序死掉.我们可 ...

  9. Python多进程multiprocessing使用示例

    mutilprocess简介 像线程一样管理进程,这个是mutilprocess的核心,他与threading很是相像,对多核CPU的利用率会比threading好的多. import multipr ...

  10. 使用Idea作为go的IDE

    Idea是一款非常不错的IDE,只可惜是收费的.Idea可以使用很多的插件,当然里面就包含我们需要的go语言的插件. 1.我们打开file -> Settings -> Plugins - ...