Ajax回显server端的执行信息

最新推荐文章于 2025-08-15 15:42:14 发布

sunxing007

最新推荐文章于 2025-08-15 15:42:14 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax server javascript parameters prototype css

本文链接：https://blog.youkuaiyun.com/sunxing007/article/details/3307591

本文介绍了一种使用Ajax与Java交互的方法，演示了如何在Java执行过程中将提示信息实时反馈到前端页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天有人问"页面可以用ajax通过事件调java方法，但有是我想把java方法执行过程中的某些提示信息自由自动的反馈给页面。该怎么办", 我下来就做了一个demo. 现在贴上来, 供后来者参考.

我用的是spring环境, 所有的controller都继承子Controller;
RegisteController:用来模拟用户注册的步骤, 它会产生一些执行过程中的信息放到一个链表里;
InfoController: 用来把链表中最顶端的那条信息.发送给客户.
用prototype的ajax来发送请求.
发送请求的同时, 发送另外一个请求用来得到执行过程中的提示信息. 而这个过程递归执行, 直到收到"finish" 消息.

jsp文件, 用来发送ajax请求和显示回显信息.
注意导入的prototype的路径.

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Testing page</title>
<script type="text/javascript" src="js/prototype-1.5.1.2.js"></script>
<script type="text/javascript">
function postAjax(){
var myAjax = new Ajax.Request(
'register.do',
{
method: 'post',
parameters: {username: 'username', password: 'password'},
onComplete: doComplete
}
);
alert("request send.");
getInfo();
}
function getInfo(){
var infoAjax = new Ajax.Request(
'info.do',
{
method: 'get',
parameters: {},
onComplete: doResult
}
);
}
function doResult(req){
if(req.responseText=='finish'){
return;
}
//alert(req.responseText);
var myDiv = document.createElement("div");
var infoText = document.createTextNode(req.responseText);
myDiv.appendChild(infoText);
$(info).appendChild(myDiv);
//循环发送请求得到执行信息.
getInfo();
}
function doComplete(){
}
</script>
<style type="text/css">
html,body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.title{
font-weight: bold;
}
</style>
</head>
<body>
<div><a href="javascript: postAjax();">点击将提交一个ajax请求, 模拟执行用户注册行为. 这个请求得执行过程将显示在下面.</a></div>
<div id="info" style="width: 400px; height: 200px; overflow: scroll; border: solid red 1px;">
<div class="title">The response information comes from server: </div>
</div>
</body>
</html>

RegisteController:

import java.util.LinkedList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;
public class RegisteController implements Controller {
    private Log log = LogFactory.getLog(getClass());
    
    public ModelAndView handleRequest(HttpServletRequest arg0,
            HttpServletResponse arg1) throws Exception {
        String username = arg0.getParameter("username");
        String password = arg0.getParameter("password");
        log.info("username:" + username + " password:" + password);
        /**
         * 下面的infoList将用来存放执行过程中的提示信息. 
         * 之所以用LinkedList是因为LinkedList具有队列操做的特点.
         * 最先放进去的信息可以最先被取走.
         */
        LinkedList<String> infoList = new LinkedList<String>();
        /**
         * 这里放的信息仅仅是起到模拟作用.
         * 我一次性把所有的信息都放进去了.只是为了模拟效果.
         * 你可以根据实际需要, 在需要的时候再放入信息.
         */
        infoList.add("username: " + username);
        //do something else. 
        infoList.add("password: " + password);
        //do something else. 
        infoList.add("Try to validate username......");
        //do something else. 
        infoList.add("this username is valid to use");
        //do something else. 
        infoList.add("Try to validate password......");
        //do something else. 
        infoList.add("the password is valid to use");
        //do something else. 
        infoList.add("Try to add this user into database......");
        //do something else. 
        infoList.add("try to set entitlement for this user");
        //do something else. 
        infoList.add("user registering ok.");
        //do something else. 
        infoList.add("succeed......");
        arg0.getSession().setAttribute("infoList", infoList);
        arg1.getWriter().write("succeed");
        return null;
    }
}

InfoController:

import java.util.LinkedList;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.Controller;
/**
* @author Administrator
* 这个controller用来向客户端发送执行过程中产生的信息.
*/
public class InfoController implements Controller{
    public ModelAndView handleRequest(HttpServletRequest arg0,
            HttpServletResponse arg1) throws Exception {
        LinkedList<String> list = (LinkedList<String>)arg0.getSession().getAttribute("infoList");
        /**
         * 为了模拟延迟效果, 这里睡一小会儿.
         */
        Thread.sleep(1000);
        if(list==null){
            arg1.getWriter().write("please wait a second.");
            return null;
        }
        if(list.size()==0){
            arg1.getWriter().write("finish");
            return null;
        }
        /**
         * linkedList.remove()将取走第一条信息.
         */
        String info = list.remove();
        arg1.getWriter().write(info);
        return null;
    }
}

spring配置文件:

......
<bean name="/register.do" class="com.fydy.action.RegisteController" />
<bean name="/info.do" class="com.fydy.action.InfoController" />
......

(end)

==========================soe==================================

/**JS画图，JS小游戏，JS代码集合， JS地图，JS写RPG游戏，JS动画，JS绘图, JS对象, JS函数, JS经典例子,JS面向对象, javascript画图，javascript小游戏，javascript代码集合， javascript地图，javascript写RPG游戏，javascript动画，javascript绘图, javascript对象, javascript函数, javascript经典例子,javascript面向对象,ajax代码，ajax入门，ajax代码，ajax+java，ajax技术，css网站，css资源，css代码，css学习，css下载，css教程,css分享**/