HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« WebQQ——不装QQ直接在网页上聊QQ的方法解决Firefox中有时使用window.close()脚本无法关闭当前窗口的方法 »

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")
%>


欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/695.htm
  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version