利用struts2做服务器端 extJs的ajax无刷新调用struts2刷新数据 还用到js解析服务器端返回的xml串 具体代码如下
struts2代码:
List payList = this.payMgrService.findAllPay(sortId);
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter outPrintWriter = null;
try {
outPrintWriter = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
String value = "fail";
if(!payList.isEmpty()){
value = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><pay><size>" + payList.size() + "</size>";
Map map = new HashMap();
for(int i=0;i<payList.size();i++){
map = (Map)payList.get(i);
value = value
+"<bussid>" + map.get("BUSS_ID") + "</bussid>"
+"<name>" + map.get("NAME") + "</name>"
+"<image>" + map.get("IMAGE") + "</image>"
+"<url>" + map.get("URL") + "</url>"
+"<state>" + map.get("STATE") + "</state>" ;
}
value = value + "</pay>";
}
outPrintWriter.write(value);
outPrintWriter.flush();
outPrintWriter.close();
extJs及js代码:
function clearTable(){
var tab = document.getElementById("contentTable");
for(var i=0;i<tab.rows.length;i++){
for(var j=0;j<tab.rows[i].cells.length;j++){
tab.rows[i].cells[j].innerHTML = "";
}
}
}
function showContent(sortId){
clearTable();
Ext.Ajax.request({
url : '../../notice/findAllPay.action',
success : function(msg) {
var res = msg.responseText;
if (res == "fail") {
clearTable();
} else {
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判断是否是非ie浏览器
var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
for(var i=0;i<xmlDomVersions.length;i++){
try{
xmlDoc = new ActiveXObject(xmlDomVersions[i]);
xmlDoc.async = false;
xmlDoc.loadXML(res); //loadXML方法载入xml字符串
break;
}catch(e){
}
}
}
//支持Mozilla浏览器
else if(window.DOMParser && document.implementation && document.implementation.createDocument){
try{
/* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
* 要使用 DOMParser,使用不带参数的构造函数来实例化它,然后调用其 parseFromString() 方法
* parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
* 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意,不支持 "text/html"。
*/
domParser = new DOMParser();
xmlDoc = domParser.parseFromString(res, 'text/xml');
}catch(e){
}
}
try
{
var size = xmlDoc.getElementsByTagName("size")[0].childNodes[0].nodeValue;
for(var i=0;i<size;i++){
var name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
var image = xmlDoc.getElementsByTagName("image")[i].childNodes[0].nodeValue;
var url = xmlDoc.getElementsByTagName("url")[i].childNodes[0].nodeValue;
var state = xmlDoc.getElementsByTagName("state")[i].childNodes[0].nodeValue;
var content = "<a href='" + url + "' target=_blank onmouseover='changeBgColor("+i+")' onmouseout='resetBgColor("+i+")'><img src='images/"+ image + "' border='0'/><br><div style='margin-top:5px' id='div"+i+"'>" + name + "</div></a>";
document.getElementById("content" + i).innerHTML = content;
}
}catch(e){alert(e.message)}
}
},
params : {
sortId : sortId
},
disableCaching: true
});
}
分享到:
相关推荐
AJAX(Asynchronous JavaScript and XML)则是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。本教程主要讲解如何使用EXTJS的AJAX方法向后台服务器发送数据,这对于实现动态交互和数据同步至...
7. **Ajax与ExtJS结合**:学习如何利用ExtJS的Ajax API进行数据请求,如Ext.Ajax.request方法,以及如何绑定数据到组件。 8. **事件处理**:掌握ExtJS中的事件模型,如何监听和处理用户交互。 9. **数据存储**:...
在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术和JSON(JavaScript Object Notation)的结合,已经成为一种高效、灵活的数据交互方式。本教程将深入探讨如何利用Ajax和JSON来改进传统的HTML表单数据...
4. **XML数据处理**:DWR可能会返回XML格式的数据,ExtJS应用需要解析这些数据并填充到Grid中。这通常涉及到使用JavaScript的XML DOM API或者使用ExtJS提供的XMLReader。 5. **Ajax调用**:DWR的核心是Ajax通信,它...
Ajax(Asynchronous JavaScript and XML)是Web开发中的关键技术,它允许页面在不刷新整个页面的情况下与服务器进行异步通信。在ExtJS中,Ajax请求通常通过`Ext.Ajax`对象或者组件的`ajax`方法来实现。你将了解如何...
总结,结合ExtJS 4的富客户端功能和Struts2的服务器端处理能力,我们可以构建出高效且用户体验良好的登录系统。这涉及到客户端的表单设计、事件处理,以及服务器端的数据验证和逻辑处理。通过深入理解这两个框架,...
ExtJS利用Ajax技术实现了无需刷新整个页面就能更新内容的功能。 【学习方法】对于初学者,理解ExtJS的基本概念非常重要。可以通过模仿官方示例和实际项目中的应用来逐步掌握。建议动手实践,比如创建小网站,将学到...
- **Ajax 原理**:异步 JavaScript 和 XML 技术,通过后台与前台的异步交互,使得用户无需刷新整个页面即可完成数据的获取和更新。 - **Ajax 请求**:使用 ExtJS 的 Ajax 功能发送请求,包括 GET 和 POST 等不同类型...
ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...
- ExtJS 应用通常使用AJAX(异步JavaScript和XML)技术与C#后端进行通信,实现页面无刷新的数据交换。这可以通过Ext.Ajax或者Ext.data.Proxy(如RESTful Proxy)实现。 4. **JSON 数据格式**: - C#后端返回的...
标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合,通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,而Struts是Java Web开发中的一个MVC...
1. **Ajax通信**:ExtJS利用XMLHttpRequest对象实现Ajax通信,使得页面无需刷新即可与服务器交互数据。在测试类中,可能会包含`Ext.Ajax.request`方法的使用,用于发送HTTP请求并处理响应。 2. **数据模型(Model)...
EXTJS和Domino的结合应用主要集中在构建富客户端的Web应用程序上,利用EXTJS的UI组件库和Domino的服务器端功能。EXTJS是一个强大的JavaScript框架,提供了丰富的用户界面组件和数据绑定机制,而Domino是IBM的一款...
- **数据解析**:ExtJS的Store接收到JSON数据后,自动更新模型并刷新视图。 5. **安全与优化** - **数据验证**:Servlet端进行输入验证,防止SQL注入等安全问题。 - **缓存策略**:可以利用HTTP缓存机制,减少...
AJAX(Asynchronous JavaScript and XML)技术的运用,使得页面无刷新更新成为可能,提升了用户的交互体验。通过异步与服务器交换数据并局部更新页面,用户无需等待整个页面加载,从而提高了工作效率。 在系统设计...
在现代Web开发领域中,Ajax(Asynchronous JavaScript and XML)技术已经成为实现网页局部刷新、提高用户体验的重要手段之一。本篇教程将基于ExtJS框架,从零开始介绍如何利用Ajax进行高效的数据交互。 #### 一、...
ExtJS是一种广泛应用于构建富客户端Web应用的JavaScript框架,它提供了丰富的组件库、强大的数据管理以及优雅的用户界面。在“ExtJS深入浅出介绍之数据存储与传输”这一主题中,我们将深入探讨ExtJS如何处理后台数据...
在ExtJS中,异步请求(通常指的是Ajax请求)是实现动态数据加载、用户界面更新等关键功能的基础。Ajax框架允许开发者在不刷新整个页面的情况下与服务器进行通信,从而提供更流畅的用户体验。 1. **异步请求原理**:...
1. **Ajax技术**:Ajax(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下与服务器进行数据交换。在ExtJS中,`Ext.Ajax` 类提供了一系列方法,如`request`、`get`、`post`等,用于发起Ajax请求。...