这种涉及常规操作的新知识点建议直接看教程,毕竟还是要看大神的笔记:菜鸟教程: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);
}
}