易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

使用Jsonp解决跨域数据访问问题

FORM不能跳转？

电信网通双线站点使用JavaScript实现自动选择

addEventListener attachEvent用法

js Loader

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

以前，对jsonp没有听说过，看到本文的时候觉得可以参考一下，所以，保存一下做个记录
原文：http://www.cnblogs.com/cocowool/archive/2009/05/21/1486307.html

简介
符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函数，这个函数允许客户端的Javascript发送到服务器端的HTTP请求并获得返回数据。Ajax同时也是目前众多的Mashup背后的驱动力量，他们都利用Ajax来聚合不同来源的信息。

理解同源策略的限制
同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。这个策略的历史非常悠久从Netscape Navigator 2.0时代就开始了。

解决这个限制的一个相对简单的办法就是在服务器端发送请求，服务器充当一个到达第三方资源的代理中继。虽然是用广泛但是这个方法却不够灵活。
另一个办法就是使用框架(frames)，将第三方站点的资源包含进来，但是包含进来的资源同样要受到同源策略的限制。

有一个很巧妙的办法就是在页面中使用动态代码元素，代码的源指向服务地址并在自己的代码中加载数据。当这些代码加载执行的时候，同源策略就不会起到限制。但是如果代码试图下载文件的时候执行还是会失败，幸运的是，我们可以使用JSON(JavaScript Object Notation)来改进这个应用。

JSON和JSONP
与XML相比，JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象。
例如一个ticker对象
   var ticker = {symbol:'IBM',price:100}
而JSON串就是   {symbol:'IBM',price:100}
这样我们就可以在函数的参数中传递JSON数据。我们很容易掌握在函数中使用动态的JSON参数数据，但是我们的目的并不是这个。
通过使我们的函数能够加载动态的JSON数据，我们就能够处理动态的数据，这项技术叫做 Dynamic Javascript Insertion。
我们看下面的例子
index.html中
   <script type="text/javascript">
       function showPrice(data){
           alert("Symbol:" + data.symbol + ", Price:" + data.price);
       }

       var url = "ticker.js";       //Outer JS URL
       var script = document.createElement('script');
       script.setAttribute('src', url);

       //load javascript
       document.getElementsByTagName('head')[0].appendChild(script);
   </script>
ticker.js中
   var data = {symbol:'IBM', price:100};
   showPrice(data);

上面的代码通过动态加入Javascript代码，来执行函数加载数据。
正如之前提到过的，同源策略对于动态插入的代码不适用。也就是你可以从不同的域中加载代码，来执行在他们代码中的JSON数据。
这就是JSONP(JSON with Padding)。注意，使用这种方法时，你必须在页面中定义回调函数，就像上例中的showPrice一样。

我们通常所说的JSONP服务(远程JSON服务)，实际上就是一种扩展的支持在用户定义函数中包含返回数据的能力。这种方法依赖于必须接受一个回调函数的名字作为参数。然后执行这个函数，处理JSON数据，并显示在客户页面上。

JQuery的JSONP支持

从JQery 1.2以后，就开始支持JSONP的调用。在另外的一个域名中指定好回调函数名称，你就可以用下面的形式来就加载JSON数据。
   url?callback=?

示例：
   jQuery.getJSON(url + "&callbak=?", function(data){
       alert("Symbol:" + data.symbol + ", Price:" + data.price);
   });
jquery会在window对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的Ajax请求一样工作。

上例中我们在动态插入到页面的代码中使用了静态的json数据，虽然完成了依次JSONP返回，但仍不是JSONP服务，因为不支持在URL中定义回调函数名称。下面是一个将其变成JSONP服务的一个方法服务器端使用PHP。

首先我们来定义接口的规范，就像这样：http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=showPrice
symbol是请求条件，callback是回调函数名称。

在页面文件中，我们使用JQuery的支持：
       //JQuery JSONP Support
       var url = "http://www.mydomain.com/api/suggest.php?symbol=IBM&callback=?";
       jQuery.getJSON(url, function(data){
           alert("Symbol:" + data.symbol + ", Price:" + data.price);
       });

在suggest.php中
   $jsondata = "{symbol:'IBM', price:120}";
   echo $_GET['callback'].'('.$jsondata.')';

现在，如果我们想制作一些mashup，或者将第三方的资源整合到一个页面中，我们就很容易想到JSONP的解决方法了。

现有的JSONP服务
   既然我们已经知道如何使用JSONP，那么我们也就可以使用一些现有的JSONP服务了，下面是一些例子：
   Digg API:http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
   Geonames API:http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
   Flickr API:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

