润乾ajax,通过异步请求实现报表组功能

问题描述：通过ajax的异步处理来切换多张报表的模型，类似润乾中的

具体实现：

首先先做两张普通的raq报表，用于之后展现所用。

在最终展现的页面中加入两个标签，分别通过触发js来进行异步处理，分别传入之前两张报表展现的url。

标签1

标签2

点击标签动态加载内容。

然后实现javascript代码：

var xmlHttp; //用于保存XMLHttpRequest对象的全局变量

//用于创建XMLHttpRequest对象

function createXmlHttp() {

//根据window.XMLHttpRequest对象是否存在使用不同的创建方式

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式

} else {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//IE浏览器支持的创建方式

}

}

//获取页面信息的调用函数

function switchPage(srcTab, pageName) {

resetTabs();

srcTab.className = “tab tabsel”;

createXmlHttp(); //创建XmlHttpRequest对象

writePageInfo(“正在加载……”); //显示提示信息

xmlHttp.onreadystatechange = writePageInfo;

xmlHttp.open(“GET”, pageName, true);

xmlHttp.send(null);

}

//获取页面信息的回调函数

function writePageInfo(pageInfo) {

//如果没有传入pageInfo参数，则读取xmlHttp对象的响应结果

if (pageInfo == undefined) {

if (xmlHttp.readyState == 4) {

var pageInfo = xmlHttp.responseText;

document.getElementById(“pageInfo”).innerHTML = pageInfo;

}

} else {

document.getElementById(“pageInfo”).innerHTML = pageInfo;

}

}

//恢复所有标签的class属性

function resetTabs() {

//获取tabdiv下的所有span节点

var tabs = document.getElementById(“tabdiv”).getElementsByTagName(“span”);

//遍历span节点，将class属性恢复为”tab”

for (var i=0; i

tabs[i].className = “tab”;

}

}

服务器端相应则可直接使用润乾默认展现报表的showReport.jsp来进行处理将结果返回。

在页面中第一次展现时只是个空页面

点击标签后异步加载不同的报表页面。

这样还可以分别在报表中添加导出等功能按钮，分别调用。实现了异步处理展现累死报表组风格的报表。

ps：当然标签边框等风格可以通过css来进行控制，进行美工的设置。