你的位置:首页 > Java教程

[Java教程]使用Ajax验证用户名


Ajax是一项很重要的技术,下面简要举个例子,来解释如何使用Ajax。步骤如下:
使用Ajax验证用户名
使用文本框的onBlur事件

使用Ajax技术实现异步交互
创建通过 向服务器发送请求
创建回调函数,根据响应状态动态更新页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <base href="<%=basePath%>">    <title>异步验证用户名</title>  <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  <meta http-equiv="description" content="This is my page">  <!--  <link rel="stylesheet" type="text/css" href="styles.css">  --> </head>  <body> <table> <tr> <td>用户名:</td>  <td><input type="text" name="username" id="name" onblur="change()"/></td>  <td><span style="display: none;color: red" id="span"></span></td> </tr>  <tr>  <td>密码</td>  <td><input type="password" name="pwd" id="password" /></td>  </tr>    <tr>    <td><input type="button" value="提交" onclick="change()"></td>    </tr>  </table> </body> <script type="text/javascript"> //使用异步刷新技术实现验证用户名  //声明全局对象 var //第一步:创建ck对象 function ck(){   if(window.=new else if(window.ActiveObject){     =new ActiveObject("Microsoft.")   }    }  //第二步:响应鼠标事件 function change(){   //获取用户名   var username=document.getElementById("name");   var password = document.getElementById("password");   if(!username.value){     alert("用户名不能为空");   }else if(!password.value){       alert("密码不能为空!!!")              }else{               //请求异步刷新;以请求地址作为参数传递     doAjax("select/doselect?username="+username.value+"password="+password.value);   } } //第三步:获取URL function doAjax(url){   //初始化ck;     ck();     //判断对象是否初始化成功     if(!=null){       //如果不为空,则说明初始化成功       //开始请求服务器       "post",url,true);//初始化请求参数       =ok;//指定回调函数       null);            }else{       alert("");     }  } //指定回调函数 function ok(){   //判断响应状态   if(==4){     if(==200){       chuli(function chuli(status){   var span=document.getElementById("span");   span.innerHTML=status;   span.style.display="block";    }   </script></html>

JAVA代码Servlet语法:

javapackage select;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class doselect extends HttpServlet {  /**   * Constructor of the object.   */  public doselect() {    super();  }  /**   * Destruction of the servlet. <br>   */  public void destroy() {    super.destroy(); // Just puts "destroy" string in log    // Put your code here  }  /**   * The doGet method of the servlet. <br>   *   * This method is called when a form has its tag value method equals to get.   *   * @param request the request send by the client to the server   * @param response the response send by the server to the client   * @throws ServletException if an error occurred   * @throws IOException if an error occurred   */  public void doGet(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    doPost(request, response);  }  /**   * The doPost method of the servlet. <br>   *   * This method is called when a form has its tag value method equals to post.   *   * @param request the request send by the client to the server   * @param response the response send by the server to the client   * @throws ServletException if an error occurred   * @throws IOException if an error occurred   */  public void doPost(HttpServletRequest request, HttpServletResponse response)      throws ServletException, IOException {    System.out.println("请求正常");            String[] user = new String[]{"胖胖","薇薇","黄鼠狼","李四"};        String status = "用户名可以使用!";//状态:如果为0则表示该用户名不存在;否则用户名已占用        //得到请求参数    String name = request.getParameter("username");    name = new String(name.getBytes("ISO-8859-1"),"GBK");        for (int i = 0; i < user.length; i++) {      if(name.equals(user[i])){        status = "用户名已存在!";      }    }        //将信息返回客户端    response.setContentType("text/html");    response.setCharacterEncoding("GBK");    PrintWriter out = response.getWriter();    out.println(status);      out.flush();    out.close();  }  /**   * Initialization of the servlet. <br>   *   * @throws ServletException if an error occurs   */  public void init() throws ServletException {    // Put your code here  

 

在Java_Web项目的

<??><web-app version="2.5"   ="http://java.sun.com/   ="http://www.w3.org/2001/   xsi:schemaLocation="http://java.sun.com/>     <servlet>  <description>This is the description of my J2EE component</description>  <display-name>This is the display name of my J2EE component</display-name>  <servlet-name>doselect</servlet-name>  <servlet-class>select.doselect</servlet-class> </servlet> <servlet-mapping>  <servlet-name>doselect</servlet-name>  <url-pattern>/select/doselect</url-pattern> </servlet-mapping> <welcome-file-list>  <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>