Ajax实现页面loading效果!

2016-02-19 16:58 6 1 收藏

下面这个Ajax实现页面loading效果!教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

//request.html
script type="text/javascript"
var xmlHttp;

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

function createXMLHttpRequest() { //创建一个xmlHttpRequest对象
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

function dealAct(){
var url = "requestPage.php"; //请求页面url
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange; //请求状态改变事件触发handleStateChange功能
xmlHttp.open("GET",url); //采用get方法提交数据
xmlHttp.send(null);
}

function handleStateChange(){
if(xmlHttp.readystate == 4){ //表示请求状态 4为完成
if(xmlHttp.status == 200){ //http状态指示码,200表示ok
document.getElementById(infoId).innerHTML = xmlHttp.responseText; //将服务器返回信息作为文本插入到infoId指示的容器中。
}
}
else document.getElementById(infoId).innerHTML = "loading..."; //若响应未完成的话,则显示loading..也就是搂主你要的效果了
}
/script
span id=infoId[若程序被触发,将会在此容器内显示loading...]/span

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

//requestPage.php
?php
sleep(10); //让程序暂停10s,以便于更好的观察loading效果。
echo "cilentRequest recived";

来源:http://www.tulaoshi.com/n/20160219/1613753.html

延伸阅读
标签: Web开发
     文章简介:现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢? 现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过...
标签: Web开发
修复了一些细节代码(支持持续按键事件) *项目名称:AJAX实现类Google Suggest效果 *作者:草履虫(也就是蓝色的ecma) *联系:caolvchong@gmail.com *时间:2007-7-7 *工具: DreamWeaver(写ASP),Aptana(写Javascript,HTML和CSS),Emeditor(写这篇文章),Access2003(数据库) *测试平台:Firefox2.0,IE6.0,IE7.0 *演示地址:http://finish.3322.org/sugge...
标签: Web开发
主页面(要求刷新的页面)要求每一分钟刷新一次系统时间 html body onload="makeRequest("getSystemTime.jsp")" //创建httpRequest对象 form name="dateForm" table td colspan="2" align="center"          div id="sysTimeShow"/div //显示平台系统时间  ...
标签: Web开发
很多报考时候或填写志愿时候,你是否遇到多斟酌一段时间后填写完页面信息,提交时却显示页面过期的现象,不得不重新快速填写一遍;然而在写博客时要写好长时间但没有出现这种情况并且有实时的自动保存;这就涉及到了session的过期时间问题; 当无法预计用户操作页面的时间时就用到了session永不过期 代码如下: script src="js/Jquery1.7.j...
标签: Web开发
最近在看jQuery,就在实际项目里加了个小的应用,当时的想法就是点击一个链接跳转到另个页面时,页面是逐渐显示出来,也就是由透明到实体的一个过程! 说下思路吧,在body里用一个div把所有的标签包含住,在此div后再定义一个div,后面这个div是用来实现渐显效果的。 如下所示: Code highlighting produced by Actipro CodeHighlighter (...

经验教程

257

收藏

49
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部