《Uchome2.0 AJAX框架分析》系列教程有两个目的,
一是为了帮助那些进行Uchome二次开发的朋友们更好的理解Uchome的源代码
二是为了从Uchome2.0中剥离出一套AJAX框架,方便大家在日后的WEB程序开发中能够轻松的使用来自康盛的框架开发出更加标准的更加符合用户体验的产品出来
好了废话少说,下面来看看Uchome2.0中的注册部分
先打开template\default\do_register.htm 模板文件
我们来分析验证码、用户名、用户密码这三个部分
验证码
来看看上面这段代码,其中<script>seccode();</script>用来产生验证码得到如下效果。
var img = ‘do.php?ac=seccode&rand=’+Math.random(); 这个是得到验证码的URL地址,通过writeln将这个图片写到HTML代码中,于是我们就看到了验证码了。
光得到验证码没有用,万一用户看不清楚想要换一张怎么办呢?
通过这个 我们就可以更换图片啦,<a href="javascript:updateseccode()">的作用就是当用户点击该链接的时候就执行jacascript后面的JS,也就是执行updateseccode()函数。
var img = ‘do.php?ac=seccode&rand=’+Math.random(); 跟上面一样是得到验证码的URL地址,因为在生成验证码的时候已经生成了一个’<img id="img_seccode" src="’+img+’"的标签
所以这里判断如果img_seccode标签存在的话,则让他的src属性等于新的验证码的URL地址,这样我们就刷新了验证码
接下来就是用户输入验证码了
当用户输入验证码 并且焦点离开该输入框之后触发onBlur="checkSeccode()" 执行checkSeccode()函数,在template\default\do_register.htm 模板文件中包含该函数
首先取得输入框的值,然后通过ajaxresponse()函数去异步请求op=checkseccode&seccode=seccodeVerify的数据,下面来分析一下ajaxresponse响应函数,该函数在template\default\do_register.htm 模板文件中
上面ajaxresponse(‘checkseccode’, ‘op=checkseccode&seccode=seccodeVerify);传递给函数两个参数checkseccode—为DOM对象名 op=checkseccode&seccode=seccodeVerify为传递的数据,所以这里应该是
x.get 这个函数存在于Uchome最重要的一个AJAX对象中,这个稍候再介绍,我先告诉大家这个方法的作用于参数,他的作用是向第一个参数的地址处发送请求。他的两个参数,第一个为请求的URL地址,第二个参数为服务端响应之后,执行的函数。我们来看看这个函数
这个函数没有函数名,只有一个参数S,这个S其实是获取到服务器发送过来的数据的,所以这里判断如果返回succeed则 在checksseccode处显示正确的图片,否则调用warning函数显示错误信息
好了,验证码部分的ajax代码就到这里分析完毕了,是不是还云里雾里?要看懂这些分析的话,首先需要你有JS基础以及AJAX 基础,否则就….

[...] 接下来的事情就跟上一篇文章里的一样了,具体看这里Uchome2.0 AJAX框架分析(一)注册模块——验证码功能分析 [...]