兼容的XMLHttpRequest对象实现了,接下来写一个简单的onblur事件,即当输入值后,表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下:
02 |
document.forms[ 'iform' ].nickname.onblur = function (){ |
04 |
var val=document.forms[ 'iform' ].nickname.value; |
06 |
if (!/^[a-zA-Z0-9_]{3,16}$/.test(val)){ |
07 |
alert( '请输入3~16位由英文、数字、下划线组成的昵称!' ); |
13 |
XHR.open( 'GET' , '/demo/ajax/iajax20110306_query.php?entryname=' +val, true ); |
15 |
XHR.onreadystatechange=returnFun; |
解释一下AJAX部分的代码。iBase.IXHR(),初始化XHR,以保证XMLHttpRequest对象的兼容。接下来,通过以GET的方式,异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET,GET是从服务器上请求数据,GET方法就是把数据参数队列加到一个URL上,值和表单是一一对应的,比如本文的entryname=val。这个概念可能属于后台程序的范畴,不在此细说。然后,我们需要用到一个onreadystatechange事件属性,这个属性是用来存储函数(或函数名),每当readyState属性改变时,就会调用该函数,即本文中的returnFun;最后,我们还要发送一个数据到服务器,send属性一般用于数据交换,而本文只是一个简单的验证判断,所以,send一个空值。 基本的判断与数据发送完成了,接下来还剩一个关键的信息获取,即returnFun。先看代码:
03 |
if (XHR.readyState==1){ |
04 |
iBase.Id( 'tips' ).innerHTML= 'Loding...' ; |
05 |
} else if (XHR.readyState==4){ |
10 |
iBase.Id( 'tips' ).innerHTML=XHR.responseText; |
此函数是用来通过判断readyState及status状态也及时反馈给用户相应的提示信息。readyState有五种状态: 0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法; 1 (载入):已经调用open() 方法,但尚未发送请求; 2 (载入完成): 请求已经发送完成; 3 (交互):可以接收到部分响应数据; 4 (完成):已经接收到了全部数据,并且连接已经关闭。 如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种: 100——客户必须继续发出请求 101——客户要求服务器根据请求转换HTTP协议版本 200——成功 201——提示知道新文件的URL 300——请求的资源可在多处得到 301——删除请求数据 404——没有发现文件、查询或URl 500——服务器产生内部错误 至此,一个简单的AJAX验证实例就完成了:关于AJAX的基础介绍与实例就这么多,关键还是在于自己的实践与思考。其实这其中涉及知识并不复杂,若有后端程序的基础,学起AJAX会更加容易,关键是要想明白其中的逻辑关系。有兴趣的话,可以自己写一个不刷新页面加载新内容的AJAX,或者研究一下jQuery中关于AJAX的封装。
(责任编辑:admin) |