Ajax实现客户端验证(连接数据库检查用户名&ID是否唯一)

继续我的文章，这一篇本应该周末贴的。结果忙了点 ( 忙着玩了 ) ，也不是什么旨在提高 Blog 流量，要流量我找一插件随便刷个十几二十分钟不下一千。写来一则为了巩固一些知识，熟能生巧而已。二则为了一些新手们提供点建议 ( 文章只针对 Rookies 如果你丫功力深厚还望多多指教 )

   老规矩，看例子说话 ( 记得小时候总有什么看图说话，看图写作文等等类似考题，还美其名曰：发散思维 ) 。

   Ajax 不是个什么新东西，只不过将一些原有的东西加以整合焕发第二春而已。其中比较重要或者说用的比较多还是 7 种知识中的 3 个知识点： XMLHttpRequest,readyState, 以及 JavaScript( 个人观点 ) 。

  最大的用途一般现在就是用在客户端填写的同时进行同步验证，所谓的局部刷新。不在需要重复提交，以及防止表格数据因刷新而丢失。对用户来说无非是一大利好。当然是客户端编程始终保持着它的老习惯：不安全，以及浏览器的兼容性问题。安全性我们不做多打考虑毕竟在好的系统都会被攻破 ( 有钱买好的硬件防火墙吧 ) ，兼容性上 Ajax 分别对主流浏览器做了兼容 ( 像 Maxthon 啊什么其他浏览器他们都是 IE 内核所以不算浏览器的一个种类。一般就 Microsoft IE 和 FireFox 其实一般做 Soft 的两个都会装滴。 )

  简单的例子，简单言语，让你简单的理解原理， Here we go…

  先简单介绍下程序：一个输入框，输入 username 当鼠标光标离开输入框时实现用户名唯一性检查。将输入的数据与数据库中的 user 表进行比较，对已经存在的用户名返回提示“用户名已存在”，对不存在重复的用户名提示“用户名可以使用” . 完整的演示程序 ( 如果你还不怎么理解 Ajax ，那你就照着程序写，可以运行后得出结果然后你在慢慢去研究，编程么，从模仿开始 …) ：

<!----><!----><!---->   程序结构：两个页面 index.jsp checkUser.jsp 一个连接数据库类 Test.java( 其中包括 checkUser() 唯一性判断 ) ：看具体源码吧

 

   Index.jsp( 具体源码看附件 ) ：类似于编写 JavaScript 脚本语言，首先得获得 XMLHttpReuquest ，此时为了兼容不同浏览器需要分别获得

if (window.XMLHttpRequest)

          {

              xmlhttp_request = new XMLHttpRequest();// 响应 FireFox

          }

          else if (window.ActiveXObject)

          {

              xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

          }// 响应 IE

当用户鼠标光标离开输入框时，触发函数 getBackInfo().

<!---->1.  <!---->从 HTML 页面得到你需要的数据，可以采有 document.getElementById("") 方法。可以先判断是否为空

//2. 建立需要的 URL ，该 URL 就和在 FORM 里面的 method 为 get 时并采用 submit 提交在地址栏里面到的一样

//3. 打开与服务器的连接，这里面有三个必要的参数，虽然文档规定只有两个，但是我个人觉得最好用三个，

//  第一个可以是 GET,POST 或者是 POST ，但常用的就是前面的两个，并且最好都用大写，因为有些浏览器如 FireFox 可能会报错，

//  第二个就是打报的 URL ，这肯定你是必须的。

//  第三个就是下面的看到的 true ，这里可以是 false 。 true 表示同步处理，你提交后可以做其它的事情，

//  这就是 AJAX 里面的 A ，即 asynchronous; 如是 false ，那就得等到服务器的返回才能够做其它的事情。

//4. 等到服务器完成，并且确定返回执行了正确执行的提示，我们就可以做下面我们想做的事情。这些后面的事情就必须通过

//  Javascript 去完成了，因为 XMLHttpRequest 的唯一用途就是发送请求及接收服务器的响应结果。

//5. 上面都完成了后，就可以采用 send() 方法向服务器发送你需要发送的信息了，它的参数可以是任何类型，发送的数据格式必须为

         

在 doCentent() 函数中是对返回状态做判断，然后再显示信息（用户名是否被占用，逻辑判断放在了 Test 函数中）这里对 xmlhttp_request.readyState 简单说明一下：

//1. 一定要确定 readystate==4 的完成状态才做下面的事，否则会在建立连接即 readystate==1 的时候就开始，

    //  然后会在 readystate==2 ， readystate==3 ， readystate==4 的时候都会执行，不信你可以 alert("") 一个

    //  提示信息试试。

    //2. 服务器通知完成了，并且还要保证是正确完成的，得到的是我们需要的结果才能够继续，这里常用响应码有：

    //  200: 成功执行

    //  401: 未授权

    //  403: 禁止

    //  404: 没有找到文件

checkUser.jsp:

   这是用来显示判断信息的，在 index.jsp 中通过添加：< td >< dd id = "disCheckResult" ></ dd >/ td >

然后通过 :         document.getElementById( "disCheckResult" ).innerHTML=xmlhttp_request.responseText 得到。关于 ineerHTML 不多提了可以自行了解。

  你可以通过添加 alert(xmlhttp_request.responseText) 实验一下 responseText 得到的是一张 HTML 页面。在整个 checkUser.jsp 中 我只是通过引用 Test 实例来进行验证，逻辑全部写在了 Test 类中。

Test.java ：

  这是数据库连接的简单操作，然后通过 select 语句判断是否存在页面输入用户名，存在返回 true 否则为 true 。简单 ….

  整个判断到此全部结束，需要的 Rookies 可以下载了附件 运行了看看。可以运行，数据库为 oracle 9i( 需加载驱动当然你可以换成 mysql 数据表简单 两个字段而已 自己看着该下 Test 里的数据源和表名吧 )

  为了大家共同的进步。。。。。。。。更多文章请访问http://jummy.iteye.com/