AJAX实现对输入用户名的验证
AJAX：
Asynchronous JavaScript And XML（异步的JavaScript和XML）。
需求:
同步编程出现的问题：比如在页面输入用户名跟密码的时候，如果密码出现错误，页面就会重新加载，然后重新输入账号密码，很影响用户体验!
而AJAX是用来解决以上问题的。用户鼠标离开用户名的输入框，页面给出提示！
实现：
AJAX编程四步：
1、创建AJAX核心对象XMLHttpRequest (浏览器内置的，可以直接使用) 2、注册回调函数（重点） 3、开启浏览器和服务器之间的通道 4、发送AJAX请求
XMLHttpRequest()对象：
XMLHttpRequest 是 AJAX 的基础。 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 创建 XMLHttpRequest 对象的语法： variable=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： variable=new ActiveXObject("Microsoft.XMLHTTP"); 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ： var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {//表示不支持IE5，IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
index.html注册页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> function checkUsername(username) { //AJAX发送请求全靠浏览器内置的这个对象: XMLHttpRequest对象 。 //使用这个XMLHttpRequest对象可以在浏览器当中单独启动一个新的浏览器线程，通过浏览器线程发送该请求。 //达到异步效果。 //1、创建AJAX核心对象XMLHttpRequest (浏览器内置的，可以直接使用) var xhr = new XMLHttpRequest(); //2、注册回调函数 /** * onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数 * readyState： 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 •0: 请求未初始化 •1: 服务器连接已建立 •2: 请求已接收 •3: 请求处理中 •4: 请求已完成，且响应已就绪 */ xhr.onreadystatechange = function () {//xhr的readyState发生改变的时候,回调一次 if (xhr.readyState == 4) { if (xhr.status == 200) { var nameSpan = document.getElementById("nameSpan"); nameSpan.innerHTML = xhr.responseText; } else { alert(xhr.status+"错误"); } } } //3、开启浏览器和服务器之间的通道 /** * open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。 •method：请求的类型；GET 或 POST •url：文件在服务器上的位置,相当于超链接<a href=""></a> •async：true（异步）或 false（同步） */ xhr.open("GET", "some?username="+username, true); //4、发送AJAX请求 xhr.send(); } </script> 用户名<input type="text" name="username" onblur="checkUsername(this.value)"/><span id="nameSpan" style="font-size: 12px"></span><br> 密码<input type="password" name="password"><br> </body> </html>
web.xml配置文件：
<servlet> <servlet-name>someServlet</servlet-name> <servlet-class>com.zhixi.zhang.SomeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>someServlet</servlet-name> <url-pattern>/some</url-pattern> </servlet-mapping>
SomeServlet.java进行判断：
package com.zhixi.zhang; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class SomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String username = request.getParameter("username"); if ("admin".equals(username)){ response.getWriter().print("<font color='red'> 用户名已被注册</font>"); }else { response.getWriter().print("<font color='green'>用户名未被注册</font>"); } } }
以上就完成了简单的用户进行注册的简单检查功能！
