jsp 通过 Ajax 和servlet之间的连接及数据传递示例
2013-12-10 14:51
555 查看
效果图:很基本的例子,不过刚开始把第三步open()连接中url 写错了,老是访问不到,如果出现相同的问题,可以再js部分第二步中通过alert(“xmlReq.readystate=”+xmlReq+" "+"xmlReq.status="+xmlReq.status);来调试错误地方jsp代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Register</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="./register/Register.js"></script> </head> <body> <form action="" enctype="application/x-www-form-urlencoded"> <table border="1"> <tr> <td colspan="2" align="center"><Strong>用户注册</Strong> </td> </tr> <tr> <td>用户名:</td> <td><input type="text" id="username"> <div id="divcheck"></div> </tr> <tr> <td>密 码:</td> <td><input type="password" id="password"></td> </tr> <tr> <td><input type="button" value="验证" id="checkusername"> </td> <td align="center"><input type="reset" value="重置"> </td> </tr> <!-- <tr> <td><a href="javascript:;" onclick="find()" id="1" value="100">平台简介</a></td> <td><a>开放业务</a> </td> </tr> --> </table> </form> </body> </html>
js代码
//创建XMLHttpRequest 对象的函数 function ajaxFunction() { var xmlHttp; try {// Firefox,Opera,Safari xmlHttp = new XMLHttpRequest(); } catch (e) {// Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } window.onload = function() { document.getElementById("checkusername").onclick = function() { var username = document.getElementById("username").value; // 1创建xmlHTTP对象 var xmlReq = ajaxFunction(); /** * 2、处理服务器端的响应 readyState的值为4代表响应完成 status属性:200代表一切正常;304代表源文件没有别修改 * 404代表找不到页面;403禁止访问; 500 内部服务器错误 * */ xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200 || xmlReq.status == 304) { var data = xmlReq.responseText; document.getElementById("divcheck").innerHTML = data; } } }; // 3、打开和服务器端的连接 如果是get方法,则改为get并且删掉第二条语句 var url = "./servlet/registServlet"; xmlReq.open("post", url, true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 4、get 方法不会接受到,这里只适合于post方法传递参数 xmlReq.send("username=" + username); }; };servlet代码:
package cn.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 registServlet extends HttpServlet { private static final long serialVersionUID = -2968705132907930725L; public registServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); if ("admin".equals(username)) { out.println("用户名已存在~"); } else { out.println("用户名可用~"); } } public void init() throws ServletException { } }
相关文章推荐
- JSP、servlet、SQL三者之间的数据传递
- JSP、servlet、SQL之间的数据传递
- JSP Servlet SQL 三者之间数据传递
- 对JSP、JAVASCRIPT、SERVLET之间数据传递的总结
- 二、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)
- HTML文件、PHP文件、JSON文件之间通过AJAX编程简单传递数据
- 一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)
- 如何在servlet中获取jsp中form表单提交的变量,以及jsp与servlet之间的数据传递
- 数据库中的记录通过servlet回显到jsp页面中(连接数据库或者查询参照:对数据进行增删改查)
- 58-004-2 省级城市二级联动 ajax+servlet 通过xml传递数据.
- 数据库中的记录通过servlet回显到jsp页面中(连接数据库或者查询參照:对数据进行增删改查)
- Jsp和Servlet之间的数据共享(数据传递和数据调用
- Jsp和Servlet之间的数据共享(数据传递和数据调用)
- 运用Ajax和JSON对象实现JSP和Servlet的数据传递
- jsp,servlet,sql之间的数据传递
- 对JSP、JAVASCRIPT、SERVLET之间数据传递的总结
- servlet+jsp+ajax+json实现传递数据小案例
- ajax连接jsp或servlet,获取MySql为数据
- Servlet与JSP之间的数据传递
- jsp与servlet之间的数据传递