使用javascript验证、发送饭否信息

2009-5-2 评论(1) 分类:技术文章 Tags:

想做点东西练练javascript,于是打算为饭否AIR客户端爱饭加上额外的功能,例如上传图片等,先尝试了使用javascript验证和发送饭否消息,仅这个就花了不少时间,很多时间花在了去除低级错误上,例如jquery ajax的type:”post”被我写成了method:”post”,花了很多时间才找出来。

先放上主要代码,使用jquery框架以及jquer.base64插件:

var name = "yourname";
var pass = "yourpassword";
$.ajax({
    url: "http://api.fanfou.com/statuses/update.xml",
    type:"POST",
    data: "status=信息内容",
    beforeSend: function(xhr){
    xhr.setRequestHeader('Authorization', 'Basic ' + $.base64.encode(name + ':' + pass));
  },
  success: function(data, textStatus){
    alert(data);
  }
});

有两个主要问题:

1.验证用户

饭否API验证方式为 HTTP Basic 验证,需要对“用户名:密码”进行base64编码,添加进ajax请求的http头信息。
XMLHttpRequest.setRequestHeader(‘Authorization’, ‘Basic ‘ + $.base64.encode(name + ‘:’ + pass));
使用饭否需要验证的API(例如读取私信、发送消息)时,都要在请求前加上这一条HTTP头信息。

爱饭使用YUI框架,可以通过YAHOO.util.Connect.initHeader设置每次ajax请求的默认HTTP头信息,
initHeader(‘Authorization’, ‘Basic ‘ + Base64.encode(name + ‘:’ + pass), true);
最后一个参数”true”代表设为默认http头信息。
设置之后每次使用YAHOO.util.Connect.asyncRequest进行ajax请求都不需要再添加验证。

2.跨域问题

使用ajax请求资源总有跨域问题,即请求只能发生在相同的域内。
以上那段代码请求的域为api.fanfou.com,如果放在网上,除非放在饭否服务器,有相同的域,否则无法运行。
对本地网页,在跨域上,不同浏览器有不同规则,IE允许跨域访问,firefox与chorme都不行。以上代码放在本地,用IE打开,就可以运行,用firefox打开,会出现Access to restricted URI denied” code: “1012。

使用IE可以通过设置可信任站点实现跨域获取内容,其他跨域方法网上很多,还未细究,但都是要在客户端设定或者两站互相配合。

所以,使用javascript发送饭否消息只适合运用在AIR程序上,AIR有自己特定的安全沙箱,允许跨域请求。

另,饭否与Twitter的API几乎一样,可直接套用。

P.S 早上起来,发现已经有人对爱饭扩展,做了查看上传的图片的功能,他还在做上传图片的功能,我也没必要再做这部分功能了。开源的好处之一,就是有很多人帮忙完善这个程序啊~

[AIR]微博客数据保存 twitkeeper

2008-10-2 评论(8) 分类:作品 Tags:

twitkeeper

需要安装最新ADOBE AIR v1.01 :http://airdownload.adobe.com/air/win/download/latest/AdobeAIRInstaller.exe

twitkeeper下载:twitkeeper.zip

在某个时候看到一句话:“话说,腾迅QQ也总有一天会消失,那么一些记录也就只是或长或短的暂时;那么,饭否,也是吧?”

我是 觉得腾讯QQ是只会演变成别的东西而不会消失,饭否就不知道它能提供服务多久了,饭否没有盈利,创建它的人也放任着饭否不管全力搞海内了。不过饭否有那么 多的用户,在互联网用户是基础~~所以该是不会突然就消失的。数据是放在网上安全还是放在本地由自己保管安全?就几年前的话毫无疑问自己保管才踏实,现在 就不一定了,有时放在实力雄厚的网站上更安全。饭否现在来说,实力并不咋样。饭否已经不增加新功能了,搜索功能都没有(不会是我没发现吧?),各种对数据 的统计也没有。

所以,就想写个程序,一可以保存饭否上的数据,二可以对保存的数据进行分析统计。其实所有的微博客构造都差不多,于是想做可扩展的,不单是读取饭否的,也可以读取叽歪、滔滔、twitter等其他微博客内容的。

获取数据是一页页读取HTML再提取有用的数据的,由于安全沙箱的关系,网页中不能获取不同域的网站的页面数据,所以需要做桌面应用程序。做桌面软件, 我就只会做ADOBE AIR程序而已,事实上,我只会用网络语言。上次的账本程序用actionscrīpt3写,这次就用javascrīpt写了,刚好很想练练js,刚好 发现一个很好的软件aptana,写程序、调试都很方便,又刚好看到一本好书Pro Javascrīpt Design Patterns,于是在暑假接近8月的时候就开始写了~~

