問(wèn)題描述：通過(guò)ajax的異步處理來(lái)切換多張報(bào)表的模型，類(lèi)似潤(rùn)乾中的

具體實(shí)現(xiàn)：

首先先做兩張普通的raq報(bào)表，用于之后展現(xiàn)所用。

在最終展現(xiàn)的頁(yè)面中加入兩個(gè)標(biāo)簽，分別通過(guò)觸發(fā)js來(lái)進(jìn)行異步處理，分別傳入之前兩張報(bào)表展現(xiàn)的url。

標(biāo)簽1

標(biāo)簽2

點(diǎn)擊標(biāo)簽動(dòng)態(tài)加載內(nèi)容。

然后實(shí)現(xiàn)javascript代碼：

var xmlHttp; //用于保存XMLHttpRequest對(duì)象的全局變量

//用于創(chuàng)建XMLHttpRequest對(duì)象

function createXmlHttp() {

//根據(jù)window.XMLHttpRequest對(duì)象是否存在使用不同的創(chuàng)建方式

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式

} else {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//IE瀏覽器支持的創(chuàng)建方式

}

}

//獲取頁(yè)面信息的調(diào)用函數(shù)

function switchPage(srcTab, pageName) {

resetTabs();

srcTab.className = “tab tabsel”;

createXmlHttp(); //創(chuàng)建XmlHttpRequest對(duì)象

writePageInfo(“正在加載……”); //顯示提示信息

xmlHttp.onreadystatechange = writePageInfo;

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

xmlHttp.send(null);

}

//獲取頁(yè)面信息的回調(diào)函數(shù)

function writePageInfo(pageInfo) {

//如果沒(méi)有傳入pageInfo參數(shù)，則讀取xmlHttp對(duì)象的響應(yīng)結(jié)果

if (pageInfo == undefined) {

if (xmlHttp.readyState == 4) {

var pageInfo = xmlHttp.responseText;

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

}

} else {

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

}

}

//恢復(fù)所有標(biāo)簽的class屬性

function resetTabs() {

//獲取tabdiv下的所有span節(jié)點(diǎn)

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

//遍歷span節(jié)點(diǎn)，將class屬性恢復(fù)為”tab”

for (var i=0; i

tabs[i].className = “tab”;

}

}

服務(wù)器端相應(yīng)則可直接使用潤(rùn)乾默認(rèn)展現(xiàn)報(bào)表的showReport.jsp來(lái)進(jìn)行處理將結(jié)果返回。

在頁(yè)面中第一次展現(xiàn)時(shí)只是個(gè)空頁(yè)面

點(diǎn)擊標(biāo)簽后異步加載不同的報(bào)表頁(yè)面。

這樣還可以分別在報(bào)表中添加導(dǎo)出等功能按鈕，分別調(diào)用。實(shí)現(xiàn)了異步處理展現(xiàn)累死報(bào)表組風(fēng)格的報(bào)表。

ps：當(dāng)然標(biāo)簽邊框等風(fēng)格可以通過(guò)css來(lái)進(jìn)行控制，進(jìn)行美工的設(shè)置。

總結(jié)

以上是生活随笔為你收集整理的润乾ajax,通过异步请求实现报表组功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。