与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
不说那么多废话了,直接入题:
首先,写jsp页面:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<%
String path=request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TimeCard Manager Platform</title>
<script src="<%=path%>/js/prototype.js"></script>
<script>
function getXML(){
//局部请求地址
var url="searchAction.action";
//获取用户当前输入的内容
var inputvalue=document.getElementById("itext").value;
//使用prototype函数构造xmlhttprequest对象
var myAjax = new Ajax.Request(
url,
{
//请求方法为post
method:'post',
//设置参数为 inputtext=inputtext
parameters:"inputtext="+inputvalue,
//设置回调函数
onComplete:showResponse,
//是否异步
asynchronous:true
}
);
}
function showResponse(xmlrequest){
//回调函数
var text = xmlrequest.responseText;
//将匹配的内容输出到 span 层
document.getElementById("projectspan").innerHTML=text;
// $("projectspan").innerHTML=xmlrequest.responseText;
}
</head>
<body>
Project manager:
<span id="projectspan" class="font_bluet"> <select
name="project.resource_id" id="prijectmanager">
<option value="-1"> Choose</option>
<option value="0" >aaaa</option>
<option value="1" >bbbb</option>
<option value="2" >cccc</option>
<option value="3" >dddd</option>
</select> </span>
<input name="text" type="text" id="itext" onKeyUp="getXML()" />
</body>
</html>
在XWORK.XML中加入下面的代码:
<action name="searchAction" method="searchAction" class="com.mdcl.timecard.action.ProjectAction" >
</action>
在action中:
public void searchAction() {
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html;charset=utf-8");
PrintWriter out;
String inputtext = ServletActionContext.getRequest().getParameter("inputtext");
//根据输入框的内容到数据库查询符合条件项,返回
// List (resourcelist1)
//如果没有符合条件项,则查询所有列表,返回 List (resourcelist)
if(!resourcelist1.isEmpty() || resourcelist1.size()>0){
try {
out = ServletActionContext.getResponse().getWriter();
out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
for(int i=0;i<resourcelist1.size();i++){
out.println("<option value=" + resourcelist1.get(i).getResourceId() + ">"
+ resourcelist1.get(i).getName() + "</option>");
}
out.println("</select>");
//输出缓存字符串
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}else{
try {
out = ServletActionContext.getResponse().getWriter();
out.println("<select name='project.resource_id' id='prijectmanager' class='fram'>");
for(int i=0;i<resourcelist.size();i++){
out.println("<option value=" + resourcelist.get(i).getResourceId() + ">"
+ resourcelist.get(i).getName() + "</option>");
}
out.println("</select>No Information!");
//输出缓存字符串
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
相关推荐
实例67 AjaX实现数据记录排序 实例68 局部动态更新数据 实例69 AjaX+PHP数据分页显示 实例70 指定CSS样式显示数据 实例71 JSON格式处理信息 第9章 Ajax时尚技术 实例72 根据邮编自动完成地址信息 实例73 AiaX...
1.本书1~16章所附代码的运行环境 ...程序描述:本章将仿照Google Suggest,使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。 ...
源码结构说明 1.TreeWiewDemo文件夹下为源文件 2.TreeWiewDemo.war为部署文件 <br>第15章 程序描述:本章程序将本章将使用Ajax技术实现无刷新即可浏览RSS新闻的阅读器。 源码结构说明 1....
10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*....
此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样使得Web后端开发者如虎添翼,使用少量代码就可以实现复杂的功能。特别是新版本1.4.x的发布,jQuery在功能和性能方面都有质的提升,极大...
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一...