jQuery入门:用jQuery实现AJAX式的注册UI

听说AJAX已经很久了,一直想学而未遂.

前几天终于痛下决心开始学习.先是在IBM Developer works上看了些文档,了解了AJAX的工作原理及相关概念.动手写了些script来操作XMLHttpRequest,对于底层的工作流程有了个浅显的了解.

现在对AJAX的理解是用Javascript操作XMLHttpRequest和DOM对像在浏览器(如Firefox/IE等)上实现巨棒用户体验的一种方法.

昨天了解到一些支持AJAX的常用javasript类库,如prototype,jQuery(最广泛使用的两个).钟情于jQuery的独立js文件方式,与html文件分离,当更新HTML界面时就不会再遇到什么大麻烦了.

最让我惊喜的是在js文件中可以像MFC一样针对事件编写响应函数,像WINDOWS下的消息机制.这对我这种惯用MFC的老菜鸟来说是件非常惬意的事.

作为入门学习,我参考了digg的注册页面写了例程,具体效果可以到 http://www.liuzhongping.com/ajax-register/register.html 试试.

在我的例程里只加了四个控件:用户名,邮件,密码和重复密码,演示了如何实现:

对当前输入框的友情提示,在输入框下方提示该框的约束条件,当离开该框时即不再显示;
用户名输入的即刻检测,在输入完用户名跳入下一个输入框后即对用户名是否被人占用进行检测;
不同输入框值的比较及反馈,当密码和重复密码输入不一致时予以提示;

下面列出各个文件的代码及说明:

Choose a Username:

Email Address:

Choose Password:

Re-type Password:

先是引用了两个js文件,一个是jQuery.js类库.可以从http://jQuery.com下载到最新版本.另外一个是我自己编写的js文件,内容在下面会列出;接着用js定义了一个数组,主要是针对各个控件定义其提示语句.

最后就是由input和div语句所组成的控件区了.input控件的class都为 register-input是为了统一响应的处理方便.div的id是input的id加上前缀组成.也是为了程序上的方便,您在阅读下面的代码时会发现.
此HTML中只做了AJAX演示.不有考虑提交后的处理工作.所以HTML中不包含FORM.

