实现功能：在输入框中输入字符，用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();
}
分享到：
相关推荐
3、js验证通过后， 数据交给servlet处理，如果数据不符合要求，返回表单提交页面，原来填写的内容必须回显。 4、注册成功后，进入登陆页面，完成登陆操作。 5、登陆成功后，显示所有的用户列表。 6、数据库采用...
3、js验证通过后， 数据交给servlet处理，如果数据不符合要求，返回表单提交页面，原来填写的内容必须回显。 4、注册成功后，进入登陆页面，完成登陆操作。 5、登陆成功后，显示所有的用户列表。 6、数据库采用mysql...
本文实例讲述了AJAX+Servlet实现的数据处理显示功能。分享给大家供大家参考，具体如下： 实现功能：在输入框中输入字符，用AJAX传到后台Servlet处理后加上随机数，并返回到前台显示。 一、写前台jsp页面index.jsp &...
控制转发层采用Servlet，数据访问层采用Hibernate（bean和dao是由Hibernate逆向工程自动生成）。 系统采用分层架构，由上到下分为视图层、控制转发层、业务层、服务层、数据库访问层。运用了一些基本设计模式，系统...
2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框...
本系统采用Servlet+JavaBean框架，基于JavaWeb三层架构，部分前端...系统主要是按照JavaBean+Servlet+AJAX框架对视图层页面、控制器Servlet、业务逻辑层service和数据处理层dao+jdbc进行约定，为下一步的编码提供基础。
实验环境 jdk8，Version: Mars Release (4.5.0) 其中有原始的以ajax方式实现html与servlet的交互 也包括了使用Jquery Ajax实现交互，包括以get方式提交时候乱码问题的处理。
本系统主要实现火车查询售票功能，主要的功能如下： 客户端管理功能: (1)动车基本信息管理模块;(2)车次查询模块，两站之间的车次查询,某车站中转站所有的车次的查询,具体某车次的查询;(3)售票模块,车票的预定; (4)...
1.前端创建HTTPXMLRequest对象及实现步骤，后台用jsp的servlet处理数据； 2.封装HTTPXMLRequest对象，实现通用的ajax技术； 3.利用ajax技术实现登录功能； 4.利用ajax技术，返回xml格式数据并处理，实战案例是实现...
在本系统中，jsp实现了显示数据的功能，Servlet实现了处理业务逻辑的功能，AJAX提供了无刷新请求的功能。
首先，创建服务器端代码，这里用Servlet实现服务器端的数据处理；代码如下： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置编码...
基于JSP+Servlet的污水处理系统源码+项目说明.zip # Sewage-Treatment 开发环境为Myeclipse+JSP+Servelet+Mysql， 功能主要有： ``` 1. 利用AJAX通过js与severlet通信的注册登录功能设计,用户权限分配 2. 数据趋势...
前端页面采用Layui进行搭建，数据处理用到了MyBatis框架，页面只有一个，所有的操作都在名为index.jsp上面，通过ajax技术来请求servlet来获取数据，返回的是json格式数据，会交给返问操作源来处理json数据最后渲染成...
和已经出版的同类图书相比，《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》讲解由浅入深，涵盖更多内容，列举了大量典型实例具有超强的实用性，另外，《Java Web开发技术大全:JSP+Servlet+...
采用ajax技术实现的图形验证码，在前端进行验证。验证码信息为图片。每一行代码均有注释，通俗易懂。 实现步骤: 1、创建web工程 ... 6、在js文件中，通过dwr，调用AjaxService类中的方法，取得数据，实现判断
和已经出版的同类图书相比，《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》讲解由浅入深，涵盖更多内容，列举了大量典型实例具有超强的实用性，另外，《Java Web开发技术大全:JSP+Servlet+...
本文实例讲述了Ajax上传实现根据服务器端返回数据进行js处理的方法。分享给大家供大家参考。具体如下： Ajax上传说白了还是使用form表单提交，在当前页面加一个iframe，将提交的内容跳转到iframe中，造成一种页面无...
提示：数据处理交给Servlet，jsp只负责显示。 6.使用过滤器实现多角色登录检验 考虑多种用户角色：admin，teacher，student。保证只有特定角色才能访问特定页面。 （1）分别建立admin、teacher、student三个目录，...
【资源说明】 基于JavaWeb + Mysql + Layui实现的宿舍管理系统源码+数据库+演示截图+项目说明.zip 1、该资源内项目代码都是经过测试运行成功，...> 总结：jsp用于作页面展示，ajax用于异步刷新，java处理具体业务逻辑