ajax（eclipse）具体简单实现

servlet，jdbc，xml，navicat，jsp实现一个ajax检测用户名的操作，求代码

navicat 只是查询数据的工具，不用考虑

 <%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>验证用户名是否存在</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
//通过id获取页面button的onclick点击事件
    document.getElementById("checkusername").onclick = function() {
        var username = document.getElementById("username").value;
        //测试打印出username(输入值)
        alert(username);
        //1.创建ajax对象
        var xhr = ajaxFunction();
        xhr.onreadystatechange = function() {
            //处理后台返回的数据
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    var data= xhr.responseText;
                    document.getElementById("divcheck").innerHTML = data;
                }
            }
        }
    //规定发送数据的形式（post/get），url，以及传输方式(同步/异步)
        xhr.open("post","./LoginServlet?timeStamp="+new Date().getTime(),true);
        //post方式需要加下边这句，get方式不需要
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //将页面输入数据发送到后台
        xhr.send("username="+username);
    }
}

function ajaxFunction() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {}
        }
    }
    return xmlHttp;
}
</script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded" >
用户名：<input type="text" name="username" value="" id="username">
<div id="divcheck"></div>
<input type="button" name="checkusername" value="查看用户名" id="checkusername"/>
</form>
</body>
</html>

web.xml是配置文件，配置前台页面和后台Servlet的映射关系，注意url路径的对应。

 <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

  <welcome-file-list>

    <welcome-file>register.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
     <servlet-name>LoginServlet</servlet-name>
     <servlet-class>com.test.Servlet.LoginServlet</servlet-class>
  </servlet>

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

LoginServlet.java

 package com.test.Servlet;

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 LoginServlet extends HttpServlet {

    public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        doPost(request,response);
    }

    public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
        response.setContentType("text/html;charset=utf-8");
        //定义输出流
        PrintWriter out = response.getWriter();
        //获取前端页面输入数据
        String username = request.getParameter("username");
        //查询数据库，验证接收前台数据是否成功
//导入驱动包
        Class.forName("com.mysql.jdbc.Driver"); 
        //链接至数据库
        String jdbc="jdbc:mysql://127.0.0.1:3306/mydb";
                Connection conn=DriverManager.getConnection(jdbc, "root", "");

                Statement state=conn.createStatement();//容器
                String sql="select id,username from user";           //sql语句
                ResultSet rs=state.executeQuery(sql);     //将sql语句传至数据库，返回的值为一个字符集用一个变量接收 
                String tusername = null;
                while(rs.next()){    //next（）获取里面的内容
                System.out.println(rs.getString(1)+" "+rs.getString(2);
                                                        //getString（n）获取第n列的内容
                                                                //数据库中的列数是从1开始的
                            tusername = rs.getString(2);                    
                }

                conn.close(); 
        //进行比较并作出响应。
        if(username==null || username.equals("")) {
            out.println("请输入用户名 ");
        } else if(tusername.equals(username)) {
            out.println("该用户名已经存在");
        } else {
            out.println("可以注册");
        }

    }
}

就是一个模糊查询。
1.前台jsp将用户名name传递到后台servlet接收到。
2.后台servlet执行sql（select name from t_user where t_user.name =name）
3.sql如果返回结果为0，则用户名不存在。如果大于0，则用户名存在了。

首先准备表，在这里使用Oracle数据库，数据库名称为GoldDB，在其中的frank模式下建立表MyTable，表中包含三个字段分别为：pid,pname,age。以后的检索条件利用age，检索age大于某一条件的结果。

首先创建Web Project，在其中创建index.jsp，作为与用户交互的页面，动态的处理也在此页面利用Ajax完成。
页面中存在一个查询结果的现实Table，注意，必须建立tbody标记，因为动态生成的结果要在tbody中操作。id为mytable

当点击按钮的时候调用searchPerson方法