日期:2014-05-16 浏览次数:20721 次
参考网上做的一个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); } }
?完成