$(document).ready(function(){
$(”input.register-input”).click(function(){
var id = $(this).attr(’id’);
$(’#note-’+id).text(info[id]);
$(’#note-’ + $(this).attr(’id’)).css(’visibility’, ‘visible’);
});
$(’input.register-input’).blur(function() {
$(’#note-’ + $(this).attr(’id’)).css(’visibility’, ‘hidden’);
});

$(’#verify’).blur(function() {
if ($(this).val() != $(’#password’).val())
{
$(’#note-verify’).css(’visibility’, ‘visible’);
$(’#note-verify’).text(”请两次密码输入一致!”);
}
else
{
$(’#note-’ + $(this).attr(’id’)).css(’visibility’, ‘hidden’);
}
});
$(’#username’).blur(function(){
if($(’#username’).val().length > 0)
$.post(’username_check.php’,{username:$(’#username’).val()},function(data){
if(data == ‘error’)
{
$(’#note-username’).text(”您所填写的用户名已经被人使用了!”);
$(’#note-username’).css(’visibility’, ‘visible’);
}
else
{
$(’#note-username’).text(”恭喜! 您所填写的用户名仍然可用!”);
$(’#note-username’).css(’visibility’, ‘visible’);
}
});

});
});

$(document).ready()是整个js的开始,有点C语言里main的意思.是当HTML文件完成下载后,DOM(Document Object Model,文档对象模型)建立完成后调用的函数.

上面说到过jQuery基于事件建立响应函数的方式相当不错,整体的组成应该是:

$(控件描述限定字符) .事件(function(参数){实现代码});

如：$(’#username’).blur(function(){…});
所谓控件描述限定字符是通过控件的类别(如input,div等)和class值(前面加.表示)与id值(前面加#表示)来确定事件的主体.

事件类型比较多,具体可以参考http://jQuery.com和http://visualjquery.com/ 中的相应文档.

当然你也可以直接调用写好的函数,组成就变成了:

$(控件描述限定字符) .事件(函数名(参数));

JS中的代码相当简单,相信你一看就了解.在此我提一下代码中实现AJAX的异步传输的地方:

$.post(’username_check.php’,{username:$(’#username’).val()},function(data){…. });

$.post是以POST的方法实现异步传输方式进行数据传送与接收的函数,是将username:xxxxx这样JSON(JavaScript Object Notation)格式的数据值传给 username_check.php.得到的结果由function(data){…}内的代码来处理.我在username_check.php中只做了最简单的比较.只要不是”LZP”(本人姓名之缩写)即正常通过.在现实使用中肯定是要对收到的用户名在数据库中查询比对.在此为了简单不表.其内容如下:
username_check.php :
if($_POST["username"] == “LZP”)
{
echo “error”;
}
else
{
echo “ok”;
}
?>

这样就实现了一个基本的ajax form表.

这是我第一篇有关AJAX学习文档,不到位和欠水平之处请拍砖指出.多谢!

对于WORD PRESS的插件COOL CODE.还有个小问题,各段代码前后加上< coolcode language=”xxx” >和< /coolcode >显示正常.但再次编辑无法保存该段信息,望各位(特别是老僧)给予指示,批示以及明示. 多谢!

测试网址:

http://www.liuzhongping.com/ajax-register/register.html

Written by 待业书生 on January 1st, 2008 with 5 comments.
Read more articles on 技术相关.

This is the content of the ad2.php file. Leave it blank or include your ad.

我读台北人

—-记述阴霾重重的日子

读白先勇的第一篇文章是《游园惊梦》,那时我处于学生时代.文中讲述的是一些前昆曲名角们去台湾后的惨淡生活,时刻怀念自己在大陆时的风光生活.身处农村中学的得不到更多的信息,看他与戏子名伶如此熟悉,以为他是像柳永一样是个浪荡文人.后来才知道他大力推进昆曲,主持的青春版《牡丹亭》在全国大受欢迎.再后来知道他的显赫身世(白崇禧之子)以及文学上的成就.

知道白先勇在文学上的成就后就想看看他的作品,在网上买书时就顺便买了他的短篇小说集《台北人》,共收录了十四篇.前面是欧阳子的《白先勇的小说世界》与”文化大师”余秋雨的《世纪性的文化乡愁》.

据说欧阳子是白先勇的同学,对于白先勇小说的评述相当精准到位.白先勇也说他自己在写时没有想到这么多,只是对自己过往所看到的人与事的自然记述,这也是难能可贵的地方.如果一开始就想着要表达什么的话就会有刻意的痕迹.她的文章从几个角度对十几篇文章进行了剖析,相当有见地.如:今昔对比,灵肉之争,生死之谜.十四篇文章,也是分析了49年后民国十四种人物,社会的各行各业.

我的建议还是在看完全书后再看此文,因为不看完十四篇短篇的话就对该文中所评述的情节与人物一无所知,理解也不深刻.看完全文再看欧阳子的分析后让你更好体会白先勇的小说.我建议编辑应该将该文放置于书尾.

至于余秋雨的文章只能说是出版社看中其的名气,为了更好地销量.看到他写的标题一点不意外.已经习惯扯着虎皮做大旗的余老师喜欢将什么都盖上文化的戳,怕年代不够久远没有历史感还加上一个”世纪性的”.他的文章有空的话看看倒也无妨,反正闲着也是闲着.这些都是我个人的看法,希望不要影响到你的看法.

《台北人》的前几页是作者的两段文字和作者一些照片,照片比较有意义.两段文字分别是:

纪念先父母以及他们那个忧患重重的时代

朱雀桥边野草花乌衣巷口夕阳斜旧时王谢堂前燕飞入寻常百姓家
刘禹锡乌衣巷

《乌衣巷》对照于撤退至台湾的那些民国大佬们真是贴切.前段时间看了凤凰卫视制作的记录片《民国人物在台湾》,讲述了许多党国大佬在49年后撤退到台湾的惨淡生活,如胡宗南,白崇禧,陈立夫等.因为胡宗南坚持到最后才从西昌撤退至台湾,居然有人要让胡宗南出来承担丢掉大陆的责任.有”蒋家天下陈家党”之称的陈立夫与陈诚关系相当紧张,主要是副总统陈诚要排挤掉陈立夫以便接班.陈诚对蒋介石开出了”限陈立夫24小时离境”的通谍,被蒋牺牲掉的陈立夫拖家带口被放逐到美国以养鸡为生.失去桂系军队的白崇禧已经没有了政治上的资本,后来居然被蒋的特务暗杀未遂,晚年过得相当不顺心.同样作为桂系的李宗仁则出走美国后转回大陆,在文革期间病死.

最后再列出十四篇短篇的题目:

永远的尹雪艳
一把青
岁除
金大班的最后一夜
那片血一般红的杜鹃花
思旧赋
梁父吟
孤恋花
花桥荣记
秋思
满天里亮晶晶的星星
游园惊梦
冬夜
国葬

至于文中各篇小说的内容我就不透露了,自己去看.

陆陆续续讲了许多,都是有关这本书的八封,算你读书时的佐料吧.
最后用《游园惊梦》中引用的一段戏词来结束此文:

原来姹紫嫣红开遍
似这般都付与断井颓垣
良辰美景奈何天
便赏心乐事谁家院——

网上购书链接:

购买

Written by 待业书生 on November 18th, 2007 with 11 comments.
Read more articles on 读书心得.

This is the content of the ad3.php file. Leave it blank or include your ad.

与装B分子斗争到底

请原谅我用了一个不太文明的字作为标题。

先解释一下“装B”的具体含义吧，否则都不知道斗争的对象。时下“装B分子”成为许多年轻人的口头禅，用来形容那些没事总爱装的假模假式的人。有人认为“装B”和装傻、装愣一样动宾结构，而我认为装字是主义词，B字是语气助词，和“啊”、“呀”一样，主要指那些喜欢装出某种姿态炫耀于人的行为。我总结出时下几种装B行为，博君一笑。

装品味

在许多商业杂志和博客上总会看到许多人标榜时尚和方式，如外国情人、吃西餐、喝红酒、品咖啡、玩高尔夫、讲洋文……。最常见的句式如：早上一醒来就泡上一杯卡布奇诺(作者注：此人未必知道这四个字啥意思，与别的咖啡有什么不同)…，只喝XX年以上的法国产的红酒(作者注：很可能是MADE IN CHINA)…，我的欧洲王子(作者注：其实是个普通的欧洲小国驻外的普通职员)…，我天天来往于town house和downtown之间(作者注：其实是骑自行车来回，尽管是二八的。)…。

每个人都有不同的生活态度和表达方式，爱怎么样别人管不着，只有不违反法律和社会公德。但总是拿自己的那点屁事招摇过市，特别是通过公共传媒来恶心大家就有些过了，最不能忍受的就是拿自己的标准去衡量和要求别人就恶心了。好像不像他/她那样就是不会生活一样。

现在某些占据着公共传媒来宣传其品味生活，去宣传自己炒了N多遍的陈年剩饭，比如她的欧洲王子、他的异国情人，像祥林嫂一样喋喋不休地重复。

还有的就是许多商品的广告也在承担教人过品味生活的，今天在电视上看到“荣X”的汽车品牌，大谈品味和绅士，说的好像一个小偷开上该品牌的车后也就成绅士了。昨天还听到该品牌汽车在本市交通台做的软性广告，从该品牌的英国血统到车主的绅士风度，话风一转就开始讲汽车事故逃生技巧，还偶尔说说“绅士”。差点把我笑叉气了，如果逃生时还坚持“绅士”的话下场就很惨了。

现在的房产商也在扮演“品味生活倡导者”的角色，宣传上总以着各种没有具体含义的外来词勾引着希望早日过着优雅生活的房奴们，从名称到建筑风格，再到样板房，处处都想满足了购房者翻身过好品味生活的心理需求。比如：“我是胡里奥，我是塞万提斯，不在马德里，照样品味西班牙，就在XX湾”。好像买了那个房子以后就能过上西班牙式的品味生活。

装文化

“文化”一词慢慢受到重视，说明有钱了同胞们开始重视精神生活了，但这么好的事经常被弄的变质了。“文化”一词有被滥用的现象，喜欢在任何东西后面缀上“文化”就好像上了档次一样，如什么“厕所文化”、“犯罪文化”。就如同时下无知记者们喜欢在一些新闻事件后面加上一个“门”以示自己与美国文化(先进文化的代表？嘿嘿)贴得多近。

说到文化我们首先要学习的就是我们所处的中华文化。文化是个很宽泛的概念，中华文化也宽泛到没人可以以师者自居(在我们这个没有大师的时代)。但现在就有一位余姓“老师”出现在各种“文化”场所指点江山，从青歌赛到晚会现场。现在还在某华文电视台主持“XX时分”来传播思想。

其实前些年的他还是一个不错的作家，写的一些散文气势恢宏，总能从古迹或风光联想起五千年中华文化，或骄傲，或感叹，或质问。但看的多了就感觉每篇都是一个模板可以套出来的，或许可以以其名字命名成“XX体”。

对其印象的改变就是在看了他的一篇有关谎言的文章，文中自比苏东坡，将苏东坡在遭遇谎言之后的遭遇和自己的一一列举，有点惺惺相惜的意思。在我心中他是个有些才气的文学中年而已，硬将自己打造成大师级的人有些挑战自己的能力和潜力了。还有就是面对错误的态度，金文明指出他的一些文史错误，许多都是明显有据可考的，但他就是不改。这不光是学术之争，还事关下一代，因为他的作品选入教材了。试想学生从小一直将“致仕”当成求取功名的话真够受的了。

这几年他干的这些事应验了我的担忧，感觉他自己俨然就是一代宗师了，扛着“中华文化”这杆被他糟蹋得破旧不堪的大旗频繁出现在公众传媒上，实际上是个娱乐明星。今天耻笑一下原是放羊娃的参赛歌手没文化，改天再就“仁者乐山，智者乐水”中“乐”字读音说说自己的理解，不知道国家语委是否也听他的。还没同为娱乐明星的刘天王虚心(接受“自怨自艾”的错误)。

子曾经曰过“人之患，在好为人师”，耶稣说过“人类毁灭的那天，到处都是别人的老师”，我不是反对授道解惑，只是反对扯虎皮做大旗的“老师”，在自己还有许多错误没改正的情况下假借“中华文化”到处攫取名利，还装的特别有文化似的，只想骂一句：装B分子。

装嫩

经常在电视上看到三十多岁的一个爷们自称“男孩子”，四十多岁的女士自称“我们女孩子”，一股装嫩的风潮吹遍了神州大地。

此风源于日本，有个日语词汇叫“卡哇伊”(音)，意思是可爱(童真式的)。在日本的表现是着装打扮的儿童化，看到许多十几岁的女孩用着几岁女孩的打扮，对于十几岁的女孩如此倒也正常，但如果三四十岁的还这样打扮就要了人命。这股风气经台湾转到大陆了以后广为流传，身边就时不时地出现这样的情况。有些都过了当孩子爸爸的年龄的还自称“男孩子”，实在是在考验我的承受力。

上面说的三种只是众多装B行为当中的极少部份，我也只是说说。如果屏幕前的您身上存在着其中的某种的话请不要介意，可以继续，或者换一下装的内容和方式，就如“装自己的B，让别人说去吧！”。

如果你也对某种装B行为感觉不爽，请用八荣八耻中的“真为荣，假为耻”来说服该名装B分子，否则就去举报他不和谐，“湿气大”要开了，风声很紧嘀。

Written by 待业书生 on September 8th, 2007 with 4 comments.
Read more articles on 胡思乱想.

苏州观荷好去处

早前听说过苏州城北黄埭地区在建一个叫”荷塘月色”的湿地公园,面积相当可观.在网上查到了具体方位和前往方法.拜台风所赐,这几天苏州的天气不再那么热了,早上还下了一场小雨.正是去看荷的绝好机会.

因为火车站地区修路,前往黄埭地区须经过苏嘉杭高速的地面道路,再转到相城大道方可. 相城大道直行至太阳路路口后左转直行,当你看到沿途有许多荷叶时就表示你已经接近目的地了.会在路边看到一个大幅标志牌,对面即是荷塘月色湿地公园.

我没有留意指路牌,当看到”欢迎来到中国珍珠之乡–渭塘”发现我已经错过了太阳路.只能调头,浪费了不少时间.希望您不要像我一样浪费时间.
啥也别说了,先上些图再说.

门口指示牌:

大门口

大门入口:

普通的白荷花:

牡丹莲:

含苞待放:

小荷才露尖尖角:

万绿从中一点红:

绿荷护红花:

大珠小珠落玉盘:

接天莲叶无穷碧:

映日荷花别样红:

最后上本人猥琐照:

长于农村的我对荷叶太熟悉了,到达后很激动.

让我想起儿时的采藕,采莲蓬,采荷花等.

还很想念荷花粑粑的的美味.

Written by 待业书生 on August 11th, 2007 with 3 comments.
Read more articles on 这城这人.

困惑

我有幸在八十年代的第一年出生，不知算不算传说中的八零后。从小一直在党的红旗下健康拙壮成长，现在看来成长过程中走许多困惑。决定写出来，也许你也有这样的感受。

战争中碉堡没啥用

作为重要的教育手段，电影一直被党用于学生的思想教育。主要是战争片，如《地道战》、《地雷战》、《四渡赤水》、《大决战》等电影，慢慢地形成了对大火力或坚固工事的不屑，认为那些东西都是“纸老虎”。坦克总是敌不过手榴弹捆，碉堡总被爆破筒、炸药包送上天，照明弹总是发现不了隐藏的我军战士，重炮能削平山头，但打不垮我军的士气与斗志，阵地最后还是牢牢地控制在我军的手上……

儿时喜欢“打仗”，双方互相丢或用弹弓射石子。当处于劣势的情况下，“带头大哥”往往会高呼“怕死不是共产党员”，带领我们这些“勇士”向前冲锋，试图占领阵地。但结果大多是后撤，头上满是包，边走还边想：电视上不是这样的呀。

老家旁边的铁路连接着淮南和芜湖北，是日本占领期间修建的，主要是日本为了攫取两淮的煤，通过铁路拉到芜湖北岸后用水运回日本。沿线日本人修建了许多碉堡用于防护铁路线的安全，主要在一些隘口或交通要道。初中时曾与一帮同学骑车顺着铁路线参观过很多，其坚固程度让我吃惊，怎么和电视上很好夺取的碉堡难以对应起来。

后来看了许多美帝拍的战争影视剧，主要是关于二战期间的，如诺曼底登陆。面对德国的滩头工事，盟军付出了大量的牺牲才占领了主动，还是没我军的炸药包和爆破筒好使。

贝雷帽是反动派特务的装备

爱党主义教育电影中我军的服装总是朴素的，而美帝和国民党反动派的服装总是光鲜地很，特别是头戴贝雷帽的美女特务。给我的印象就是穿着越光鲜打起仗来却越不顶用。特别是贝雷帽，和歪戴着的鸭舌帽一样，是流氓阿飞的打扮。不理解西方军队为何会设计出这样的帽子。

但我的苦恼慢慢来了，随着我军的多次换装，已经慢慢赶上五六十年前敌人的军装了。难怪网上有“辛辛苦苦几十年，一夜回到解放前”的说法。

香港只有文汇报和大公报

我家离村里的小学极近，校长每年只订了《人民日报》、《参考消息》两份报纸。我对《参考消息》是情有独钟，因为其中有许多境外的消息，其中许多消息都是引自香港的《文汇报》和《大公报》，包括大陆媒体不会披露的、香港、澳门、台湾等地的消息。长大后接触的信息多了，但只要一提到香港就会引述《文汇报》和《大公报》的消息，搞的我在很长一段时间内以为香港只有《文汇报》和《大公报》这两家报纸。后来才知道只有这两家才入得了党的法眼，好像现在又加了个凤凰卫视，原来我们接收到的已经是经过“善意”的过滤了。

对于台湾也是，我们看到听到的好像李灯灰、陈随便总是处在被台湾人民抛弃的边缘，其台独主张是多么地不得人心。结果在九六年、两千年、零四年都顺利过关，这就让我这样较真的人费解。

这种有选择的引述会给受众片面的消息，也会给读者造成许多苦恼，如青少年时代的我。

老外都是外宾

小学中学时老师都教给我们周总理有关外事接待的指示：有礼、有气、有节，还顺便学会了一个词：外宾。事实上到时的我根本就没有机会见到老外，也一直就以为老外就是外宾，谁让咱中国人热情好客呢？。

在中国处于锁国时期，到中国的外国人很少，而且多是以外交访问的身份进入，以外宾相待也很正常。随着改革开放的进展，越来越多的外国人来到中国，没办法也没能力都以外宾接待，总把别人当宾客接待也会导致对方不太适应。

外宾的另一层意思就是对外国人的特殊礼遇，而对国人却另外一副面孔。从机场出入境通道到政府部门的办事窗口的态度，作为纳税人的我们都在遭受着不公正的待遇，而且这已经不再是半封建半殖民地时期的晚清了。经常在媒体上看到我们的公仆如何尽全力解救处于困难中的“外宾”，如前两年在华山用直升机解救生病中的外宾并大肆宣传，颇有点“量中华之物力，结与国之欢心”的心气。我并不反对这种人道主义行为，但作为为直升机买单的国民何时享受过这种待遇？厚此而薄彼，何意呢？估计是应了“宁予外邦，不予家奴”的心态，敢情我们国民在公仆心目中就是家奴的地位。

群众到底是眼睛雪亮还是不明真相？

毛泽东说过：群众的眼睛是雪亮的。最近媒体上看到许多地方政府官员对于群体性事件都会用“不明真相的群众”一词。

从相信群众的判断力到侮辱群众的判断力，所经历的这几十年却是中国平均受教育水平迅速提高的过程，为何群众的判断力反倒退化了呢？如果这种论调不成立的话，那后面又包含着什么样的用心呢？

据我看来，事实与他们的论调恰恰相反。毛时代的举国疯狂，群众也处于颠狂状态，想做到眼睛雪亮真是不易。不是没有，这部份人的下场很是悲惨，如张志新、林昭这样保持独立见解的勇士。这也是当权者们所不愿看到的，而是希望群众们都“不明真相”才好操弄。

对于现在越来越能独立思考的群众来说，当权者们又不愿意看到了，他们愿意看到的就是一呼百应，否则就成“不明真相”了。面对官商“合作”损害群众利益的时候，真正不明真相的群众才是当权者们所期望的，长着雪亮眼睛的群众太难糊弄了，如拆迁、侵占农田时。

英雄史观还是唯物史观

中学的政治课主要目的就是要学生牢牢树立唯物主义观。对历史要用唯物史观去解读历史，�%

Written by 待业书生 on August 1st, 2007 with 3 comments.
Read more articles on 胡思乱想.