Ajax实现页面loading效果!

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

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

【 tulaoshi.com - Web开发 】

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

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

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

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

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

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

延伸阅读
标签: Web开发
模态对话框是,当弹出对话框时后面的内容无法操作。本次利用ajax制作的模太对话框并不是浏览器提供的模太对话框,而是通过层和ajax技术实现的虚拟的模太对话框. 样式表,css代码: .abc{          position:absolute;          left:1px;  &n...
标签: Web开发
主页面(要求刷新的页面)要求每一分钟刷新一次系统时间 html body onload="makeRequest("getSystemTime.jsp")" //创建httpRequest对象 form name="dateForm" table td colspan="2" align="center"          div id="sysTimeShow"/div //显示平台系统时间  ...
标签: Web开发
在这个被Ajax技术统治的互联网时代,很多Ajax程序都会在异步读取数据的同时,显示一个正在读取或Loading的动画,向大家推荐一个在线生成Loading预载动画Gif图片的网站,它不但提供了超多的Loading动画样式供你选择,而且你还可以自定义尺寸、颜色等参数,可谓方便到家,最最重要的是,PreLoaders.net提供的Loading预载动画生成服务完全免费,心...
标签: Web开发
很多报考时候或填写志愿时候,你是否遇到多斟酌一段时间后填写完页面信息,提交时却显示页面过期的现象,不得不重新快速填写一遍;然而在写博客时要写好长时间但没有出现这种情况并且有实时的自动保存;这就涉及到了session的过期时间问题; 当无法预计用户操作页面的时间时就用到了session永不过期 代码如下: script src="js/Jquery1.7.j...
标签: Web开发
最近在看jQuery,就在实际项目里加了个小的应用,当时的想法就是点击一个链接跳转到另个页面时,页面是逐渐显示出来,也就是由透明到实体的一个过程! 说下思路吧,在body里用一个div把所有的标签包含住,在此div后再定义一个div,后面这个div是用来实现渐显效果的。 如下所示: Code highlighting produced by Actipro CodeHighlighter (...

经验教程

907

收藏

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