jQuery 调用jsonp实现与原理
jQuery 调用jsonp实现与原理
您的评价: |
|
通过jQuery实现JSONP
一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <script> 元素的这个开放策略,具体后面谈。
1.客户端代码
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < title >JSIONP TEST</ title > < script type = "text/javascript" src = jquery .min.js"></ script > < script type = "text/javascript" > jQuery(document).ready(function(){ $.ajax({ type: "get", dataType: "jsonp", jsonp: "callback", jsonpCallback:"jsonpCallback", success: function(json){ alert('json:' + json); }, error: function(){ alert('fail'); } }); }); </ script > </ head > < body > </ body > </ html > |
jsonp
类型: String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5,,设置
jsonp
选项为false
,阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下,你也应该明确设置jsonpCallback
设置。例如,{ jsonp: false, jsonpCallback: "callbackName" }
jsonpCallback
类型: String, Function
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。从jQuery 1.5开始,你也可以使用一个函数作为该参数设置,在这种情况下,该函数的返回值就是
jsonpCallback
的结果。
2.服务器端
1
2
3
4
5
6
7
8
9
10
11
12
13
|
public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, RemoteException, IOException{ doPost(req, res); } public void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { res.setContentType( "text/javascript; charset=UTF-8" ); //jsonp其实回写的就是一段JavaScript代码 String functionName= req.getParameter( "callback" ); //获得回调函数名字 PrintWriter out = res.getWriter(); out.print(String.formate( "%s({'value': '001', 'text': 'show 001'})" , functionName)); //jsonpCallback({'value': '001', 'text': 'show 001'}) 写到前端的结果 out.flush(); out.close(); } |
JSONP原理
我们不能从不同的服务器ajax数据,但是<script>就可以做到,我们在本地写一个函数,然后在远端引入的这个js文件对这个函数进行了调用,在调用过程中可以传递参数,这样子的一个过程就是jsonp
本地服务器 localhost
1
2
3
4
5
6
7
|
<script type= "text/javascript" > var localFunction = function (data){ alert( '我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result); }; </script> //remote.js 其实就一句话 localFunction({"result":"我是远程js带来的数据"});,在浏览器加载完成之后,远端loading过来的这个文件可以执行本地的JavaScript代码,里面可以携带数据,不过需要有一个函数名作为媒介 </script> |
最后看到的结果就是
参考:
http://zh.wikipedia.org/wiki/JSONP
http://www.css88.com/jqapi-1.9/jQuery.ajax/
jQuery 调用jsonp实现与原理的更多相关文章
- jquery 中jsonp的实现原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...
- 紧接上篇,jQuery调用jsonp,并且在页面上展示
在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) var Menu = function () { ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- Jquery调用从ashx文件返回的jsonp格式的数据处理实例
开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点 ...
- 用jQuery与JSONP轻松解决跨域访问的问题
浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...
- 深入剖析jsonp跨域原理
在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jsonp 跨域原理详解
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jQuery的jsonp跨域是这么回事.
实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...
随机推荐
- [IOC]Unity使用
Unity是什么? unity是patterns&practices团队开发的一个轻量级.可扩展的依赖注入容器. Unity特性 1.它提供了创建(或者装配)对象实例的机制,而这些对象实例可能 ...
- Codeforces Round #268 (Div. 2) ABCD
CF469 Codeforces Round #268 (Div. 2) http://codeforces.com/contest/469 开学了,时间少,水题就不写题解了,不水的题也不写这么详细了 ...
- 高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
- php加速运行优化
一个系统的运行性能,除了程序本身要写的完善,还有要看php本身的一些问题,对于php的运行优化,主要有这些加速器:wincache,xcache,ZendOPcache,eAccelerator加速器 ...
- HDOJ 4717 The Moving Points
The Moving Points Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 【转】(笔记)CANopen协议【CANFestival】移植方法
一.背景 CAN组网就必须得要应用层协议,原因就在于 * 便于网络管理与控制 * 确认数据的收发 * 发送大于8个字节的数据块(CAN每帧数据传输大小为8字节) * 为不同节点分配不同的报文标识符 * ...
- 【PHP面向对象(OOP)编程入门教程】20.PHP5接口技术(interface)
PHP与大多数面向对象编程语言一样,不支持多重继承.也就是说每个类只能继承一个父类.为了解决这个问题,PHP引入了接口,接口的思想是指定了一个实现了该接口的类必须实现的一系列方法.接口是一种特殊的抽象 ...
- Ubuntu 14 如何解压 .zip、.rar 文件?
.zip 和 .rar 是Windows下常用的压缩文件,在Ubuntu中如何解压? [解压.zip文件] Ubuntu中貌似已经安装了unzip软件,解压命令如下: unzip ./FileName ...
- 第二天 django apache
1. 475 brew tap homebrew/apache 476 brew install mod_wsgi 477 ls /usr/local/Cellar/mod_wsgi/4.5.7 ...
- xcode7 NSAppTransportSecurity
在Info.plist中添加 NSAppTransportSecurity 类型 Dictionary Dictionary 下添加 NSAllowsArbitraryLoads 类型 Bool ...