注意：
   JSONP是一个非常强大的构建mashp的方法，可是不是一个解决跨域访问问题的万能药。它也有一些缺点
   第一也是最重要的：JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求
   另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。


[参考资料]
1、Cross-domain communication with jsonp       http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

在开发中，有一个FORM，大概是这样的：

XML/HTML代码

<script>
function formSubmit(){
document.getElementById("form1").submit();
}
</script>
<form action="xxx.php" id='form1' method="post">
<a href="javascipt:;"><img src="xxx.gif" onclick="formSubmit();"></a>
</form>

xxx.php里面是header跳转。然后问题就发生了。这个FORM是提交了，但，就是不能跳转。这是为什么呢，为什么呢？

如果把<a>标签和img标签去掉，换成<input type="button" onclick="formSubmit()">，那就提交成功也跳转成功。为什么用<a>标签就不行呢？

怀疑是<a>标签的href="javascript:;">的返回而导致了跳转提交的失败，于是把<a>标签去掉，在img标签中加上onclick，果然成功。

当初采用<a>标签是因为鼠标样式的关系，既然知道这个原因，那么就尝试把href="javascript:;"改成传统的"#"，跳转成功（用#的缺点在于，#是锚点，如果啥也不加，那么点击后，页面会自动滚动到顶部，不利于用户体验）

或者，不使用<a>标签，直接就在<img>标签上加上样式style="cursor:pointer"，也可以让鼠标移动到图片就是显示一个小手了。

至此，问题解决。其实以前也遇到过这个问题，当初也是在一个FORM里，当初的链接是<a href="javascript:functions();void(0)">xx</a>结果也是失败的。

一年后，又是这个问题。。。记下来提醒一下自己，下次遇到时，先看看是否还是这个原因。

说实话，这种切换方式，我真的没有考虑过。所以感到特别有新意。。。

原文：http://xinsync.xju.edu.cn/index.php/archives/5013
内容：

网站打开的速度快是相当重要的，不管你是用的什么网络，都打开的很快。我们且不谈论所做产品的初期发展用户人群因为这没有多大意义，如果你定位为学生，那么根据我们自身大学四年的经验，同学中间用电信、校园网的比例基本上变数太大。

值得庆幸的是，现在我们已经实现电信、网通双线北网通、南电信是我们国家的一个特色。更甚至07年春节爆出电信与网通内部协议，内容大概是南北互不侵犯各自的领域。因此，如果要立足做一个成功的互联网产品，必须不要管用户来自于哪里，用的什么网络环境。这最后的解决方案就是电信、网通双线。还有个间隙–校园网，比较好的是校园网跟网通有很宽的光纤直连，物理环境可以用米来解决。

技术处理
<img src=”http://www.xinsync.com/notexist” width=”1″ height=”1″ onerror=”javascript:top.location=’http://www.xinsync.com’”>
<img src=”http://cnc.xinsync.com/notexist” width=”1″ height=”1″ onerror=”javascript:top.location=’http://cnc.xinsync.com’”>

这是电信、网通自动选择的核心代码，天哪，太神奇了，竟然是js实现的。

解释： src里边放的是一个不存在的地址，这样2个img打开的时候都会出错，都会触发onerror事件,但是你的浏览器对这2个img加载、判断出错有个先后顺序，而这个先后顺序取决于你的浏览器去连2个url的快慢程度，这就表现为http请求两个域名的快慢。
假如你是校园网或者网通，同时去连 www.xinsync.com(这个域名是绑定到电信的一个ip)、cnc.xinsync.com(这个域名是绑定到网通的一个ip)
当然就会先触发onerror=”javascript:top.location=’http://cnc.xinsync.com’”
这样就打开了http://cnc.xinsync.com

电信同理，最后就实现了校园网、网通用户打开的是http://www.xinsync.com/notexist，电信用户打开的是http://www.xinsync.com/notexist

半夜看书的时候，莫莫问我如何bind事件，我告诉他jquery直接bind就可以了。但莫莫告诉我说，是直接用原生代码。由于没有接触过，只能问google了。

查下来，几乎所有的文章都是大同小异。看来在国内ctrl+C,ctrl+v是蔚然成风（当然，我也经常这么做，给大家带来的不便，实在抱歉）

顺手看到一篇英文的介绍，发现挺不错。原文地址为：http://www.captain.at/howto-addeventlistener-attachevent-parameters.php

