`
huchunyong1987
  • 浏览: 20517 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

利用extJs的ajax功能及结合js解析xml串无刷新显示数据

阅读更多
利用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
});



分享到:
评论

相关推荐

    EXTJS AJAX方式发送数据给后台服务器.rar

    AJAX(Asynchronous JavaScript and XML)则是一种在不刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。本教程主要讲解如何使用EXTJS的AJAX方法向后台服务器发送数据,这对于实现动态交互和数据同步至...

    ajax extjs 入门ppt 我和ajax有个约会

    7. **Ajax与ExtJS结合**:学习如何利用ExtJS的Ajax API进行数据请求,如Ext.Ajax.request方法,以及如何绑定数据到组件。 8. **事件处理**:掌握ExtJS中的事件模型,如何监听和处理用户交互。 9. **数据存储**:...

    Ajax+JSON 提交数据的演示

    在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术和JSON(JavaScript Object Notation)的结合,已经成为一种高效、灵活的数据交互方式。本教程将深入探讨如何利用Ajax和JSON来改进传统的HTML表单数据...

    Extjs+数据库+dwr+案例+xml

    4. **XML数据处理**:DWR可能会返回XML格式的数据,ExtJS应用需要解析这些数据并填充到Grid中。这通常涉及到使用JavaScript的XML DOM API或者使用ExtJS提供的XMLReader。 5. **Ajax调用**:DWR的核心是Ajax通信,它...

    extjs中文教程 ajax

    Ajax(Asynchronous JavaScript and XML)是Web开发中的关键技术,它允许页面在不刷新整个页面的情况下与服务器进行异步通信。在ExtJS中,Ajax请求通常通过`Ext.Ajax`对象或者组件的`ajax`方法来实现。你将了解如何...

    Extjs4--Form登录功能,结合struts2

    总结,结合ExtJS 4的富客户端功能和Struts2的服务器端处理能力,我们可以构建出高效且用户体验良好的登录系统。这涉及到客户端的表单设计、事件处理,以及服务器端的数据验证和逻辑处理。通过深入理解这两个框架,...

    ExtJS与.NET结合开发实例.doc

    ExtJS利用Ajax技术实现了无需刷新整个页面就能更新内容的功能。 【学习方法】对于初学者,理解ExtJS的基本概念非常重要。可以通过模仿官方示例和实际项目中的应用来逐步掌握。建议动手实践,比如创建小网站,将学到...

    extjs4中文视频下载地址

    - **Ajax 原理**:异步 JavaScript 和 XML 技术,通过后台与前台的异步交互,使得用户无需刷新整个页面即可完成数据的获取和更新。 - **Ajax 请求**:使用 ExtJS 的 Ajax 功能发送请求,包括 GET 和 POST 等不同类型...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    Extjs与C#完美接合写法控件源代码

    - ExtJS 应用通常使用AJAX(异步JavaScript和XML)技术与C#后端进行通信,实现页面无刷新的数据交换。这可以通过Ext.Ajax或者Ext.data.Proxy(如RESTful Proxy)实现。 4. **JSON 数据格式**: - C#后端返回的...

    extjs 跟 struts+json

    标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合,通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,而Struts是Java Web开发中的一个MVC...

    extjs与后台数据交换的一些测试类

    1. **Ajax通信**:ExtJS利用XMLHttpRequest对象实现Ajax通信,使得页面无需刷新即可与服务器交互数据。在测试类中,可能会包含`Ext.Ajax.request`方法的使用,用于发送HTTP请求并处理响应。 2. **数据模型(Model)...

    EXTJS+Domino的应用例子-修正

    EXTJS和Domino的结合应用主要集中在构建富客户端的Web应用程序上,利用EXTJS的UI组件库和Domino的服务器端功能。EXTJS是一个强大的JavaScript框架,提供了丰富的用户界面组件和数据绑定机制,而Domino是IBM的一款...

    extjs+servlet

    - **数据解析**:ExtJS的Store接收到JSON数据后,自动更新模型并刷新视图。 5. **安全与优化** - **数据验证**:Servlet端进行输入验证,防止SQL注入等安全问题。 - **缓存策略**:可以利用HTTP缓存机制,减少...

    HR.rar_HR J2_ajax_ajax java_extjs j2_人力资源管理系统 java

    AJAX(Asynchronous JavaScript and XML)技术的运用,使得页面无刷新更新成为可能,提升了用户的交互体验。通过异步与服务器交换数据并局部更新页面,用户无需等待整个页面加载,从而提高了工作效率。 在系统设计...

    ExtJS深入浅出-基础ajax教程

    在现代Web开发领域中,Ajax(Asynchronous JavaScript and XML)技术已经成为实现网页局部刷新、提高用户体验的重要手段之一。本篇教程将基于ExtJS框架,从零开始介绍如何利用Ajax进行高效的数据交互。 #### 一、...

    ExtJS深入浅出介绍之数据存储于传输

    ExtJS是一种广泛应用于构建富客户端Web应用的JavaScript框架,它提供了丰富的组件库、强大的数据管理以及优雅的用户界面。在“ExtJS深入浅出介绍之数据存储与传输”这一主题中,我们将深入探讨ExtJS如何处理后台数据...

    ExtJs异步请求和特殊用途

    在ExtJS中,异步请求(通常指的是Ajax请求)是实现动态数据加载、用户界面更新等关键功能的基础。Ajax框架允许开发者在不刷新整个页面的情况下与服务器进行通信,从而提供更流畅的用户体验。 1. **异步请求原理**:...

    extjs和数据库的后台交互

    1. **Ajax技术**:Ajax(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下与服务器进行数据交换。在ExtJS中,`Ext.Ajax` 类提供了一系列方法,如`request`、`get`、`post`等,用于发起Ajax请求。...

Global site tag (gtag.js) - Google Analytics