Ext.ux.JSONP 回调函数问题 - ITeye问答
addCookies:function(userId){
Ext.JSONP.request('XXXXXXXXXXX', {
type: 'write',
user:userId
callback: this.alertMsg,
scope:this
alertMsg:function(data){
alert(data.msg)
response.getWriter().print("callback("+json+")");
json = {"msg":"success"}
error:
错误： ReferenceError: callback is not defined
客户端请求到服务端，但是jsonp的回调函数找不到。
addCookies:function(userId){&
&& Ext.JSONP.request('XXXXXXXXXXX', {&&
&&&&&&& params: {&
&&&&&&&&&&&&&&& type: 'write',&
&&&&&&&&&&&&&&& user:userId&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&& },&
&&&&&&& callback: function(data){
&&&&&&&&&&&&&&&&& alert(data.msg);
&&&&&&&&& }
&&& })&
已解决问题
未解决问题一种脚本注入行为
服务器君一共花费了173.351 ms进行了4次数据库查询，努力地为您提供了这个页面。
试试阅读模式？希望听取您的建议
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于，通过XMLHttpRequest实现的Ajax请求，不能向不同的域提交请求，例如，在abc.example.com下的页面，不能向def.example.com提交Ajax请求，等等。
然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理。
利用在页面中创建&script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。JSONP的工作原理如下所述：
假设在http://example1.com/index.php这个页面中向http://example2.com/getinfo.php提交GET请求，我们可以将下面的JavaScript代码放在http://example1.com/index.php这个页面中来实现：
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
当GET请求从http://example2.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://example1.com/index.php页面中的一个callback函数。
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
再来一个例子：
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':
$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
genDynamicContent(qsData,type,json);
complete: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 });
error: function(xhr){
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
有时也会看到这样的写法：
$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",
function(json){
if(json.属性名==值){
// 执行代码
这种方式其实是上例$.ajax({..}) api的一种高级封装，有些$.ajax api底层的参数就被封装而不可见了。
这样，jquery就会拼装成如下的url get请求：
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1&_=9&searchWord=
%E7%94%A8%E4%BE%8B&currentUserId=5351&conditionBean.pageSize=15
在响应端(http://跨域的dns/document!searchJSONResult.action)，通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1 然后 response的内容为一个Script Tags:"jsonp1("+按请求参数生成的json数组+")"; jquery就会通过回调方法动态加载调用这个js tag:jsonp1(json数组); 这样就达到了跨域数据交换的目的。
JSONP的最基本的原理是：动态添加一个&script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。
这样其实"jQuery AJAX跨域问题"就成了个伪命题，jquery $.ajax方法名有误导人之嫌。
如果设为dataType: 'jsonp'，这个$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。
JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。 这种跨域的通讯方式称为JSONP。
jsonCallback 函数jsonp1(....)：是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数
Jsonp的执行过程如下：
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1)传给服务器。注意：服务端得到callback的数值后，要用jsonp1(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1 .
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据，作为参数， 传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。
可以说jsonp的方式原理上和&script src="http://跨域/...xx.js">&/script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的)。JSONP是一种脚本注入(Script Injection)行为，所以有一定的安全隐患。
那jquery为什么不支持post方式跨域呢？
虽然采用post+动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的)，但这样做是一个比较极端的方式，不建议采用。
也可以说get方式的跨域是合法的，post方式从安全角度上，被认为是不合法的，万不得已还是不要剑走偏锋。
client端跨域访问的需求看来也引起w3c的注意了，看资料说html5 WebSocket标准支持跨域的数据交换，应该也是一个将来可选的跨域数据交换的解决方案。
来个超简单的例子：
&!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" >
&title>Test Jsonp&/title>
&script type="text/javascript">
function jsonpCallback(result)
alert(result.msg);
&script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback">&/script>
其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为：jsonpCallback({msg:'this is json data'})
简述原理与过程：首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。（动态执行回调函数）
本文地址：，欢迎访问原出处。
不打个分吗？
转载随意，但请带上本文地址：
如果你认为这篇文章值得更多人阅读，欢迎使用下面的分享功能。
小提示：您可以按快捷键 Ctrl + D，或点此 。
大家都在看
现代魔法研究协会欢迎你
阅读一百本计算机著作吧，少年
Noab Gift (作者), Jeremy M.Jones (作者)
《Python在Unix和Linux系统管理中的应用(影印版)》作者们还构建了一个可以免费下载的Ubuntu虚拟机。该虚拟机包含了这《Python在Unix和Linux系统管理中的应用(影印版)》的源代码，还可以用来运行书中的实例，包括SNMP、IPython、SQLAlchemy和许多其他工具。《Python在Unix和Linux系统管理中的应用》展示了Python语言如何提供一种更加高效的方式来处理Unix和Linux服务器管理工作中的各种任务。《Python在Unix和Linux系统管理中的应用(影印版)》的每一章都会提出一个特定的管理问题，例如并发或数据备份，然后通过实际的例子提供基于Python的解决方案。
扫一扫，在手机上阅读
栏目最新博文
31,030 views
21,020 views
18,261 views
16,051 views
15,631 views
13,729 views
20,251 views
14,845 views
14,440 views
14,802 views
栏目博文推荐
16,129 views
107,315 views
4,601 views
7,248 views
12,514 views
9,537 views
4,899 views
3,828 views
4,123 views
6,834 views
多动脑筋，越动越聪明
关于网站与作者
互联网信息太多太杂，各互联网公司不断推送娱乐花边新闻，SNS，微博不断转移我们的注意力。但是，我们的时间和精力却是有限的。这里是互联网浩瀚的海洋中的一座宁静与美丽的小岛，供开发者歇息与静心潜心修炼（愿景）。
“Veda”的本义是知识、启示，希望这里能为开发者提供充足的技术资料。
我的电子邮件gonnsai(at)163.com，腾讯微博：，欢迎与我联系。博客分类：
更新的比较慢，做一个简单的JSONP的例子，网上的例子大都是拷过来拷过去的，格式比较乱。如果有任何问题请拍砖。
前面一个帖子写了如何在同一个基础域名下实现JS跨域访问，实际上这个“跨域”是为了在同一基础域名下iframe子页面与父页面之间的函数调用。
而动态Script标签的方式往往是用来访问不在同一个域的服务器内部的数据的。例如,
当前我的域名：
d1.wwwcomy.com
我需要访问的数据：
百度翻译"chair"的结果
由于百度翻译和我的域名不在一个域名下，所以这个数据通过常规方式是没办法获取的，是被浏览器的安全机制所禁止的，解决方法如下：
首先要知道这个基础知识：
引用Web页面上凡是拥有"src"这个属性的标签都拥有跨域的能力，比如&script&、&img&、&iframe&
所以，最简单的方法为：我们可以在自己的域名下用iframe引用百度中chair翻译的页面（=。=）。
这个好像比较雷。。那么如何灵活的自己控制呢？
这就要用到动态script标签方式了，JSONP,JSON with Padding，是一个非官方的解决跨域访问的"协议"，采用JSON作为传输数据的载体，具体的实现是通过script标签跨域引用来完成的。
实现JSONP的前提：
1.客户端(我的域名)页面代码可控。
2.服务端(提供服务和数据)的代码可控，或者使用别人写好的服务。实际上很多开放平台都已经提供了写好的服务，例如百度翻译API，调用方式（可以直接打开看到其中数据传输的内容和格式）：
具体可以参考百度API官方介绍：
两个例子：
1.最简单的入门调用
我们先使用百度翻译作为服务端，写一个客户端调用的HTML例子testCallBack.html：
&title&Title&/title&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8" /&
&script type="text/javascript" language="javascript"
src="jquery-1.7.2.js"&&/script&
&script type="text/javascript"&
function abc(re) {
alert(re.trans_result[0].src + "翻译的结果为\"" + re.trans_result[0].dst+"\"");
&script type="text/javascript" language="javascript" src="http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2ALMz6WqUEcsBg4BS91Eppq3&q=chair&from=auto&to=auto&callback=abc"&&/script&
打开页面后发现访问成功，如果要动态翻译的话，可以动态的生成这个script标签。
2.简单的动态生成script例子testTag1.html
&title&Title&/title&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8" /&
&script type="text/javascript"&
function abc(re) {
alert(re.trans_result[0].src + "翻译的结果为\"" + re.trans_result[0].dst+"\"");
function onClick()
var script = document.createElement("script");
script.type = "text/javascript";
var src = document.getElementById("word").
script.src = "http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2ALMz6WqUEcsBg4BS91Eppq3&q="+src+"&from=auto&to=auto&callback=abc";
document.body.appendChild(script);
&input type="text" value="pen" id="word"/&
&input type="button" value="click me!" onclick="onClick()"/&
&/html&
***注意：本例子只是用来演示，真正使用时候请注意script标签的清除，避免页面无限制增加script标签。其他注意事项暂时还没想到=。=
客户端代码基本是在这个基础上进行修改，下面来讨论一下服务端代码，其实服务端代码也很简单，甚至写个servlet组装字符串生成JSON格式的字符就可以，当然要与客户端协调好json的格式。
服务端Servlet生成如下的字符串返回来就行了：
abc({"from":"en","to":"zh","trans_result":[{"src":"chair","dst":"\u"}]});
另外要处理callback这个回调参数，上面百度API介绍里面本来没有callback参数的介绍，后来我随意打了一个竟然人家还实现了。
回顾一下实际上流程很简单：
1.客户端根据条件生成一个url，包含请求数据(如"chair")和回调函数名(如"abc")
2.客户端写好回调函数function abc(re){}
3.服务端接收此请求，生成json数据，并根据回调函数名，动态生成类似 abc(json("chair"))这样的数据返回给客户端。
4.客户端执行abc(json("chair"))
已经写好了jquery实现的这个例子，后续文章准备写下这个例子，也解释一下jquery源码中是怎么支持JSONP这个"协议"的（文中JSONP算是"协议"么，不知道自己的表达是否准确。。。）。
浏览: 354070 次
来自: 上海
楼主辛苦了，真的全是干货，研究Spring-Oauth2的人看 ...
直接跑的你的代码
我使用获得的code想去获取accessToken，报错{&q ...
http://www.quartz-scheduler.org ...
楼主辛苦，虽然看完一遍，但还是一脸蒙逼，先跑一下源码看下呢
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'}