开头部分十分认真,想结构想半天,想很多以后扩展什么的,定一个类都定半 天,写的代码看起来挺舒服。后来暑假某一段时间开始就不写程序啦,到了开学都没怎么再写,开学后事情又多,没啥时间,又想快点完成这个程序,好专心做其 他,结果,我做东西的一贯作风:虎头蛇尾又出现了。。现在的程序又变成了只求效果,不管结构、扩展什么的东西了~~这个是匆匆完工的,外观做得马虎,统计 的东西应该用图表表现出来的,现在直接输出数字了,挺难看,名字叫twitkeeper,twit是微博客元始天尊twitter的缩写,但里面只能读取 之前写的饭否和叽歪,懒得去写twitter的读取了。。程序没经过多少测试,BUG有多少就不知道了。。

之前设想,先做出基本的,以 后再慢慢扩展以下功能:用户登陆,可发送信息,可同时发送一条信息到多个微博客(饭否、叽歪、twitter等),支持读取封闭帐户(就是只有好友才能查 看的帐户),支持读取保存私信,视图可任意扩展,本地收藏夹(每条消息后面有选项“保存到收藏夹”),等等,有了数据,就可以进行各样的分析统计。上面那 些想起来都是可以实现,不过相当麻烦,估计我是不会再做。。

在做的过程发现,饭否比叽歪好很多,饭否读取速度飞快,叽歪读取速度那个慢啊。。饭否页面结构好,获取数据的时候省事不少,叽歪的页面。。内容不是单独在一个标签里,奇怪。页面又很不简洁。

运行的时候,才发现在页面插入DOM很耗时,显示四五十页的文件都要五六秒。。这个应该可以改善的,改成不一次性读取,有空再改。搜索遍历等的查找就很 快。用XML格式储存数据得注意”<” “>” “&”这三个字符,会破坏XML的结构,当时分析XML结构出错时就在想,早知用json了,没那么严格,XML一不小心结构没了就完蛋。。

ADOBE AIR虽然说支持用JS写,但觉得还是用FLEX做,用actionscrīpt才是正道~~用JS麻烦不少~~

我自己是觉得应用里的搜索功能挺好用,就是读取数据多的文件时很慢,上面说了,在页面插入DOM很耗时,待改进。

10月3日更新:

昨晚放上twitkeeper时就说到,读取数据多的文件时十分慢,今天刚好看一篇文章:Javascrīpt动态生成表格的性能调优,用数组储存元素再一起放进页面,速度提高了近10倍~~~~现在读取的速度很快~~~不晓得为啥用数组储存会比其他方式快那么多,估计得深入了解才能知道~~

[AIR]AIR程序外观透明效果教程

2008-4-30 评论(4) 分类:技术文章 Tags:

之前做完AIR账本程序的时候就想分享一下制作AIR的一些~~技巧吧~~因为网上有关AIR的教程实在太少。但后来没激情了,就罢了。今天一位网 友问我怎样把AIR的外观制作成我那种不规则形状的有点半透明的效果的。嗯~反正有空,就写个详细制作过程吧~~我是用FLEX3做的,至于在FLASH 里怎么做我就不知道了~~没试过~~~第一次写教程,难免表达等方面会有些问题,这个BLOG又不能插图,所以只有文字,不能图文并茂,看起来该会痛苦 点~~凑合着看吧。。

一、基础

打开FLEX3 新建一个AIR工程:File-New-Flex Project

输入工程名   在Application type处选择 Desktop application(runs in Adobe AIR)  直接点finish

打开这个工程所在的文件夹,默认是:我的文档/Flex Builder 3/工程名

打开src文件夹 拖张有透明效果的PNG图片进去。

因为不知道怎么直接在FLEX的工程面板里直接添加文件,所以我直接跑到文件夹去添加,知道的人知会一声啊~~~

接下来插入这张图片,在<mx:Application>标签内插入<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>

bg1.png是刚才那张PNG图片的文件名。

按CTRL+F11看下,图片是插入了 但有窗口 不透明,接下来就去掉窗口,让它透明。

二、透明

<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:WindowedApplication>

改成<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:Application>

因为只要是WindowedApplication就会有窗口出现,貌似是这样。。

