PHP实现简单ajax Loading加载功能示例

本文实例讲述了PHP实现简单ajax Loading加载功能。分享给大家供大家参考，具体如下：

var xmlHttp;
function createXmlHttpReq() {
  if(window.ActiveXObject) {
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
  } else if(window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
}
function funMy(url) {
  createXmlHttpReq();
  try {
    xmlHttp.onreadystatechange = cb;//一定要在open()前,下边会有说明。在此处犯错了
    xmlHttp.open("GET","for.php?id="+url,true);
    xmlHttp.send(null);
  } catch(e) {
    alert("您访问的资源不存在");
  }
}
//回调函数
function cb() {
  if(xmlHttp.readyState==1) {
    alert("1-------------->");
    //在Google Chrome 浏览器里不显示loading图片，三秒后显示内容,问题已解决，下边有说明
    document.getElementById('ajax').innerHTML = "<img src=loading2.gif>";
    //document.getElementById('ajax').innerHTML = "Loading......";
  }
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      var data = xmlHttp.responseText;
      document.getElementById('ajax').innerHTML = data;
  }
}

测试的时候，被 Chrome 给绊着了。请看下边解释：

这样写本来就不会接到.readyState==1的回应

因为1是表示已经调用.open()完成

但是.open()在.onreadystatechange事件前就被调用了,所以你应该不可能接到.readyState==1的回应

故,想接到.readyState==1 =>.onreadystatechange必须在.open()之前
那么为什么有时候接到呢?

因为你使用同一个全局变量...在连续操作时有可能会因为一个xhr请求还在等候php而又将它再次初始化引发

应该先决定数据的处理方式onreadystatechange,在送出要处理的数据open()

更多关于PHP相关内容感兴趣的读者可查看本站专题：《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

赞 (0)

相关推荐

  • PHP通过反射动态加载第三方类和获得类源码的实例

    使用反射动态加载第三方类 用反射加载第三方类用处在于: 使用XML或其他配文件配置要加载的类,从而和系统源代码分离. 对加载的类进行类检查,是加载的类符合自己定义的结构. <?php abstract class Module { #核心Module类库 function baseFunc() { echo "I am baseFunc"; } abstract function execute(); } class ModuleRunner { private $configD

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • PHP+jQuery实现滚屏无刷新动态加载数据功能详解

    本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • jQuery实现页面滚动时动态加载内容的方法

    本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).hei

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • JQuery页面随滚动条动态加载效果的简单实现(推荐)

    Google阅读器上有一个AJAX scollLoad效果很不错,就是阅读项目时不需要翻页,浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来,一直到所有项目加载完为止.要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有什么意义.我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据.至于浏览数据,尤其是浏览最新的数据,利用浏览器滚动条来加载,是很好的尝试-- 我试着用jquery来实现这个功能.先要得到滚动条的总长属性值:scrollHeight

  • jQuery+PHP+ajax实现微博加载更多内容列表功能

    在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

  • php+ajax+jquery实现点击加载更多内容

    我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

  • 使用PHP+AJAX让WordPress动态加载文章的教程

    为什么要动态加载文章? 1. 快速向访客展示页面 文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的. 2. 让文章列表化 使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长. 为什么不动态加载文章? 1. 对搜索引擎不友好 搜索引擎

  • PHP实现简单ajax Loading加载功能示例

    本文实例讲述了PHP实现简单ajax Loading加载功能.分享给大家供大家参考,具体如下: var xmlHttp; function createXmlHttpReq() { if(window.ActiveXObject) { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); } else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function fu

  • 微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】

    本文实例讲述了微信小程序实现上拉加载功能.分享给大家供大家参考,具体如下: 开发需求 进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml <!-- 数据列表 --> <view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</

  • 基于angular6.0实现的一个组件懒加载功能示例

    我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪.又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能.或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间.一切都在用户不知不觉中进行.大大增加用户体验,

  • Ajax动态加载数据库示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • Ajax全局加载框(Loading效果)的配置

    在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 实现原理: Jquery可以对ajax进行全局的设置,实现类似于C#中面向切面的效果,即对在Ajax提交之前和提交完成之后,我们均可以对其进行一系列的操作,所以我们可以在ajax开始的时候,把Loading框显示出来,在ajax请求完成之后,把loading框关闭掉,基本上就完美实现这个效果了. Jquery全局配置Ajax的方式为: $.ajaxS

  • PHP实现的简单路由和类自动加载功能

    本文实例讲述了PHP实现的简单路由和类自动加载功能.分享给大家供大家参考,具体如下: 项目目录如下 入口文件index.php <?php define('WEBROOT', 'C:/Users/Administrator/Documents/NetBeansProjects/test'); require_once(WEBROOT.'/core/environment.php'); core__app::run(); // 类自动加载文件environment.php <?php //根据类

  • Laravel 简单实现Ajax滚动加载示例

    开发H5项目的时候我们总是需要用到下拉滚动刷新的方式加载页面.这里用 Laravel 实现一下,直接上代码: 创建模型 这里我们不妨创建一个 文章(Post)模型, 并且生成测试数据 50 条吧. php artisan make:model -m 模型Post.php namespace App; use Illuminate\Database\Eloquent\Model; class Post extends Model { public $fillable = ['title','des

  • 使用MUI框架模拟手机端的下拉刷新和上拉加载功能

    mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET.POST请求方式,支持返回json.xml.html.text.script数据类型: 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get().mui.getJSON().mui.post()三个方法. 套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框

  • MUI 上拉刷新/下拉加载功能实例代码

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/ <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> &l

  • jquery ajax局部加载方法详解(实现代码)

    在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

随机推荐