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/
最新文章
- ASP数组全集，多维数组和一维数组[转]
- Git学习笔记（4）——添加远程仓库，克隆远程库，以及库的推送
- mybatis Generator配置文件详解
- Byte History
- LPEG
- 怀念我的老师——丁伟岳院士 by 史宇光
- MTTR是什么？或者说为什么别给婴儿喝白兰地
- Newtonsoft.Json 与 DataTable的相互转换
- iOS7状态栏字体颜色修改
- Android读写JSON格式的数据之JsonWriter和JsonReader
- MyBatis 使用foreach与其他方式的时候参数传递方式
- Permutations 好题
- 多个Fragment的分开管理方案
- 【iOS】swift-如何理解 if let 与guard?
- 基于Django的独立运行脚本开发
- nake_api_protect 请求保护器——防止请求被恶意刷
- Azkaban学习之路 （三）Azkaban的使用
- fatal error C1010: 在查找预编译头时遇到意外的文件结尾
- bootstrap日期控件（双日期、清空等问题解决）
- 解决Django + DRF：403 FORBIDDEN：CSRF令牌丢失或不正确，{"detail":"CSRF Failed: CSRF cookie not set."}