日期:2014-05-16 浏览次数:20796 次
参考网上做的一个Ajax+jsp+servlet的一个简单示例
不多说,一切尽在代码中
首先 jsp页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子邮件</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//ajax 创建XMLHttpRequest 对象
var req;
function creatReq(){
if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建
{
req=new XMLHttpRequest();
}
else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.
{
req=new ActiveXObject("Microsoft.XMLHttp");
}
}
//ajax发送请求
function doAjax(){
creatReq();
if(req) //成功创建xmlhttprequest
{
var mailAddress=document.getElementById("mailAddress").value;
req.open("GET","/ajaxser?mailAddress="+mailAddress,true); //与服务端建立连接(请求方式post或get,地址,true表示异步)
req.onreadystatechange = callback; //指定回调函数
req.send(null); //发送请求
}
}
//回调函数
function callback() //回调函数,对服务端的响应处理,监视response状态
{
if(req.readystate==4) //请求状态为4表示成功
{
if(req.status==200) //http状态200表示OK
{ //所有状态成功,显示数据
//注意 这里req.statusText得到的是控制台打印的数据 即System.out.println("XXX");中的数据,而req.responseText 得到的是写入的数据 急 out.writer("XXX") 中的数据。
document .getElementById ("message").innerHTML ="<font color='#ff0000'>"+req.responseText+"</font>";
}
else //http返回状态失败
{
alert("请求发送失败");
}
}
else //请求状态还没有成功,页面等待
{
document .getElementById ("message").innerHTML ="请求发送中...";
}
}
//提交请求
function doconfirm(){
var email=document.getElementById("mailAddress").value;
if(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)){
doAjax();
}
else {
alert("邮箱地址格式不正确、请正确填写");
document.getElementById("mailAddress").focus();
return;
}
}
</script>
</head>
<body>
邮箱地址:<input type="text" name="mailAddress" id="mailAddress"/><br/>
<input type="button" value="确定" onclick="doconfirm()"/><div id="message"></div>
</body>
</html>
?
<servlet> <servlet-name>ajaxser</servlet-name> <servlet-class>com.hcdy.servlet.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajaxser</servlet-name> <url-pattern>/ajaxser</url-pattern> </servlet-mapping>
?
servlet 中
public class AjaxServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
resp.setHeader("Cache-Control", "no-cache");
PrintWriter out=resp.getWriter(); //
String email=request.getParameter("mailAddress");
if(email.equals("12345678@163.com"){
out.writer("数据库中有该邮箱");
}
else out.writer("无该邮箱");
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doGet(req, resp);
}
}
?完成