国外Javascript及Ajax实例资源网站
向大家推荐10个相当棒的Ajax和Javascript国外资源网站或博客,它们提供了相当多的高质量Ajax、Javascript实例及教程,喜欢Ajax和Javascript的朋友绝对不能错过。
1.Ajax Rain

AjaxRain有很多完美整合AJAX, CSS, DHTML 或 Javascript的实例,有一些Demo的确值得你去看一看,即使你不是网页设计(开发)师。 详细内容
利用Ajax实现长连接(模拟推送)
很多程序都可以通过socket来实现长连接,实现消息的即时推送。但由于http请求一般都是短连接,一次请求结束,就会断开与服务器的连接,服务器不能主动推送数据到客户端,而只能由客户端发起请求,但有些时候,需要在web上实现即时的消息传输,比如即时聊天、股票动态信息等。
在Ajax技术被发掘以前,在网页上实现无刷新的即时聊天,似乎是很困难的事情,但由于Ajax技术的兴起,人们可以进一步来挖掘它的潜力了,象gmail、google gtalk的网页版,都是Ajax长连接的重要应用,目前很多网站可能都已经在使用长连接技术了,比如SNS网站的即时聊天。
1.Ajax短连接方式实现网页聊天
自己画了一个模型图:
常规的短连接模式下,都是通过不间断刷新请求实现的,比如每间隔3秒发送一次Ajax请求,3秒更新一下数据,然后就这样不间断刷新下去,直到用户关闭网页。这样所带来的弊端就是,如果用户很长时间都没有操作,每次刷新都不会返回新数据,这样就造成了资源的浪费,很多请求都是没必要的;另外一个问题,就是用户的输入,跟数据的请求不是同步的,会造成一定的信息延迟。
2.Ajax长连接方式实现网页聊天
模型图:
Ajax长连接模式,它的刷新是根据数据来执行的,如果有新数据返回,接收并解析显示数据,然后发起新的Ajax请求,如果一段时间内,用户没有操作,则连接处于睡眠状态,一直等待有用户输入或者请求超时,然后发起下个Ajax请求。这样做的好处是,每个消息都会即时推送到客户端,延迟极少;另外每次请求都是有意义的,与短连接对比,效率要高很多。但对于一个用户量很多,并且操作非常频繁的网站,长连接模式也会出现过于频繁的刷新问题。目前IE对于HTTP连接数是有限制的,每个网页只能同时进行两个长连接,第三个长连接会被阻塞。
利用php在后台sleep,自己做了个模拟的程序,查看效果
看了一下别人写的Ajax长连接聊天的案例,以php为例,基本上是在后台进行不间断的检测,如果有新数据就推送,如果没有新数据,就一直阻塞,直到30秒超时,然后客户端重新发起下一个请求。后台判断里重要的一行代码:usleep(10000); 就是暂停10毫秒,缓解一下CPU压力,个人感觉如果暂停100毫秒,时间延迟也是很难感觉到的。这种方法基本就是把前端的循环,搬到了后台,中间减少了网络传输的环节,如果是一个Ajax的即时聊天系统,要保存用户的聊天记录,那就需要跟数据库相结合,每秒10次以上的数据查询,这个与短连接比,必定加大了数据库的压力,具体怎么优化,这个应该是交给服务器端人员来处理了。
如果想要了解更多的内容请Google一下comet,或者看看这里(一个很不错的框架,Ajax Push Engine),这个网站有很多demo,效果很帅。
PHP+Ajax在线聊天
最近两天搞了这个小玩意,其实嘛,也没太多新意,原来这种程序见多了,上网看了一圈,搜出来很多,不过大部分都是相互转载来转载去的。
去年因为Omegle的走红,还有gmail的web聊天功能,让网页聊天似乎活力重现,激情四射,于是乎QQ也推出了在线聊天,SNS社区也相继出现了网页聊天功能,国内还有不少人模仿Omegle网站,比如“路过的”、“陌路人”等网站,因为Ajax的兴盛,Web前端似乎进入了一个新的春天。
以前想写个聊天的东西,一直为mysql数据库犯愁,目前手头上没有空闲的数据库可用,网上找了一个国外的,速度有点慢,而且不能外部访问数据库,只能做个json跨域了。由于是免费的,不是很稳定,如果你发现自己掉线了,刷新一下网页就可以了,目前还是走的短连接路线,关闭网页10秒后自动下线。查看效果
没考虑设计,只做了功能,界面凑合用:-)
为了保险,如果上面一个不能用了,或者很慢,可以试一下下面这个,由于这个数据库有点小问题,对于内存表支持很差,所以不方便统计在线人数,就去掉了在线人数的功能。查看效果
另外使用其它在线聊天,如果聊天窗口不是当前窗口,有新消息的时候,会在标题栏进行提示,主要用到window.onfocus和window.onblur,经测试IE对这两个事件的判断与其它浏览器有较大差别,如果要在IE下使用,需要进一步处理。示例效果:
HTML代码[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
在压缩的过程中发现了一点小陷阱,代码如下:
程序代码window.onblur=this.unactive;
如果是这样写呢?
程序代码window.onfocus=function(){chat.isCurrentActive=1;} //其实这里也少了个分号,但是你看不出来的,如果一进行js压缩,就会出错
window.onblur=function(){chat.isCurrentActive=0;}
—————–2010-06-14 update—————–
1. 增加了一点声音的功能,如果有新消息,会有声音提示。
2. 非IE浏览器下,如果有新消息,标题闪动。

