Ajax 数据加载的实现

来源：互联网发布：linux 查看端口号编辑：程序博客网时间：2024/04/30 19:43

HTML文件如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<STYLE>

.gLoading{position:absolute;padding:2px 9px 2px6px;border-width:1px;border-style:solid;background-color:#FFFF88;font-size:12px;display:block;}

</STYLE>

</HEAD>

<div class="gLoading" style="top:34px; right:10px;z-index:60" id=" ajaxLoadingMsg "><imgsrc="http://p.mail.163.com/js31style/lib/0807161641/163blue/loading_16x16.gif"align="absmiddle"/> <span id="spnMsg">数据加载中，请稍候...</span></div>

</BODY>

</HTML>

Ajax 实现部分如下：

createXmlHttp();

var naviSelected =document.all.naviListSelect[document.all.naviListSelect.selectedIndex];

document.all.ajaxLoadingMsg.style.display='block';

xmlHttp.open("GET","<%=request.getContextPath() %>/search.action");xmlHttp.onreadystatechange =tpiShowSearchResult;

xmlHttp.send(null);

在tpiShowSearchResult函数中，如果正确返回结果的话，把这个块隐藏。

function tpiShowSearchResult(response) {

if (response.readyState == 4) {

if (response.status== 200) {

// 隐藏这个div 块

document.all.ajaxLoadingMsg.style.display ='none';

document.getElementById("tpiSearchResult").innerHTML = response.responseText;

}