相信做网站开发的朋友对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.xxk123.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.xxk123.com")
%>
Tag:网页设计，网页设计教程,网页设计知识，电脑教学 - 网页设计