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 试试.
在我的例程里只加了四个控件:用户名,邮件,密码和重复密码,演示了如何实现:
对当前输入框的友情提示,在输入框下方提示该框的约束条件,当离开该框时即不再显示;
用户名输入的即刻检测,在输入完用户名跳入下一个输入框后即对用户名是否被人占用进行检测;
不同输入框值的比较及反馈,当密码和重复密码输入不一致时予以提示;
下面列出各个文件的代码及说明:
register.html :
Choose a Username:
Email Address:
Choose Password:
Re-type Password:
此HTML中只做了AJAX演示.不有考虑提交后的处理工作.所以HTML中不包含FORM.
$(”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 >显示正常.但再次编辑无法保存该段信息,望各位(特别是老僧)给予指示,批示以及明示. 多谢!
测试网址:
Written by 待业书生 on January 1st, 2008 with 5 comments.
Read more articles on 技术相关.