在客户端页面,我们主要编写了2个javascript函数, 一个用来创建XMLHttpRequest请求和发送请求数据.另一个用来处理返回的xml文档数据.
// 从指定URL加载XML文档数据对象。
// @param url 请求地址
// @param reqText 请求数据
function loadXMLDoc(url,reqData)
{
try
{
var xmlHttp;
if (window.XMLHttpRequest)
{
// 创建 Mozilla/FireFox平台的 XMLHttpRequest 对象
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject)
{
// 创建 IE/Windows 平台的XMLHttp对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 用POST,非异步方式开启请求地址,
xmlHttp.open("POST", url, false);
// 设置提交数据的格式为Form表单格式。
// 如要发送xml格式的数据,将此行注释掉即可。
// 或者显式指定为"Content-Type", "text/xml; charset=utf-8"
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送数据
xmlHttp.send(reqData);
// 返回xml文档数据对象
return xmlHttp.responseXML;
}catch(exception)
{
//alert(exception);
}
}
// 处理XML文档数据
function processData(param)
{
if ( param==null ) return;
// 请求参数
var sParam = "country="+param;
// 请求地址
var sUrl = "http://turbo:8080/qis/Ajax.jsp";
// 加载xml文档数据对象
var xmlDOM = loadXMLDoc(sUrl,sParam);
// 下面开始将返回的xml数据解析出来,并添加到列表中。
var root = xmlDOM.documentElement;
try
{
document.getElementById("city").length = 0;
for (i=0;i<root.childNodes.length;i++)
{
sValue = root.getElementsByTagName('city')[i].firstChild.data;
if(sValue!=null)
{
//将解析出来的城市名添加到清单列表中
document.getElementById('city').length =
document.getElementById('city').length+1;
document.getElementById('city').options[i].text=sValue;
document.getElementById('city').options[i].value="/sValue;
}
}
}catch(exception)
{
//alert(exception);
}
}
其中第1个函数用来从指定URL加载XML文档数据对象, 返回一个XML DOM对象, 你可以用标准的dom对象方法来解析其中的数据. 这个方法几乎是通用的, 你也可以将它复制到你的Ajax的页面中使用. 而第2个函数处理返回的DOM数据,并将数据添加到指定的表单元素中显示. 注意, 为了跨浏览器使用, 我们的代码里引用表单元素的方法是document.getElementById. 如果你要将它移植到你的程序中,你得重写xml数据解析的代码.
在表单元素选择省份的下拉式清单上, 我们加了onchange事件, 将当前所选省份传给processData函数处理,
onchange="javascript:processData(this.value)
当选择省份时, 则马上调用processData函数, 从服务器端取数据.
而对于服务端程序, 为了部署简便, 我采用jsp来编写, 它主要负责处理用户请求, 并返回相应的xml文档数据, 其大致结构如下:
// 创建文档对象。
Document doc = DocumentBuilderFactory.newInstance()
.newDocumentBuilder().newDocument();
// 创建文档对象根元素。
Element xmlRoot = doc.createElement("result");
String country = request.getParameter("country");
// 如果是广东省,创建广东省城市数据文档树。
if ( "GuangDong".equals(country) )
{
...
}
// 如果是湖北省,创建湖北省城市数据文档树。
else if ( "HuBei".equals(country) )
{
...
}
// 如果是湖南省,创建湖南省城市数据文档树。
else if ( "HuNan".equals(country) )
{
...
}
// 如果是山东省,创建山东省城市数据文档树。
else if ( "HuNan".equals(country) )
{
...济南 青岛 潍坊
}
// 将文档根元素加到文档对象。
doc.appendChild(xmlRoot);
// 将xml文档数据发送给客户端浏览器。
DOMSource doms = new DOMSource(doc);
StreamResult sr = new StreamResult(response.getOutputStream( ));
TransformerFactory tf = TransformerFactory.newInstance( );
Transformer t = tf.newTransformer( );
t.setOutputProperty("encoding", "UTF-8");
t.transform(doms, sr);
分享到:
相关推荐
非常简单的ajax+jsp实现2级联动例子
jquery+ajax+jsp+servlet实现二级级联菜单,这是自己在实践中总结的一点小经验,代码从前台JAP到Servlet以及后台数据库设计,测试数据完整的流程,相信有点java基础的同仁们都可以看得明白
Ajax+jsp+MySQL实现动态树形菜单 非常实用,物超所值!
简单的ajaxt无刷新实现表单提交的实例(myeclipse 直接导入运行) 学习点: 1;ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - ...
ajax+jsp+Hibernate实现的Blog源代码
《Ajax+JSP网站开发从入门到精通》的源代码,全书共分为16章,包括JSP的基础知识、JSP访问外部数据、JSP高级技术、Ajax概述、Ajax相关技术、Ajax开发基础、Ajax开发模式、Ajax框架、Ajax常用技巧。本书最后介绍了6个...
关于联动以前都没接触过,这是我第一次学习用的例子,很实用,适合初学者下载学习
Jquery+Ajax+Php+Mysql异步刷新 表单验证
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于ajax+jsp+servlet+mysql利用IDEA实现的图书管理系统源码+数据库.zip
利用ajax+jsp技术进行局部页面刷新
ajax+jsp草稿自动保存
Ajax+jsp无刷新验证码实例 包含 :Ajax+jsp无刷新验证码实例.docx img.jsp net.js num.jsp random.jsp
使用ajax+struts2.0+jsp做的一个多下拉列表级联
ajax+jsp网页时时刷新提示. 有详细的注释方便学习
AJAX+JSP实现基于WEB的文件上传的进度控制
AJAX+jsp无刷新验证码实例AJAX+jsp无刷新验证码实例AJAX+jsp无刷新验证码实例
ajax+jsp实例:根据省代码列出城市名
挺好的!结合了Ajax,jsp,oracle等,生成动态菜单,自己去看一看!
ajax +jsp实现带进度条的文件上传。不好意思只是简单是的。