新浪微博应用开发之一:授权机制介绍

题记:国庆期间没有出去玩,也没有回家,只有蜗居在家,闲来无事,研究了下新浪微博人人网的开发平台。特把研究成果及其经验写成博客,分享给大家。首先先说说我开发的新浪微博应用:微博祝福,以及人人网应用:人人祝福墙。这两个应用都是根据爱墙程序修改而成,并且采用了我的jquery插件wBox

今天主要讲一讲新浪微博应用开发的授权机制问题,因为新浪最近跟CSND合作举办一个APP开发大赛,所以今天想说下新浪微博的应用开发。新浪微博是采用两种授权方法:一种是HTTP普通验证(Basic Authentication)方式,另外一种是OAuth,前面一种是最直接的方法,用户输入账号密码登陆,而第三方网站需要记录用户的账号密码下次才能认证成功,不然每次都要输密码很麻烦,并且对于用户来说很不安全。第二种OAuth是比较安全的,用户需要跳到新浪官方输入账号密码,然后通过三步来换取Access Token,说起来比较麻烦,不过得到了这个Token之后就可以请求到新浪微博的API了,用户还可以随时通过新浪微博取消这个认证授权。

HTTP普通验证

最简单的认证方式,断桥残雪之前写的Follow5 API类就是使用这样的方法,其原理就是使用curl一个URL来请求API接口,已获得开放的数据。
关于HTTP普通验证的方法,大家可以参考我之前写的一个Follow5 API PHP类,关于curl的详细操作,大家可以看这篇文章《cURL常用的几个PHP函数

OAuth认证方法

jQuery教程之鼠标事件篇

jQuery除了选择器之外,还封装了很多事件的处理,比如鼠标事件,所谓的鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键而触发的事件,jQuery中封装了几乎所有的鼠标事件,包括点击,双击,移出,移入等鼠标事件,下面断桥残雪简单的介绍下jQuery的鼠标事件

jQuery的click事件

经典鼠标click的实例:


$("sel").click(function(){
    alert('哈哈 !');
});

jQuery的dbclick事件

一般dbclick事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件


$('p').dbclick(function(){
alert('鼠标双击!');
});
$('p').click(function(){
alert('点击了一下!');
});//大家看看结果是怎么样的?

解决jQuery中dbclick事件触发两次click事件

在jQuery事件绑定中,dbclick可以触发两次click事件。例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情。事件处理上没有冲突,都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来禁止或者说屏蔽这次多余的 click 事件呢?本文将提供给您一个比较好的解决办法。

产生原理分析

  首先,来了解一下点击事件发生的先后顺序:

单击:mousedown, mouseup, click
双击:mousedown, mouseup, click, mousedown, mouseup, click, dblclick
  由此看来,dblclick 事件发生之前,实际上发生了两次 click 事件。其中,第一次的 click 是会被屏蔽掉,但是第二次则不会,所以就出现在双击的时候,也触发 click 事件。

IE event.stopPropagation()阻止冒泡事件

在火狐Firefox、opera、IE下阻止冒泡事件是不同的代码的,火狐下使用的是event.stopPropagation(),而IE下使用的是cancelBubble,jQuery 可以使用e.stopPropagation()就可以兼容了,如果是纯粹的JavaScript需要下面的代码来统一:


if (event.stopPropagation) {
// this code is for Mozilla and Opera
event.stopPropagation();
}
else if (window.event) {
// this code is for IE
window.event.cancelBubble = true;
}

Jquery中的offset()和position()方法详解

再给普加地图添加搜索提示的时候,我使用了jQuery的offset方法,因为习惯了,结果出现了不对齐的bug,说明offset的方法获取的top和left值是错误的。后来想起了jQuery中offsetposition的两个方法有所不同,就查了一下google,原来两者是在父节点的相对绝对定位相关的。于是整理了今天的文章。

我们首先来看看这两个方法的定义。

jQuery的offset()方法

获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

jQuery的position()方法

获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

IE中flash遮挡div现象的解决方案

