JSP的AJAX异步交互(Servlet)

点点与麦兜

浏览: 9713 次
性别:
来自: 成都

最近访客更多访客>>

woodding2008

Gozs_cs_dn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2013-04 ( 5)
更多存档...

博客分类：

AJAX

servlet ajax jsp

WEB应用中在表单验证时AJAX起到了很大的作用，特别是对用户名的验证。

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);
	}
    }

}