国内的文章都着重于介绍怎么绑定。如何绑定多个，但，对于绑定的元素本身的事件却没有介绍。比如我绑定在ID为xxx的元素上的click事件怎么办。

例子都是用alert来举例，比如：

JavaScript代码

function test()
{
alert('test');
}
document.getElementById('xx').addEventListener('click',test,false);

几乎都是这样的例子，就是没有一篇文章介绍，如果test方法有参数怎么办。

那篇英文的就介绍的很详细。

假设绑定事件为：

JavaScript代码

if(window.addEventListener){ // Mozilla, Netscape, Firefox
object.addEventListener('mouseover', testevent, false);
object.addEventListener('click', testevent, false);
object.myflag = "test";
object.mydata = "123";
} else { // IE
object.attachEvent('onmouseover', testevent);
object.attachEvent('onclick', testevent);
object.myflag = "test";
object.mydata = "123";
}

触发的testevent如下：

JavaScript代码

function testevent(evt){
var e_out;
var ie_var = "srcElement";
var moz_var = "target";
var prop_var = "myflag";
// "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE
evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
alert(e_out);
prop_var = "mydata";
evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
alert(e_out);
}

看这个例子就可以很明显的知道，第一个参数就是event，自身ID，就是event["target"]或者event["srcElement"]（这个与IE和FF有关）。

而这个event["target"]其实就相当于document.getElementById("xxx")，剩下的操作就与原来一样了。

介绍的有点乱，大概意思就是这样

Javascript的后加载，很多人都写过，这是为了防止最初加载的JS过多影响网速。看到风雪之隅写了一个，看上去挺漂亮就转载了一下。。。

原文：http://www.laruence.com/2009/05/21/829.html

示例：

JavaScript代码

var loader = Loader;
loader.onReady = function(){
alert('全部载入完成');
}
loader.on('onLoad', function(name) {
alert(name + '载入完成');
});
loader.load([
'http://www.laruence.com/1.js',
'http://www.laruence.com/test.js',
'http://www.laruence.com/main.js'
]
);

源码：

JavaScript代码

/**
* Eve Js Loader
* @version 1.0.1
* @author laruence<laruence at yahoo.com.cn>
*/
/**
* a global object instance, you can easily change to a class definition
*/
var Loader = {
/**
* @var onLoad when load a individual file completed ,
* this event will be fired * @param string name loaded script file name
*/
onLoad : function(name){},
/**
* @var onReady when all scripts loaded, this event will be fired
*/
onReady : function(){},
/**
* a empty constructor
*/
init : function(container) {
},
/**
* a empty error handler
*/
handlerError : function(e) {
alert(e);
},
/**
* event register
* @param string evt event name
* @param function handler
*/
on : function(evt, handler) {
switch ( evt.toLowerCase() ) {
case 'load' :
this.onLoad = handler;
break;
case 'ready' :
this.onReady = handler;
break;
default :
break;
}
return true;
},
/**
* private method
*/
_load : function(path, callback) {
try {
var script = document.createElement('script');
script.src = path;
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
if( script.addEventListener ) {
script.addEventListener("load", callback, false);
} else if(script.attachEvent) {
script.attachEvent("onreadystatechange", function(){
if(script.readyState == 4
|| script.readyState == 'complete'
|| script.readyState == 'loaded') {
callback();
}
});
}
} catch(e) {
this.handlerError(e);
callback();
}
},
/**
* start loding process
* @param array scripts files want to be loaded
*/
load : function(scripts) {
var total = scripts.length;
var _self = this;
var indicator = arguments[1] || 0;
if ( indicator >= total ) {
_self.onReady();
return true;
}
var callee = arguments.callee;
var script = scripts[indicator];
this._load(script, function() {
_self.onLoad(script);
callee.apply(_self, [scripts, ++indicator]);
});
return true;
}
}

说到这里，其实，又让我想起了code.google.com提供的googleapi的加载方式，他提供了一些常用JS类库的加载，首先，它加载了googleapi：http://www.google.com/jsapi，然后就可以调用了

XML/HTML代码

<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",
// on search completion, process the results
function (data) {
if (data.responseData.results &&
data.responseData.results.length > 0) {
var results = data.responseData.results;
for (var i=0; i < results.length; i++) {
// Display each result however you wish
alert(results[i].titleNoFormatting);
}
}
});
});
</script>

方式和原理差不多。仅作参考吧。。。

« 2025年06月 »