日期:2014-05-16  浏览次数:20661 次

ajax+servlet简单示例

参考网上做的一个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);
	}
}

?完成