AJAX实现Loading效果的方法

飞速资源网| http://www.ff70.com |网页设计|人气:216次| 06-11

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='http://www.ff70.com/article/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.ff70.com")
%>
如果觉得《AJAX实现Loading效果的方法》网页设计,网页设计教程,网页设计知识不错，可以推荐给好友哦。

本文Tags： 电脑教学 - 网页设计,网页设计教程,网页设计知识,