- 浏览: 125775 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
弦月001:
楼主目前对jcifs还记得吗?我目前在做jcifs sso研究 ...
JCIFS支持多域的SSO -
jusescn:
effort.mjb 写道博主好,请问怎么样才能直接获取到当前 ...
JCIFS支持多域的SSO -
effort.mjb:
博主好,请问怎么样才能直接获取到当前客户端的用户的域信息呢?( ...
JCIFS支持多域的SSO -
jusescn:
yingzhor 写道博主,您好。 如果,我想扩展一下,如果客 ...
JCIFS支持多域的SSO -
yingzhor:
博主,您好。 如果,我想扩展一下,如果客户端不再域内,直接把请 ...
JCIFS支持多域的SSO
http://galaxystar.iteye.com/blog/169765
一直没时间玩js,看到douban网的开放api后,查了些文档,了解了一下 jsonp 跨域请求方式.跟大家分享一下。
其实 jsonp 是个很简单的一个东西。
主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。(其实也可以用eval函数)
来个超简单的例子:
首先是准备客户端的代码,
- <!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>Test Jsonp</title>
- <script type="text/javascript">
- function jsonpCallback(result)
- {
- alert(result.msg);
- }
- </script>
- <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
- </head>
- <body>
- </body>
- </html>
<!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>Test Jsonp</title> <script type="text/javascript"> function jsonpCallback(result) { alert(result.msg); } </script> <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script> </head> <body> </body> </html>
其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为
jsonpCallback({msg:'this is json data'})
Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)
评论
- <script type="text/javascript">
- function A(para){
- alert(para);
- }
- </script>
- <script type="text/javascript">
- A('this is test data');
- </script>
<script type="text/javascript"> function A(para){ alert(para); } </script> <script type="text/javascript"> A('this is test data'); </script>
<scrīpt LANGUAGE="Javascrīpt">
<!--
Function.prototype.bind = function() {
var __method = this, args = [], ōbject = arguments[0];
for (var i = 1; i < arguments.length; i++)
args.push(arguments[i]);
return function(moreargs) {
for (var i = 0; i < arguments.length; i++)
args.push(arguments[i]);
return __method.apply(object, args);
}
};
var scrīptTagProxy=function(){
this.head = document.getElementsByTagName("head")[0];
}
scrīptTagProxy.TRANS_ID=1000;
scrīptTagProxy.prototype={
loadUrl : function(url, params, caller,onComplete, onFailure){
transId=++scrīptTagProxy.TRANS_ID;
var trans = {
id : transId,
cb : "stcCallback"+transId,
scrīptId : "stcscrīpt"+transId,
url : url,
params : params,
caller : caller,
onComplete : onComplete,
onFailure :onFailure
};
var conn = this;
window[trans.cb] = function(o){
conn.handleResponse(o, trans);
};
params='callback='+trans.cb+'&'+params;
var scrīpt = document.createElement("scrīpt");
scrīpt.setAttribute("src", url+params);
scrīpt.setAttribute("type", "text/javascrīpt");
scrīpt.setAttribute("id", trans.scrīptId);
//设置超时
trans.timeoutId=setTimeout(this.handleFailure.bind(conn,trans), 10000);
this.head.appendChild(scrīpt);
},
handleResponse : function(o, trans){
this.destroyTrans(trans, true);
trans.onComplete.call(trans.caller||window, o);
},
handleFailure : function(trans){
this.destroyTrans(trans, false);
if(trans.onFailure){
trans.onFailure.call(trans.caller||window, null);
}else{
alert('超时');
}
},
destroyTrans : function(trans, isLoaded){
this.head.removeChild(document.getElementById(trans.scrīptId));
clearTimeout(trans.timeoutId);
if(isLoaded){
window[trans.cb] = undefined;
try{
delete window[trans.cb];
}catch(e){}
}else{
window[trans.cb] = function(){
window[trans.cb] = undefined;
try{
delete window[trans.cb];
}catch(e){}
};
}
}
}
function init(){
var proxy=new scrīptTagProxy();
proxy.loadUrl('http://search.yahooapis.com/ImageSearchService/V1/imageSearch?', 'appid=YahooDemo&query=Madonna&output=json', window,process)
}
function process(a){
alert('这个结果从服务器返回:'+a)
}
//-->
</scrīpt>
<body ōnload = "init()">
</body>
我的意思是,无论你用iframe或是只能用于ie的documentFragment(这明显是ie的一个问题,凭什么要为任意一个新节点产生一个新的脚本scope?而且我怀疑这会引起内存泄漏——ms的人在说memory leak的patterns那个文章里曾经提到过由这一问题引起的内存泄漏),所付出的代价似乎比不上得到的好处。
因为不用iframe,你也可以达到向最终编程者隐藏callback名字的目标,只需要callback是由你的框架托管和包装起来就可以了。差别只在于,这种方式,这个callback名字会污染当前的global上的命名空间,iframe则不会,因为它在一个独立的scope里——但是付出的代价是有独立的browserContext(包括window、document等对象)。
因此,iframe只是一个锦上添花的工具。我认为理想的目标是:
1. callback名字最好是可配置的。因为万一有些人写死了callback名字。。。
2. 有些人不仅写死了,而且不是callback({...json...}),而是var hardCodeJSON = {...json...},最好也能处理这种情况(肯定是可以做到的)。
3. 不能每次都搞一个iframe,这样太浪费。iframe的唯一目的其实是搞一个独立的scope,所以弄一个iframe就可以了。还有基于前面提到的因素,建议不要用documentFragment。
那么在一个iframe情况下,你说的“多个一模一样的callback”的冲突还是存在。这就需要用其他技巧解决。所以反过来,如果其他技巧解决了这个问题,那么iframe的唯一好处就是一丁点都不污染全局命名空间——个人来讲,我认为这个好处还是相当有限的。
下面说一个一般化(也就是不需要iframe)的最土的思路。原本我们插入一个<script>标签来读取json。现在我们可以插入3个 <script>。第一个做初始化,建立服务器所需要的callback函数,如果有命名冲突,则把之前的那个变量保存起来。第二个还是 load JSON。第三个做清理,去掉服务器所用的callback,并把之前的变量恢复起来。
当然这只是一个一般的描述,实际做的时候,肯定有很多问题要解决,但是从大体上看,应该是行得通的。
原来firefox需要用绝对地址才可以,safari需要往iframe write html才行,我做了个简单的demo,唯一的一个约定就是输出的json文件的格式是var json = {...};
演示:http://wfsr.net/temp/loadjson.html
loadjson.html(没有写兼容safari的方式)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <meta http-equiv="Content-Language" content="zh-CN" />
- <meta content="all" name="robots" />
- <title>json数据加载演示</title>
- <script type="text/javascript">
- function $loadJSON(url, callback, context){
- var iframe = document.createElement("iframe");
- iframe.style.display = "none";
- iframe.src ='javascript:\'<script src="' + url + '" type="text/javascript"><\/script><script type="text/javascript">frameElement.callback(this.json);<\/script>\'';
- document.body.appendChild(iframe);
- iframe.callback = function(json){
- callback.call(context || window, json);
- iframe.src = '';
- iframe.parentNode.removeChild(iframe);
- iframe.callback = null;
- iframe = null;
- };
- }
- function Demo(url){
- this.url = url;
- this.element = document.createElement('div');
- document.body.appendChild(this.element);
- this.bindData = function(json){
- this.element.innerHTML = '本次取回的数据:' + (json ? json.number : '(网络错误)');
- }
- $loadJSON(this.url, this.bindData, this);
- }
- </script>
- </head>
- <body>
- <button onclick="new Demo('http://wfsr.net/temp/json' + ((Math.random() * 100 | 0) % 2 ? '' : Math.random()) + '.js')">加载</button>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta content="all" name="robots" /> <title>json数据加载演示</title> <script type="text/javascript"> function $loadJSON(url, callback, context){ var iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.src ='javascript:\'<script src="' + url + '" type="text/javascript"><\/script><script type="text/javascript">frameElement.callback(this.json);<\/script>\''; document.body.appendChild(iframe); iframe.callback = function(json){ callback.call(context || window, json); iframe.src = ''; iframe.parentNode.removeChild(iframe); iframe.callback = null; iframe = null; }; } function Demo(url){ this.url = url; this.element = document.createElement('div'); document.body.appendChild(this.element); this.bindData = function(json){ this.element.innerHTML = '本次取回的数据:' + (json ? json.number : '(网络错误)'); } $loadJSON(this.url, this.bindData, this); } </script> </head> <body> <button onclick="new Demo('http://wfsr.net/temp/json' + ((Math.random() * 100 | 0) % 2 ? '' : Math.random()) + '.js')">加载</button> </body> </html>
json.js
var json = {"number" : Math.random() * 100};
比如第一次回调就是xxx?_callback1
第二次就是xxx?_callback2
当然这个过程是被包装起来自动的,最终程序员不用管它。
有人说全局命名污染,这个是没错。但是问题其实没那么严重,大不了你产生一个GUID好了,再有冲突,宇宙都毁灭几次了。
这样的唯一问题是它不是静态化的。
要静态化,其实就是避免不了对callback名字的约定。那么我们就污染吧,反正就污染一个,比如叫他 _九天十地菩萨摇头怕怕劈雳金光雷电掌_json_callback。当然考虑到每次都要写,我建议还是搞短点,例如 JSON.CB
JSON.CB完全可以鉴别自己是在哪个script里被调用的(具体方法就省略了),所以你在生成script时,插点草标就可以了。
iframe在这里唯一的好处就是连这个小小污染都没有了。不过考虑是否值得呢?这就贱人贱智啦!
问题是,emu同学花了那么多力气,其实绕了一圈也没有能提供更好的方案。因为所做的,不过是对最终编程者隐藏掉callback名字而已。这种活,不用iframe技巧,其实一样可以达到的。
山人讲的其他问题,我理解是这样的:
1. 我不想调一个全局函数,我想调一个局部函数,或者方法,总之那才是我的逻辑。
2. 我可能出于某种原因要同时发起若干个回调。
这种需求我觉得确实需要对callback上做包装。
首先,他隐含了个条件(或者说这句“想要用一致的callback接口来回传数据”稍稍说到了一点)文章里没说,就是服务器的输出,实际上是带有callback名字的,他的例子里是visitCountCallBack。
这说明两点:
第一:服务器输出的不是真正的json。
第二:仍然是耦合。只不过现在client code看不到这个耦合,而是library和server代码的隐藏耦合。对于同时包含两端的框架来说,这也许ok,但是我很不喜欢这种隐匿式的耦合。
这两点比之xxx?callback=myCallback,毛病大许多。
第一条就是强制了callback接口,你爽了,别人(别的调用者)都不爽。
第二条就是对耦合的认识,我认为是有失偏颇的。
BTW,documentFragment来得到一个单独的script作用域,我担心会有内存泄漏,可能应该多多测试看看。
另外推荐一下emu的这种方法:
http://www.blogjava.net/emu/articles/129240.html
不过我测试发现只有ie和opera支持,firefox和safari没效果,如果能兼容,这个方法才比较有吸引力
评论
<script src="jquery-1.2.6.js"></script>
<script>
$.getJSON("http://www.abc.com/json.action", function (data) {
alert(data.newName);
});
</script>
推荐:http://www.khq168.com/
发表评论
-
msxml3.dll 错误 '800c0008' 指定资源下载失败
2009-12-15 09:37 4293在个别机器有出现,表 ... -
frame内嵌ExtJS、PrototypeJS、Mootools通用AJAX框架内存溢出问题解决
2009-08-12 13:27 2249表现:在弹出页面中嵌入另外页面(iframe/frameset ... -
50个实用的JavaScript工具
2009-02-23 09:50 1626http://www.iteye.com/news/5846- ... -
javascipt的AOP
2009-01-04 10:54 1218很多实现了,基于jquery和prototype的都有。 ht ... -
13个在线web2.0风格生成器
2008-12-29 11:39 1029现在,只要看一些web2.0应用的目录,你就会发现,无论是小网 ... -
Checkbox的checked属性问题
2008-12-26 11:00 5119http://www.cnblogs.com/net205/a ... -
使用CheckBox的indeterminate属性的问题
2008-12-26 10:58 2220http://blog.csdn.net/yangdengfe ... -
javascript中的this与call/apply的应用
2008-12-25 10:29 1013call/apply方法作用是将 某对象的某个方法置于某种环境 ... -
如何直接调试线上页面的JavaScript和CSS
2008-09-10 12:43 1709http://lifesinger.org/blog/?p=4 ... -
Ext JS与企业软件界面设计
2008-09-03 14:32 1364http://hoou02.blog.163.com/blo ... -
Unicode编码转换
2008-05-29 19:46 1455web开发时,通过XMLHttp请求访问数据,对中文经常出现乱 ... -
escape,encodeURI,encodeURIComponent 比较
2008-04-22 17:50 993js对文字进行编码涉及3个函数:escape,encodeUR ... -
[ext2.0d5]刚从ext.js上下载的ext2.0d5,呵呵,尝鲜罗。
2007-09-07 15:36 3698写程序下的,关键url:http://extjs.com/pl ... -
基于SSH架构上的ajax翻页(json+prototype+jstemplate)
2007-08-29 10:03 3524简单实现,不用对TMD的一堆的js的api了解,俺还不是js专 ...
相关推荐
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性来实现数据的交换。在Web开发中,由于浏览器的同源策略限制,JavaScript通常无法直接访问不同源的资源,但JSONP...
但为了实现数据交互,开发者常使用JSONP(JSON with Padding)这一技术来规避同源策略,实现在客户端跨域获取JSON数据。本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net...
2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于XMLHttpRequest对象。首先,客户端在HTML页面中定义一个全局函数,如`handleData(data)`。然后,创建一个`<script>`标签,将`src`属性设置为服务器的URL,URL中...
JSONP是一种非标准的跨域方法,通过动态插入`<script>`标签,从服务器端获取JSON数据。服务器需要将数据包装在一个函数调用中,客户端定义该函数来接收数据。而CORS则是一种更为现代和安全的跨域方式,需要服务器端...
2. **JSONP(JSON with Padding)**:JSONP是早期解决跨域问题的一种方式,它利用了`<script>`标签可以跨域加载资源的特性。服务器返回的不再是JSON数据,而是包含一个JavaScript函数调用,函数名由客户端指定,参数...
JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`<script>`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...
jQuery库提供了一个方便的方式来处理跨域请求,特别是对于获取JSON数据。在jQuery中,我们可以使用`$.ajax()`或`$.getJSON()`方法。当设置`dataType`为'jsonp'时,jQuery会自动处理JSONP请求。JSONP是一种绕过同源...
JsonP 的核心原理是:JavaScript 使用 Ajax 无法跨域调用数据(如 XML、JSON 等),但是可以跨域调用 JavaScript 数据。JsonP 的工作原理是通过动态添加一个 script 标签,src 属性指向请求的 URL,返回的数据是一个...
跨域_jsonp_原理,了解json的原理,等于我们掌握json的技术有帮助
1.3.3 jQuery-JSONP跨域 jQuery提供了JSONP的支持,通过$.ajax方法的dataType参数设置为"jsonp",可以轻松发起JSONP请求。jQuery会自动生成一个唯一的回调函数名,并将其作为参数传递给服务器,服务器返回的数据应以...
在描述中提到的JSONP方式实现跨域访问示例,我们可以创建一个服务端接口,接收回调函数名作为参数,然后返回封装好的JSON数据。在客户端,我们需要定义这个回调函数并处理返回的数据。 总结起来,跨域访问是一个...
本文将详细介绍使用jQuery实现JSONP跨域获取数据的三种方法。 ### 第一种方法:$.ajax()函数 $.ajax()是jQuery中最为通用的Ajax实现方式。要使用JSONP方法,我们需要在$.ajax()函数中设置`dataType`为'jsonp'。...
本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一种新格式,而是一种利用动态创建`<script>`标签来绕过同源策略的技巧...
1、地址...演示跨域问题以及跨子域名解决方法 2、地址http://a.test.com:8888/testAjaxCross/public/jsonp.do 演示jsonp解决跨域问题的三种方案jsonp、$getJSON、$ajax等
- **JSON**是一种数据格式,用于描述和传输数据,而**JSONP**则是一种技术手段,用于解决跨域问题。 - **JSON**可以直接被JavaScript解析,而**JSONP**实际上是一个JavaScript函数调用。 - **JSON**主要用于同域内的...
**jQuery跨域获取JSON数据详解** 在Web开发中,由于浏览器的安全策略,JavaScript通常不能直接进行跨域请求,但jQuery提供了$.ajax和$.getJSON方法...只要正确配置服务端和客户端,就可以轻松实现跨域JSON数据的获取。
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中,由于同源策略的限制,AJAX无法直接从本地文件系统获取JSON数据。然而,JSONP(JSON with Padding)是一种绕过同源策略的技术,尤其适用于GET...
JSONP(JSON with Padding)是一种解决跨域请求的方法,即在客户端通过 script 标签请求服务器端的数据,然后服务器端将数据以 JSON 格式返回,并在返回数据中包含一个回调函数,以便客户端可以将数据处理。...
Ajax的jsonp方式跨域获取数据的简单实例中,涉及到了Web开发中常见的跨域问题以及解决这一问题的方法之一——JSONP(JSON with Padding)。为了深入理解,让我们从以下几个方面探讨这些知识点: 1. 跨域问题 在Web...
Ajax JSONP跨域处理是Web开发中的重要技术,通过JSONP,开发者可以在不违反同源策略的前提下实现跨域数据交互。虽然JSONP存在一些限制和安全隐患,但在许多场景下,它仍然是一个实用且有效的解决方案。随着技术的...