在此标签内加入

<mx:Style>
Application
{
background-color:””;
background-image:””;

}
</mx:Style>

打开跟example.mxml在同一目录下的example-app.xml,是个配置文件。

里 面可以设置的所有属性都列好了,只是很多都用<!–  –>注释掉了,按需求去掉注释添加属性。这里我们需要设置的是<initialWindow>里 的<systemChrome>、<transparent>和<visible>标签。去掉这三个标签的注释,在 这三个标签里分别输入none,true,true。结果就是这样:

<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

也可以直接添加这三行到<initialWindow>标签里。

好 这时候按ctrl+F11看效果,已经是透明不规则窗体了。

三、拖动

但这窗体不能拖动,又没有关闭跟最小化按钮,现在我们来实现这些功能。

在mxml文件的<mx:Application>标签里插入如下语句:

<mx:scrīpt>
<![CDATA[
private function init():void{
bgImage.addEventListener(MouseEvent.MOUSE_DOWN, onStartMove)
}
//窗口最小化、关闭、拖动函数
public function minimizeWindow():void{
this.stage.nativeWindow.minimize();
}

public function closeWindow():void{
this.stage.nativeWindow.close();
}
public function onStartMove(event:MouseEvent):void{
this.stage.nativeWindow.startMove();
}
]]>
</mx:scrīpt>

再插入

<mx:Button click=”closeWindow();” x=”10″ label=”close” y=”10″  />
<mx:Button click=”minimizeWindow();” x=”100″ y=”10″ label=”min” />

<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>后面,插入到前面的话按钮会没有响应,因为图片的鼠标事件优先了。。

再为<mx:Application>标签添加一个属性:applicationComplete=”init();” 结果是这样:<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init();”>

代码很简单。程序运行完成的时候执行init()函数,函数里为bgImage就是刚才添加的png图片添加鼠标事件侦听,鼠标按下就开始移动。

下面两个按钮,不用多说~~基本功能就这样实现啦~~~

:完整example.mxml和example-app.xml代码:

example.mxml:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init();” width=”440″ height=”310″>
<mx:Style>
Application
{
background-color:””;
background-image:””;

}
</mx:Style>
<mx:scrīpt>
<![CDATA[
private function init():void{
bgImage.addEventListener(MouseEvent.MOUSE_DOWN, onStartMove)
}
//窗口最小化、关闭、拖动函数
public function minimizeWindow():void{
this.stage.nativeWindow.minimize();
}

public function closeWindow():void{
this.stage.nativeWindow.close();
}
public function onStartMove(event:MouseEvent):void{
this.stage.nativeWindow.startMove();
}
]]>
</mx:scrīpt>
<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>
<mx:Button click=”closeWindow();” x=”10″ label=”close” y=”10″  />
<mx:Button click=”minimizeWindow();” x=”100″ y=”10″ label=”min” />
</mx:Application>

example-app.xml:

<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/1.0″>
<id>example</id>
<filename>example</filename>
<name>example</name>
<version>v1</version>
<initialWindow>
<content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

</initialWindow>
</application>

[AIR][开源]帐本程序

2008-2-12 评论(8) 分类:作品 Tags:

account

下载: account.air (595 KB) 使用本程序需要下载安装air runtime

源程序: account-source.zip (1.35M)

一直想为自己量身定做一个帐本,一直没有找到合适的做法,FLASH不支持写入文件,需要配合ASP等语言,用起来也麻烦,C++我也不熟,虽然它 能写入文件,但不知道用什么方式储存数据好。ADOBE AIR在上大学之前已经接触过了,不过仅是接触而已,最近偶然发现AIR可以写入文件,就动起了用它做个帐本软件的念头。做这个最大的困难就是国内实在没 什么资料,英文资料也挺少,遇到什么问题都搜不到答案,只能靠自己摸索,一直在啃英文帮助,头几天摸索file类就摸索了很久,摸索到几乎想放弃,不过后 来越写越顺,写得很爽。

这次跟以前做东西不同的是,我在还没写程序之前就把程序的流程写好了,考虑得还算挺周到,写程序的时候也增删了不少,这次注意了很多细节方面的 问题,所以,写了500多行代码~~~是我除了飞机游戏外写得最多的了。注释也写得挺多,应该比较容易看懂。有兴趣的可以下载源代码看看~~外观我模仿了 官方示例程序kuler,自我感觉外观做得挺不错~~有空我会写上用FLEX做AIR时的一些常见问题。