建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

Ajax基础教程:Ajax入门讲解(含实例)(2)

时间:2011-03-17 08:14来源: 作者:Mr.Think 点击:
兼容的XMLHttpRequest对象实现了,接下来写一个简单的onblur事件,即当输入值后,表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下: 01 //触发焦点时执行 02 document.forms[ 'iform' ].nickname.onblur

兼容的XMLHttpRequest对象实现了,接下来写一个简单的onblur事件,即当输入值后,表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下:

01 //触发焦点时执行
02 document.forms['iform'].nickname.onblur = function(){
03     //输入的值
04     var val=document.forms['iform'].nickname.value;
05     //对用户名的判断
06     if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
07         alert('请输入3~16位由英文、数字、下划线组成的昵称!');
08         return false;
09     }
10     //初始化一下XHR
11     iBase.IXHR();
12     //原来需要新打开的判断页面用GET使用异步
13     XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
14     //与readyState属性有关,当readyState改变时它才会触发
15     XHR.onreadystatechange=returnFun;
16     //异步处理完成后发送数据出去(比如某些需要在焦点事件后再执行的)
17     XHR.send(null);
18 }

解释一下AJAX部分的代码。iBase.IXHR(),初始化XHR,以保证XMLHttpRequest对象的兼容。接下来,通过以GET的方式,异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET,GET是从服务器上请求数据,GET方法就是把数据参数队列加到一个URL上,值和表单是一一对应的,比如本文的entryname=val。这个概念可能属于后台程序的范畴,不在此细说。然后,我们需要用到一个onreadystatechange事件属性,这个属性是用来存储函数(或函数名),每当readyState属性改变时,就会调用该函数,即本文中的returnFun;最后,我们还要发送一个数据到服务器,send属性一般用于数据交换,而本文只是一个简单的验证判断,所以,send一个空值。
基本的判断与数据发送完成了,接下来还剩一个关键的信息获取,即returnFun。先看代码:

01 function returnFun(){
02     //当send()已调用,正在发送请求时,显示Loading...
03     if(XHR.readyState==1){
04         iBase.Id('tips').innerHTML='Loding...';
05     }else if(XHR.readyState==4){
06         //当响应内容解析完成,可以调用时
07         //更缜密,再判断一下status是否成功
08         if(XHR.status==200){
09             //responseText为返回的文本
10             iBase.Id('tips').innerHTML=XHR.responseText;
11         }
12         //使用完请销毁,避免内存泄露
13         XHR=null;
14     }
15 }

此函数是用来通过判断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)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片