javaWeb(十一）Ajax简介、Ajax校验用户名

这种涉及常规操作的新知识点建议直接看教程，毕竟还是要看大神的笔记：菜鸟教程：AJAX

1、Ajax简介及其应用：
Asynchronous Javascript And XML（异步JavaScript和XML）

网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

并不是新的技术，只是把原有的技术，整合到一起：

使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
使用XMLHttpRequest来和服务器进行异步通信。
使用javascript来绑定和调用。

1、在jsp中建立超链接并绑定一个函数（先说Get类型）

<h2>
	<a href="" onclick="get()">使用Ajax.Get请求</a>
</h2>

在这个jsp中写JavaScript代码：

<script type="text/javascript">

	function get() {

		//1、创建XmlHttpRequest
		var xmlhttp = new XMLHttpRequest();

		//2、当请求被发送到服务器时，我们需要执行一些基于响应的任务。这里是直接弹出响应的内容
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText);
			}
		}

		//3、规定请求的类型
		xmlhttp.open("GET", "Demo1Servlet?name=aa&age=23", true);

		//4、发送请求
		xmlhttp.send();
	}
</script>

写连接的Servlet并响应一下：

response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");

String name = request.getParameter("name");
String age = request.getParameter("age");

response.getWriter().write("我收到请求了！" + "name:" + name + ",age:" + age);

效果如图：
在这里插入图片描述

如果是Post类型，上面的JSP和Servlet都是一样的，就是要把JavaScript的代码改一下就行了：

xmlhttp.open("POST","Demo1Servlet",true);

//设置请求头
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//要发送的数据，如果没有数据就不需要上面这一行了
xmlhttp.send("fname=Henry&lname=Ford");

2、Ajax校验用户名：

校验用户输入的用户名是否存在，并在旁边显示出来

在这里插入图片描述

编写登陆页面index.jsp
在name处绑定函数，当用户鼠标离开文本框的时候，用Ajax向Servlet发送数据

<head>
<base href="<%=basePath%>">
<script type="text/javascript">

	function checkName() {
	
		//获得name的值
		var name = document.getElementById("name").value;

		var xmlhttp = new XMLHttpRequest();
		
		
			//3、规定请求的类型
		xmlxmlhttp.open("POST", "CheckNServlet", true);
		

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				if (xmlhttp.responseText == 1) {
				//在name後面显示
					document.getElementById("span").innerHTML = "<font color='red'>用户名已经存在，请重新输入</font>";
				} else {
					document.getElementById("span").innerHTML = "<font color='green'>用户名可用</font>";

				}

			}
		}

	

		//设置请求头
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		//把name发送到serlvetl
		xmlhttp.send("name=" + name);
	}
</script>

</head>

<body>


	<table border="1px" width="500px">
		<tr>
			<td>用户名</td>
			<td><input type="text" name="name" id="name"
				onblur="checkName()"><span id="span"></span></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="password"></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="email" name=""></td>
		</tr>
		<tr>
			<td>简介</td>
			<td><textarea name="" rows="3" cols="600px"></textarea></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>

</body>
</html>

Dao代码

package CheckNameDao;

import java.sql.SQLException;

public interface CheckDao {
	
	boolean CheckName(String name)throws SQLException;

}

Dao实现

package CheckNameDaoImpl;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import com.mchange.v2.c3p0.ComboPooledDataSource;

import CheckNameDao.CheckDao;

public class CheckDaoImpl implements CheckDao {

	@Override
	// 传入一个名字，这个名字是从前端的Ajax得来的
	public boolean CheckName(String name) throws SQLException {

		QueryRunner queryRunner = new QueryRunner(new ComboPooledDataSource());

		String sql = "select count(*) from user where name = ?";
		// 找到姓名是name的数据的数量
		long result = (long) queryRunner.query(sql, new ScalarHandler(), name);
		// 如果数量大于0（有这个数据），返回true
		return result > 0;

	}

}

Servlet：从Ajax那里收到用户输入的用户名，然后看数据库里有没有这个名字，返回一个bool值

package cn.nupt.CheckNameServlet;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import CheckNameDao.CheckDao;
import CheckNameDaoImpl.CheckDaoImpl;

/**
 * Servlet implementation class CheckNameServlet
 */
//@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		try {
			String name = request.getParameter("name");
			System.out.println("name="+name);
			
			CheckDao daoImpl = new CheckDaoImpl();

			boolean b = daoImpl.CheckName(name);

			if (b) {
				response.getWriter().println(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}

	}

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

}

javaWeb(十一）Ajax简介、Ajax校验用户名

猜你喜欢