一、ajax的作用
ajax实现了浏览器网页与服务器的异步传输，在不需要重新加载网页的情况下可以更新网页内容，例如，输入用户名，在不点击提交的情况下就可以检查到用户名的输入是否符合规范！
二、代码展示
register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>注册页面</h1>
<form action="registerServlet" method="get" onsubmit="checkform()">
用户名：<input type="text" id="username" name="user" onchange="chuli()"><span id="err"></span>
密码：<input type="password" id="pwd">
</form>
<script>
var xmlhttp;
var flag;
//1.创建对象
function creatObject(){
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//2.处理请求
function chuli(){
creatObject();
var username = document.getElementById("username").value;
xmlhttp.open("GET","TestAjax?username="+username,true);
xmlhttp.setRequestHeader("If-Modified-Since", "0");//get清空缓存
xmlhttp.send();
//进入响应状态
xmlhttp.onreadystatechange=back;
}
//3.处理响应
function back(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var msg = xmlhttp.responseText;
if(msg=="success"){
err.innerHTML="该用户名可以使用";
flag=true;
}else{
alert("用户名有误!请重新输入");
//1.清空文本框内容
document.getElementById("username").value="";
flag=false;
}
}
}
function checkform(){
return flag;
}
</script>
</body>
</html>
TextAjax.java
package com.Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class TestAjax
*/
@WebServlet("/TestAjax")
public class TestAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestAjax() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//编码
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if(("admin".equals(username))) {
response.getWriter().write("success");
}else {
response.getWriter().write("error");
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
三、运行结果
四、ajax请求的五个步骤
1.创建一个XMLHttpRequest异步对象
2.设置请求对象与请求地址
3.用send发送数据
4.监听状态变化
5.接收返回的数据