HTMer » 编程开发 » AJAX实现Loading效果的方法

AJAX实现Loading效果的方法

相信做网站开发的朋友对AJAX技术应该都有所了解了,目前在很多网站中得到了广泛应用,AJAX无刷新的用户体验效果真的很不错。好了,废话不多说,切入今天的主题,今天主要是要向大家介绍在AJAX中实现Loading效果的方法。

 准备工作:分别建立两个文件,一个是前台显示文件htmer.html,一个是后台处理文件htmer.asp

1、htmer.html文件源代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AJAX实现Loading效果的方法-HTMer</title>
<script language="javascript" type="text/javascript">
var xmlHttp;
//创建xmlHttpRequest对象
function createXMLHttpRequest(){
    if(window.ActiveXObject)
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");    //兼容IE浏览器
    else if(window.XMLHttpRequest)
    xmlHttp=new XMLHttpRequest();    //兼容Firefox浏览器
}
function htmer_loading(){
    createXMLHttpRequest();
    xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4&&xmlHttp.status==200)
    document.getElementById("show").innerHTML=xmlHttp.responseText;    //若响应完成,则显示htmer.asp中的内容
    else
    document.getElementById("show").innerHTML="<div align='center'><img src='images/loading.gif' /> Loading......</div>";    //若响应未完成,则显示Loading
    }
    xmlHttp.open("GET","htmer.asp",true);
    xmlHttp.send(null);
}
</script>
</head>
<body>
<input type="button" value="点击查看效果"  onclick="htmer_loading()" />
<div id="show"></div>
</body>
</html>

2、htmer.asp文件的源代码如下所示:

<%
Response.CharSet="gb2312"
Response.Write("欢迎光临Www.HTMer.Com")
%>
顶一下 ▲()   踩一下 ▼()

相关文章