这个很简单,你PHP程序运行结束后可以echo出一段脚本比如:
创新互联建站主营济南网站建设的网络公司,主营网站建设方案,成都app软件开发,济南h5重庆小程序开发搭建,济南网站营销推广欢迎济南等地区企业咨询
echo "script language='javascript'fadeOut()/script";
然后html js脚本可以这么写:
div id="loading"
程序加载中,请稍等.....
(里面可以放你要的等待转圈的图片或者将其设置为背景图)
/div
script language='javascript'
function fadeOut(){
document.getElementById("loading").style.display="none";
}
/script
哎,楼上的真是误人子弟啊.....什么Ajax,javascript啊,明明就是一张图片,楼主如果有心,自己可以试试,等转圈的时候点击右键看看属性,原理也简单,提交后在等待响应,在等待的时候把提交的区域隐藏了,换成一张转圈的图片,等响应结果回来了,再让这个图片隐藏,把结果显示出来,就这么简单,Http是无状态的..你在网上看到的只不过是为了提高用户的体验的一个小技巧罢了
大家好,有些词儿,程序员之间虽然天天说,彼此之间心照不宣,但是在面对一些非技术的产品同学的时候,对方却不一定能一下子就get到点。这个系列的文章就是为了解决这种尴尬的,理想的效果是,只要一提起这些词儿,你脑海中就会出现一幅图或者一段精妙的解释,那我们就成功了。
今天Java培训班讲解的词儿是DOM,是程序员里面最基础、最常用的一个东西。它的全称是文档对象模型(DocumentObjectModel),光看名字太抽象,简单解释一下。我们知道,一个网页,其实就是一个html文件,经过浏览器的解析,最终呈现在用户面前。html语言我们也讲过,是由很多标签组成的,像这样:
里面的head、body就是标签。这些标签不是随意摆放的,他们有自己的规则。首先它们是嵌套的,一层套一层,比如html套body,body又套p标签。其次,每一层,可以同时存在很多标签,比如head和body就是一层的,他们被外面的html套着。这样的结构很像我们电脑里的文件夹,「我的电脑」是最外面的一层,里面套着CDEF盘,每个盘里又有很多文件夹,文件夹里又有文件夹,最后才是很多具体的文件。
为什么要按照这种结构来组织呢?其实就是方便解析和查询。解析的时候,从外到里,循序渐进,好比按照图纸盖房子,先盖围墙,再盖走廊,最后才是卧室。查询的时候,会有一条明确的路线,比如D盘--岛国文化交流--影视作品--苍老师.avi,这样一层一层的缩小范围,查找效率会非常高。
所以,浏览器在解析html文档的时候,会把每个标签抽象成代码里的对象,然后按照这种层次分明的结构组织起来,这就是文档对象模型,DOM了。画个图表示一下就是这样的:
这就是数据结构里典型的「树」了。所以大家经常说DOM树,其实是一个意思。浏览器在解析html的时候,会在它的内部构建这样一棵DOM树,然后按照这棵树上的层次顺序,依次来解析每个标签。标签解析完了,用户就看到了网页的内容。
但是,事情到这里还远远没有结束,因为还有javascript。浏览器解析完了html,然后就要开始解析html里的javascript代码了。我们知道,程序员可以通过javascript代码来实现一些动态的网页效果,比如去服务器拉取一段数据来展示,再比如说做一个酷炫的动画效果,这些,都还要用到DOM。
举个简单的例子,现在javascript想要在网页里显示一行字“thisisfromjavascript”。要做的第一步,就是找到那个可以显示文字的标签。这是非常容易的,因为浏览器已经把DOM都交给javascript了。DOM里的对象,正好就是javascript语言里的对象。于是,通过下面的方法,javascript可以修改DOM树上的标签对象。
随着前端知识的深入,你会发现javascript操纵DOM是非常普遍事情。比如很多网页,一开始加载出来只是个架子,只有一个loading在转圈,只有等javascript从服务器上请求到真正的数据之后,操纵DOM来显示数据,才能看到内容,这就是典型的异步加载。再比如html5的游戏,里面的人物要随着手势或鼠标来运动,多半也是javascript操纵DOM改变元素的位置来实现的。可以说,有了DOM,才使得javascript在前端世界里几乎无所不能。
但是,有一点要注意,就是操纵DOM本身是一件效率非常低的事情。因为一个网页往往是很复杂的,浏览器构造出来的DOM树往往也是很庞大的,有的甚至有几千个节点。在这样庞大的一棵树上,进行频繁的改动,对浏览器尤其是移动浏览器来说是一个不小的工作量,稍一不注意就卡了。
有人就发明了一种便捷的方法,叫虚拟DOM。简单来说就是用javascript又模拟了一棵简单的DOM树,然后所有的DOM操作都在这上面演练,这个效率是很高的。等时机成熟的时候,再把虚拟DOM树和真正的浏览器的DOM树做对比,算出差异,一次性的去改变真正的DOM树,这个效率也很高。经过这两个步骤,从整体上大大提高了javascript操纵DOM树的效率。