素材巴巴 > 程序开发 >

html想使用ajax需要导入很忙,AJAX实现Loading效果的方法

程序开发 2023-09-04 07:32:14

33c6ee5f447d6234f4211ca4fc137a57.png

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

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

1、htmer.html文件源代码如下所示:html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

AJAX实现Loading效果的方法-HTMer

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="

Loading...... ";    //若响应未完成,则显示Loading

}

xmlHttp.open("GET","htmer.asp",true);

xmlHttp.send(null);

}

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

Response.CharSet="gb2312"

Response.Write("欢迎光临Www.HTMer.Com")

%>


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。