AJAX实现Loading效果的方法

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

 相信做网站开发的朋友对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")
%>

TAGS:Loading效果

上一编:Ajax中用POST传递中文参数时乱码的问题

下一编:ajax中获取和发送二进制数据的方法,就是ajax发送文件

ab蓝学网|IT技术学习网站
Copyright (C) 2016 www.ablanxue.com, All Rights Reserved.ab蓝学网 IT技术长尾词 New article Hot article