jQuery 调用jsonp实现与原理
2013-12-29 00:00
661 查看
摘要: jQuery 调用jsonp实现与原理
通过jQuery实现JSONP
一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <script> 元素的这个开放策略,具体后面谈。
jsonp
类型: String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5,,设置
jsonpCallback
类型: String, Function
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。从jQuery 1.5开始,你也可以使用一个函数作为该参数设置,在这种情况下,该函数的返回值就是
JSONP原理
我们不能从不同的服务器ajax数据,但是<script>就可以做到,我们在本地写一个函数,然后在远端引入的这个js文件对这个函数进行了调用,在调用过程中可以传递参数,这样子的一个过程就是jsonp
本地服务器 localhost
最后看到的结果就是
参考:
http://zh.wikipedia.org/wiki/JSONP
http://www.css88.com/jqapi-1.9/jQuery.ajax/
通过jQuery实现JSONP
一般的ajax是不能跨域请求的,因此需要使用一种特别的方式来实现跨域,其中的原理是利用 <script> 元素的这个开放策略,具体后面谈。1.客户端代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <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", url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", 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.服务器端
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
<script type="text/javascript"> var localFunction = function(data){ alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'+ data.result); }; </script> <script type="text/javascript" src="http://remoteserver.com/remote.js"> //remote.js 其实就一句话 localFunction({"result":"我是远程js带来的数据"});,在浏览器加载完成之后,远端loading过来的这个文件可以执行本地的JavaScript代码,里面可以携带数据,不过需要有一个函数名作为媒介 </script>
最后看到的结果就是
参考:
http://zh.wikipedia.org/wiki/JSONP
http://www.css88.com/jqapi-1.9/jQuery.ajax/
相关文章推荐
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery中的常用事件总结
- 23个超流行的jQuery相册插件整理分享
- jQuery学习笔记之jQuery的动画
- 再次分享18个非常棒的jQuery表格插件
- JQuery与iframe交互实现代码
- 24款非常有用的 jQuery 插件分享
- 火狐4、谷歌12不支持Jquery Validator的解决方法分享
- jQuery 常见学习网站与参考书