WEB应用中在表单验证时AJAX起到了很大的作用,特别是对用户名的验证。
JSP页面:
xmlReq的onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。
xmlReq.readyState一共有5个值:
0 (未初始化)
对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化)
对象已建立,尚未调用send方法
2 (发送数据)
send方法已调用,但是当前的状态及http头未知
3 (数据传送中)
已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成)
数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
xmlReq.status == 200表示执行成功
xmlReq.status == 304表示文件没有变化
一般指判断是否等于200就OK了
在这里表单提交的方式是post
以post方式提交的话,必须加上一句代码
一共有4步:
1.获取xmlhttprequest对象
2.接收服务器响应
3.打开和服务器连接,open方法一个有三个值,第一个值表示提交的方式是get还是post.
第二个值表示,提交给谁处理,是一个路径。第三个值表示是否异步请求,true为异步。
4.发送数据
Servlet:
JSP页面:
<%@ 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>Insert title here</title>
</head>
<body>
<input type="text" id="text"/>
<input type="button" id="ok" value="测试"/>
</body>
<script type="text/javascript">
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;
}
window.onload = function()
{
document.getElementById("ok").onclick = function()
{
// 01 获取xmlhttprequest对象
var xmlReq = ajaxFunction();
var infor = document.getElementById("text").value;
// 02接收服务器响应
xmlReq.onreadystatechange = function()
{
if(xmlReq.readyState ==4 )
{
if(xmlReq.status == 200 || xmlReq.status == 304)
{
var data = xmlReq.responseText;
alert(data);
}
}
};
// 03打开和服务器的连接
xmlReq.open("post","./MyServlet?timeStamp="+new Date().getTime(),true);
//post方法需要
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 04发送数据
xmlReq.send("inf="+infor);
};
};
</script>
</html>
xmlReq的onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。
xmlReq.readyState一共有5个值:
0 (未初始化)
对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化)
对象已建立,尚未调用send方法
2 (发送数据)
send方法已调用,但是当前的状态及http头未知
3 (数据传送中)
已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成)
数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
xmlReq.status == 200表示执行成功
xmlReq.status == 304表示文件没有变化
一般指判断是否等于200就OK了
在这里表单提交的方式是post
以post方式提交的话,必须加上一句代码
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
一共有4步:
1.获取xmlhttprequest对象
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;
}
2.接收服务器响应
xmlReq.onreadystatechange = function()
{
if(xmlReq.readyState ==4 )
{
if(xmlReq.status == 200 || xmlReq.status == 304)
{
var data = xmlReq.responseText;
alert(data);
}
}
};
3.打开和服务器连接,open方法一个有三个值,第一个值表示提交的方式是get还是post.
第二个值表示,提交给谁处理,是一个路径。第三个值表示是否异步请求,true为异步。
xmlReq.open("post","./MyServlet?timeStamp="+new Date().getTime(),true);
4.发送数据
xmlReq.send("inf="+infor);
Servlet:
package com.lxf.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 MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String text = request.getParameter("inf");
if (text.equals("admin")) {
out.println("error");
} else {
out.println(text);
}
}
}