今天开始给网站首页的广告管理系统添加flash广告代码,结果出现IE中(包括IE6+)弹窗广告要flash遮挡的问题,后来想到了常用的iframe方法(参见《解决IE6 select z-index无效,遮挡div的bug》),最终成功了flash遮挡DIV的bug,但是在IE中还出现了浮动的DIV变化位置后,flash出现div碎片的拖尾现象。继续寻找解决方案。最后终于找了原来flash有个参数wmode可以设置,于是代码变成了这样:

<embed src=”s.swf” quality=”high” wmode=”Opaque” width=”150” height=”240”></embed>
于是IE中Flash遮挡DIV的问题成功解决了,看图:

flash遮挡div问题的解决方案

断桥残雪部落格最新的订阅地址

关于wBox iFrame回调关闭问题的解决方案

最近很多使用我的jQuery弹出框插件wBox的人问我,关于wBox的关闭问题,例如一个页面中使用wBox iframe进来一个页面,而这个页面是进行用户登录,登录成功就关闭wBox,其实实现回调关闭wBox的方法很简单,就是使用iframe的DOM操作即可,例如我们的代码这样写:


//wbox赋值出来,然后使用wbox对象的close的方法关闭
var wbox=$("#iframe").wBox({
       requestType: "iframe",
    target:"b.html"
   });

那么我们在页面b.html中进行了用户登录验证,我们验证成功,要关闭wBox,就可以在b.html中使用parent.wbox.close()来进行关闭,就像下面的代码,只要我们验证完毕运行closewBox就可以关闭了iframe:

function closewBox(){
    parent.wbox.close()
}

关于iframe子页面与父页面之间的DOM操作可以参考下面的文章:《使用JavaScript在IE和Firefox下进行iframe的DOM操作

提高Firefox的innerHTML()的性能

Firefox 下innerHTML在操作量大了以后性能下降很厉害,有人写了个提高innhtml性能的代替方法:

function replaceHtml(el, html) {
var oldEl = typeof el === "string" ? document.getElementById(el) : el;
/*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* 一旦我们从 DOM 上移除老的元素,则返回新的元素引用。*/
return newEl;
};

可以直接用el=replaceHtml(el, newHtml)代替el.innerHTML=newHtml

速度到底有多大提升,还得测试说话。作者提供了一个测试页面:http://stevenlevithan.com/demo/replaceHtml.html

此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍,replace 50 倍。

使用PHP把excel(xls)文件导入mysql数据库

昨晚一个客户联系我做网站,提出的要求是需要把客户提供的excel文件里面的数据导入到mysql数据库,最常用的方法就是先把xls文件导出为csv格式的文件,然后在解析csv格式的文件导入到mysql数据库。方法比较冗余,而且分好几步进行,很不方便,断桥残雪今天介绍一种方法是直接跳过csv的中间环节,直接把excel文件导入mysql数据库。

首先我们需要下载PHP-ExcelReader这是一个开源的项目,主要是来解析excel的文件,下载地址:http://sourceforge.net/projects/phpexcelreader,下载之后解压,主要用到excel文件夹里面的两个文件reader.php和oleread.php(这个文件默认的是oleread.inc,不清楚为啥,一堆e文,没看,直接改名即可)。

在reader.php文件中找到以下类似代码(第一行既是),改成正确的oleread.php路径即可:require_once 'oleread.php';

然后新建一个php文件引入reader.php,

解决IE6不支持max-height的bug

罪恶的IE6不支持max-height属性,不过我们可以通过jQuery来解决IE6不支持max-height,jQuery的代码如下:

$(".entry").each(function(){
    if($(this)[0].scrollHeight>500)
     $(this).css({"height":"500px"});
});

原理: 在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度 如果超过了就通过设置height为最大高度,我这里使用的是[0],获取的是的DOM对象,而不是jQuery对象,详细说明见:《jQuery选择器使用详解

上面的代码还没有加入IE6的判断,完整代码如下:

if($.browser.msie&amp;&amp;($.browser.version === "6.0")){
$(".entry").each(function(){
if($(this)[0].scrollHeight>500)
$(this).css({"height":"500px","overflow":"hidden"});
});}

当然你也可以通过css表达式来实现IE6支持max-height属性

.entry{
//我烧验证woshao_985140e4b71711df9e5e000c295b2b8d
height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}