AJAX学习笔记----jquery+servlet实现用户名验证

文件一  ajax1.html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>用户名校验</title>

   <script type="text/javascript" src="/jslib/veryfy1.js"></script>

   <script type="text/javascript" src="/jslib/jquery.js"></script>
</head>
<body>
        <!-- ajax不需要用表单来提交数据,可以使用。。。 -->
        <!--ajax不需要name,需要一个id-->
      用户名:<input type="text" id="name"/> <br/>
            <input type="button" value="button" onclick="veryfy()"/>
        <!--div用于服务器返回信息,初始为空-->
        <!--id属性是为了dom方式寻找到该节点,进行操作-->
        <!--
           div,span 不会对文本进行改变
           每个div会占一行,span不会
        -->
            <div id="result"></div>

            <div >124</div>
            <div >456</div>
            <span >123</span>
            <span >456</span>
</body>
</html>

 

 

文件二  web.xml

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">
          <servlet>
              <servlet-name>AjaxServer</servlet-name>
              <servlet-class>AjaxServer</servlet-class>
          </servlet>

    <servlet-mapping>
              <servlet-name>AjaxServer</servlet-name>
              <url-pattern>/AjaxServer</url-pattern>
    </servlet-mapping>
</web-app>

 

 

文件三 AjaxServer.java

 

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by IntelliJ IDEA.
 * User: czx
 * Date: 2008-11-7
 * Time: 11:18:29
 * To change this template use File | Settings | File Templates.
 */
public class AjaxServer extends HttpServlet {
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
       doPost(httpServletRequest, httpServletResponse);    //To change body of overridden methods use File | Settings | File Templates.
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.取参数信息 2.检查参数是否有问题 3.数据校验
        //  4.和传统开发不同,把用户感兴趣的数据返回给页面  而不是转向一个新页面给用户
         response.setContentType("text/html;charset=GB2312");
         PrintWriter out = response.getWriter();
         String name = request.getParameter("name");
         if(name == null || name.length() == 0){
             out.print("用户名不能为空");
         }else{
             String newName = new String(name.getBytes("ISO8859-1"));
             if(newName.equals("czx")){
                 out.println("用户名"+newName+"已存在");
             }else{
                 out.println("新用户"+newName+",可以使用");
             }
         }
         out.println("<br><a href=\"index.html\">返回验证页面</a>");
    }
}

 

文件四 veryfy1.js

 

function veryfy(){
    //alert('按钮被点击了');
    //dom方式获取页面数据
    //document.getElementById("name");
    //jquery查找节点的方式   参数中#加上id的属性值,可以找到一个节点
    //jquery的方法返回的都是jquery对象 , 可以继续在上面执行其他jquery的方法
    var jqueryobj = $("#name");
    var name = jqueryobj.val();

    //将文本框中的数据发送给服务器的servlet
    //使用jquery的XMLHttpRequest对象get请求的封装
    $.get("AjaxServer?name="+name,null,callback);

}
function callback(data){
    //alert('服务器的数据来了');
    //3.接受服务器返回的数据
    //alert(data);
    //4。将服务器返回的数据动态显示在页面上
    //找到保存结果信息的节点
    var resultobj = $("#result");
    //动态改变页面中div节点的内容
    resultobj.html(data);
    //alert('');
}

 

 

主意:需要导入jquery包,这里用的是1.2.6版本的

你可能感兴趣的:(JavaScript,jquery,Ajax,servlet,javaee)