实现功能：在输入框中输入字符，用AJAX传到后台Servlet处理后加上随机数，并返回到前台显示。
一、写前台jsp页面index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
/*
ajax 的几个步骤：
1、建立XmlHttpRequest对象
2、设置回调函数
3、使用Open方法建立与服务器的连接
4、向服务器发送数据
5、在回调函数中针对不同响应状态进行处理
*/
var xmlHttp;
function createXMLHttpRequest(){ //1建立XmlHttpRequest对象
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
}catch(e){
alert("Error!!!");
}
}else{
xmlHttp = new XMLHttpRequest();
}
}
function showMes(){ //2设置回调函数
if(xmlHttp.readyState==4){ //数据接收完成并可以使用
if(xmlHttp.status==200){ //http状态OK
//5、在回调函数中针对不同响应状态进行处理
document.getElementById("sp").innerHTML = xmlHttp.responseText; //服务器的响应内容
}else{
alert("出错："+xmlHttp.statusText); //HTTP状态码对应的文本
}
}
}
/**
//这是GET方法传送
function getMes(){
createXMLHttpRequest();
var txt = document.getElementById("txt").value;
var url="servlet/AjaxServlet?txt="+txt;
url = encodeURI(url); //转换码后再传输
xmlHttp.open("GET",url,true); //3使用Open方法建立与服务器的连接
xmlHttp.onreadystatechange=showMes;
xmlHttp.send(null); //4向服务器发送数据
}
*/
/**
*这是post方法
*/
function postMes(){
createXMLHttpRequest();
var txt = document.getElementById("txt").value;
var url = "servlet/AjaxServlet";
var params = "username="+txt;
// alert(params);
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(params);
xmlHttp.onreadystatechange = showMes;
}
</script>
</head>
<body>
<input type="text" id="txt"/>
<input type="button" value="query" onclick="postMes()" />
<span id="sp"></span>
</body>
</html>
二、写后台Servlet加random随机数，关键代码如下：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //用utf-8转换获得传输过来的码
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String txt = request.getParameter("txt");
// String tx = new String(txt.getBytes("iso-8859"),"utf-8");
out.print("txt="+txt+Math.random());
out.flush();
out.close();
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
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");
// String txt = new String(username.getBytes("ISO-8859-1"),"UTF-8");
String txt = new String(username);
out.print("txt="+txt+":"+Math.random());
out.flush();
out.close();
}
分享到：
相关推荐
Servlet接收到请求后，进行处理并返回JSON或其他格式的数据，JavaScript再根据这些数据更新页面的DOM元素，显示验证结果。 总的来说，"html+Servlet+ajax实现登录修改"是一个典型的前后端分离的Web应用开发模式，它...
在`TestJSP`这个文件中，可能包含了实现上述步骤的示例代码，如DAO接口和实现类、Service类、Servlet处理类以及使用AJAX的JSP页面。通过分析和学习这些代码，你可以更好地理解JSP、Servlet、AJAX和DAO设计模式如何...
4. **AJAX响应处理**：前端通过AJAX回调函数接收到响应，根据结果更新页面状态，比如显示登录成功或失败的消息。 5. 对于数据的增删查改，流程类似，只是Servlet中执行的SQL语句会相应地变为INSERT、DELETE、UPDATE...
3. 实现Servlet：在Java中创建一个Servlet，重写doPost方法以处理AJAX POST请求。在这里，你需要解析接收到的用户数据，进行业务逻辑处理，如数据库查询和验证。 4. 处理响应：Servlet处理完数据后，应返回一个JSON...
本项目“JSP+Servlet+Ajax网上书城”旨在帮助新手小白通过实践理解这些核心技术，并实现一个基本的网上书店管理平台。 ### JSP (JavaServer Pages) JSP是Java平台上的服务器端脚本语言，用于创建动态网页。开发者...
在IT行业中，构建Web应用程序是常见的任务之一，而"jsp+servlet+ajax实现登录"的案例则是一个典型的前后端交互示例。这个案例利用了JavaServer Pages (JSP)、Servlet和Asynchronous JavaScript and XML (AJAX)的技术...
1. 用户交互：Ajax允许用户在不离开当前页面的情况下发送请求，Servlet在后台处理请求并返回数据，JavaScript更新页面部分区域，提升了用户体验。 2. 实时更新：例如聊天应用，Servlet接收并处理消息，Ajax负责周期...
总结来说，这个项目通过结合JSP的视图展示、Servlet的后台处理和Ajax的异步通信，构建了一个高效的登录系统。用户在输入登录信息后，无需等待整个页面刷新，就能立即得到验证结果，大大提升了Web应用的交互性和响应...
创建数据通常涉及到用户填写表单，然后通过Ajax将数据发送到后台Servlet进行处理。在JSP中，我们可以创建一个包含输入字段的表单，然后使用Ajax调用Servlet。例如，使用jQuery的Ajax方法： ```javascript $.ajax({ ...
在这里，Servlet接收由Ajax发送的请求，处理数据并返回响应。在处理搜索提示的场景中，Servlet可能需要访问数据库或者某种数据源，找出与用户输入相匹配的关键词或条目。 实现步骤如下： 1. **前端HTML**：创建一...
这个项目利用了Java Servlets处理服务器端逻辑，JDBC（Java Database Connectivity）进行数据库操作，MySQL作为关系型数据库存储数据，以及AJAX（Asynchronous JavaScript and XML）来实现页面的无刷新更新，提升...
Servlet负责处理服务器端的业务逻辑，而Ajax则在客户端和服务器之间建立异步通信，实现了搜索结果的即时显示，提高了用户的交互体验。理解并掌握这两项技术，对于开发高效、用户体验优秀的Web应用至关重要。通过实践...
在购物车场景中，当用户选择商品数量或执行其他操作时，Ajax可以异步发送请求到Servlet，Servlet处理后将响应数据返回，前端JavaScript再动态更新页面，提高了用户体验。 具体实现步骤如下： 1. 用户在前端页面...
【标题】"jsp+servlet+ajax+easyui学生管理系统"是一个典型的Web应用程序开发实例，它结合了多种技术来实现一个高效、用户友好的学生管理平台。这个项目对于初学者来说是一个很好的起点，可以帮助他们理解如何在实际...
开发者可以利用JSP标签库（Tag Libraries）来简化页面逻辑，例如使用JSTL（JavaServer Pages Standard Tag Library）进行数据处理和控制流操作。JSP的主要优点在于其视图和控制逻辑的分离，便于维护和扩展。 2. **...
- **AJAX实现**：使用XMLHttpRequest对象或现代浏览器的fetch API实现异步请求，通过JavaScript处理返回数据并更新DOM。 5. **挑战与优化**： - **性能优化**：对大量文档的查询和上传，可能需要考虑索引优化、...
在超市管理系统中，Ajax主要用于实现异步数据交换，例如，当用户在前端进行操作（如搜索商品或查看库存）时，Ajax可以向服务器发送请求，获取实时数据，然后在不刷新页面的情况下更新显示内容。这大大提升了用户体验...
在大型项目中，Servlet扮演着核心角色，因为它可以提供高效且灵活的服务器端逻辑，比如处理用户数据、管理会话状态以及与数据库交互等。 【JDBC】 Java Database Connectivity (JDBC) 是Java平台上的标准API，用于...
4. **数据处理**：Servlet将查询结果转换为适合传输的数据格式，如JSON或XML。JSON因为其轻量级和易于解析的特性，通常被广泛采用。 5. **Ajax响应**：Servlet将处理好的数据发送回客户端，Ajax回调函数接收到响应...
3、js验证通过后， 数据交给servlet处理，如果数据不符合要求，返回表单提交页面，原来填写的内容必须回显。 4、注册成功后，进入登陆页面，完成登陆操作。 5、登陆成功后，显示所有的用户列表。 6、数据库采用...