Ajax实现页面loading效果!

花样花时的年纪

花样花时的年纪

2016-02-19 16:58

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

//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();
}
}

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

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://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

Ajax实现页面loading效果!

Web开发
Ajax实现页面loading效果!

Ajax实现页面loading效果

Web开发
Ajax实现页面loading效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Ajax loading gif generator

Web开发
Ajax loading gif generator

不用组件实现Ajax效果

Web开发
不用组件实现Ajax效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

javascript实现页面淡出效果

Web开发
javascript实现页面淡出效果

不用组件实现Ajax效果.(2)

Web开发
不用组件实现Ajax效果.(2)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows窗体控件开发示例:扩展TreeView

Windows窗体控件开发示例:扩展TreeView

IE6下DIV高度显示的Bug

IE6下DIV高度显示的Bug
下拉加载更多内容 ↓