需要实现跨域访问,无非就那么几种方式,其中jsonp是最为理想的方式,由于jsonp属于非正式协议,所以安全性就受到质疑。但是不妨碍我们使用其实现我们的跨域访问。 要使用jsonp完成跨域放访问,首先要熟悉他的原理。 首先在客户端注册一个callback, 然后把callback的名字传给服务器(此回调函数名字可以不带)。此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数) 使用JSONP技术时,一般是由JS在客户端页面中动态插入script标签,将其src属性设置为带参数的URL。当页面加载时,前述URL会将 参数通过GET请求发送到相应服务器端应用程序(由URL表示),服务器根据参数返回数据――注意,这个数据格式是JSON,并且(注意)被包含在一个函 数调用中,例如:callback({json_data})。这样,在客户端页面中存在预定义的callback(data)函数的定义时,服务器返回 的函数调用就会立即执行,由客户端的函数对数据进行操作。 动态生成script并在页面加载完成后跨域访问: $(document).ready(function (){ // 调用JSONP服务器,url为请求服务器地址 var script =document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("src",“此处放置你需要跨越访问的url”); script.setAttribute("id", url); document.appendChild(script);}); ===========Javascript代码段:JSONP客户端对服务器开放的接口方法,即回调函数======================= function jsonpCallback(obj){ alert(obj.msg); } ------------------END------------------------ ===============服务器端代码================== 服务器端可以通过 java.io.PrintWriter out = getResponse().getWriter(); out.println("jsonpCallback({msg:'需要传递的数据',name:'需要传递的数据'})"); out.close(); 将需要传递的数据通过设置到回调函数中进行传递。 注意:jsonpCallback({msg:'需要传递的数据',name:'需要传递的数据'})会在返回客户端的时候自动按照JavaScript语法将数据注入之,如果jsonpCallback函数在客户端没有预先定义,那么将会报找不到该函数的错误。
详细解决方案
用jsonp兑现跨域访问
热度:35 发布时间:2012-08-22 09:50:35.0
相关解决方案
- PHP Jsonp cookie跨域 ie浏览器有关问题
- jsonp 简单的返回结果有关问题!新手求解!
- jsonp js代码看不懂解决思路
- 今天是小弟我的生日,在听强强公开课,三种无刷新方法:ajax,jsonp,iframe
- 学习总结:前端跨域请求的解决方法――JSONP(很好)
- ajax 跨域请求有关问题 jquery jsonp
- 施用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(转自IBM中文社区)
- 组合 JSONP 和 jQuery 快速构建强大的 mashup
- 解决IE上不支持跨域,TypeError:Access deny的有关问题-Jsonp
- 施用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup(转)
- 应用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup(转)
- jsonp 跨域 parseerror解决办法
- PHP Jsonp cookie跨域 ie浏览器有关问题
- 原生JavaScript实现AJAX、JSONP
- 跨域的几种方案以及实现(JSONP,CORS,服务器端跨域)
- JSONP springboot使用及遇到的问题
- 同源跨域 + JSONP + 防抖节流
- 前后端交互 —— 06ajax 之淘宝搜索案例 + jsonp + 模板引擎 + 防抖节流
- *JSONP
- 创建 JSONP 接口
- jsonp、cookies实现单点登录(完全跨域)
- Ajax 和 JSONP
- 前端跨域三种解决方式(CORS、JSONP、代理跨域)
- 深入学习前端跨域(JSONP、CORS)
- jsonp nodejs跨域传输
- JSONP 的理解
- 【JS】【客户端】脚本化HTTP —— 借助script发送HTTP请求:JSONP
- 知识总结:什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
- springMVC如何跨域请求-jsonp
- ajax跨域问题解决方案(jsonp,cors)