在本代码中主要体现，Ajax实现了部分位置的刷新。不需要重新刷新网页，重新请求服务器。下面用过代码来对Ajax更深的认识
这里需要创建，一个jsp文件（显示登录界面），js文件(对Ajax的主要设置)，一个servlet（主要用作和数据库连接和逻辑的控制）
1.在web中创建一个Lession7jsp页面，jsp中主要写了登录页面的用户名和密码和按钮
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> ???<title>AJAX学习-用户登录</title> ???<script type="text/javascript" src="js/Lession7.js"></script>//对后面js页面进行调用。</head><body><table align="center" border="1px" cellspacing="0px" cellpadding="10px"width="500"> ???<tr> ???????<td align="right" width="30%">用户名：</td> ???????<td align="left" width="70%"> ???????????<input type="text" name="name" id="user"/><span id="span"></span> ???????</td> ???</tr> ???<tr> ???????<td align="right"width="30%">密码：</td> ???????<td align="left" width="70%"> ???????????<input type="password" name="pwd" id="pwd"/></span> ???????</td> ???</tr> ???<tr> ???????<td align="center" colspan="2"> ???????????<input type="button" value="注册"> ???????</td> ???</tr></table></body></html>
2.在web中新建一个叫js的文件夹，在js文件夹里面新建Lession.js文件。Ajax的设置都是JS中设置的，所以这个js文件就是Ajax学习的精髓和重点了。
/window.onload的意思是，页面加载就会显示这个方法
window.onload = function() {
???//获取jsp页面中的用户名<input name="user">标签的name
???var nameObj = document.getElementById("user")
???//nameObj.onblur:进行绑定，当失去焦点时，就会调用下面的函数
???nameObj.onblur = function () {
???????//获得标签的name属性的值，以此来获取浏览器输入的内容
???????var name = this.value;
???????/*alert(name);*/
???????//第一步：初始化XMLHttpRequest,创建异步对象，因为其他浏览器和老版本的IE浏览器创建对象的过程不一样，所有这里需要判断
???????//（第一步对AJAX初始化，在网上搜索有好多，不用可以把这一步的代码背下来，理解即可）
???????var xmlhttp;
???????if (window.XMLHttpRequest)
???????{// code for IE7+, Firefox, Chrome, Opera, Safari
???????????xmlhttp=new XMLHttpRequest();
???????}
???????else
???????{// code for IE6, IE5
???????????xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
???????}
???????//第二步：指定回调函数，并对服务器的交互状态进行判断
???????//onreadystatechange是AJAX对象的一个属性，因为Ajax是异步处理的，所以需要一个这样的回调
???????xmlhttp.onreadystatechange=function(){
???????????//readyState对服务器的状态，status是HTTP的状态
???????if(xmlhttp.readyState==4&&xmlhttp.status==200){
???????????//这里用到了JSON知识点，主要实现了把serlvt页面的数据传给js
???????????//所以，这里的数据是servlt里传过来的。
??????????????var obj = eval("("+xmlhttp.responseText+")");// eval()获取返回值
???????????if (obj.flag==0){
???????????????document.getElementById("span").innerText="用户名可用";
???????????}else if (obj.flag==1) {
???????????????document.getElementById("span").innerText="用户名已经存在！";
???????????}
???????}
???????}
???????//第三步：用open（"1","2","3"）连接服务器 ,
???????// 1里面放post或者get，2里面放的是servlet在web.xml中定义的。3：true代表异步处理
???????xmlhttp.open("post","/ServletXml?name="+name,true);
???????//第四步：向服务器发送请求，
???????xmlhttp.send(null);
???}
}
3.在src中新建servlet，我这个项目连接了mysql数据库，如果没有数据库，可以直接把里面的数据写死了。这两个可以选择一个测试。
例如：1.
@Override ???protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????String uname = request.getParameter("uname"); ???????//利用JDBC检索uname是否在用户表中存在 ???????PrintWriter out = response.getWriter(); ???????//向客户端输出响应结果 ???????out.print("{‘flag‘:1}"); ???}例如2.我的是动态连接数据库的。
package com.wgh;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;import java.sql.*;@WebServlet(name = "ServletXml")public class ServletXml extends HttpServlet { ???protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????????String name = request.getParameter("name"); ???????????System.out.println(name); ???????????PrintWriter pw = response.getWriter(); ???????????String[] str = new String[10]; ???????????//进行数据库链接，查询数据库中用户名是否存在的操作 ???????try { ???????????Class.forName("com.mysql.jdbc.Driver"); ???????????String url = "jdbc:mysql://localhost:3306/z_shop"; ???????????String username = "root"; ???????????String pwd = "root"; ???????????Connection conn = DriverManager.getConnection(url,username,pwd); ???????????String sql = "select count(*) FROM ?td_name where Username=? "; ???????????PreparedStatement ps =conn.prepareStatement(sql); ???????????ps.setString(1,name); ???????????ResultSet rs = ps.executeQuery(); ???????????rs.next(); ???????????System.out.println(rs.getInt(1)); ???????????if (rs.getInt(1)==0) { ???????????????pw.print("{‘flag‘:0}"); ???????????} else{ ???????????????pw.print("{‘flag‘:1}"); ???????????} ???????} catch (ClassNotFoundException e) { ???????????e.printStackTrace(); ???????} catch (SQLException e) { ???????????e.printStackTrace(); ???????} ???????System.out.println(name); ???} ???protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ???????????doPost(request,response); ???}}最后记得在web.xml文件中进行注册哦！
<servlet> ???????<servlet-name>ServletXml</servlet-name> ???????<servlet-class>com.wgh.ServletXml</servlet-class> ???</servlet> ???<servlet-mapping> ???????<servlet-name>ServletXml</servlet-name> ???????<url-pattern>/ServletXml</url-pattern> ???</servlet-mapping>
注意：
1.本项目中用的JSON知识点，是需要导JSON的jar包的哦，
2.在src中Servle一定要放在包中，默认包可能不识别。
如果有错的地方请多多包含。代码我运行过，可以起来的。
Ajax概述和判断用户名是否存在的简单代码练习
原文地址：https://www.cnblogs.com/zxrxzw/p/10597336.html