Ajax实现页面loading效果

意難忘忆難忘

意難忘忆難忘

2016-02-19 15:33

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享Ajax实现页面loading效果,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
//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

//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刺客新符文搭配推荐

Tomcat下使用Jfreechart 简单例子(servlet)

Tomcat下使用Jfreechart 简单例子(servlet)

基于ajax异步请求的实现

基于ajax异步请求的实现
下拉加载更多内容 ↓