文档章节

网页多个对象动态刷新的实现

阿采
 阿采
发布于 2015/12/03 09:33
字数 767
阅读 88
收藏 1

需求:

有一个网页,网页上内容较多,网页动态定义好的一批元素的value对应了一批url,需要根据这批url获取返回数据,动态刷新当前网页url各自对应的一个span的显示值,实时告诉用户各个url对应的状态。

实现思路:

首先是考虑在页面加载完成之后自动触发一个js方法,在js方法里动态获取这批url的值,使用xmlhttprequest对象发送请求,获取response之后再赋值给span对象显示。

遇到的问题:

  1. url和js所在网页不同域,无法获取到。

    此问题后来通过服务端增加一个网页(例如 1.php)来解决,此网页做中转,js中xmlhttprequest对象发送请求到此网页,将url做参数传入,此网页获取到url参数值则去访问对应url,并获取到返回值,将此返回值在当前网页显示,则js中可以获取到此返回值。

  2. js中可以循环从当前页面获取到url并发送到1.php,但是在循环里通过xmlhttp对象获取response的时候会卡死,也就是onreadystatechange这方法并没有实时异步的处理,体现在网页上就是开始执行js方法之后就卡死了页面,无法响应其他处理。(Chrome/IE均有这个问题,Firefox却没问题)

    此问题解决方法是不将xmlhttp.open("GET",jenkinsurl,false);改为 xmlhttp.open("GET",jenkinsurl,true); 此改动可以解决卡死的问题,但是功能却受到了影响,最终发现无法正确的刷新页面。(所有浏览器都不能正常显示,最终发现是循环执行太快,循环里使用的动态变量i和最后获取到响应onreadystatechange里设计上意图使用的i的值完全不一样,所以赋值第一次执行的时候,本来以为是赋值给第一个对象,最终却发现i已经是最后一个对象值+1了。

    为解决此问题看了几篇文章:http://www.phpweblog.net/rainman/archive/2009/01/05/6267.html;http://www.phpv.net/html/1700.html

  3. 如何动态的,异步的,不影响浏览器响应的实时刷新页面?

       此问题解决需要用到setTimeout方法。将创建xmlhttprequest发送url并获取response结果赋值给网页对象的过程定义成一个函数gethtml(i),传入参数为i,通过这个i可以获取到第i个url和第i个网页需要赋值的对象。然后再定义如下递归函数:

var i=0;

function al()

{   

   i++;

   if(i<document.getElementById("mynum").value+1) setTimeout(function(){gethtml(i);al()},100);

}

在window.onload的时候去调用此al函数,则每隔100毫秒就会执行一次gethtml(i)函数,直到将当前网页需要赋值的全部赋值。





© 著作权归作者所有

共有 人打赏支持
阿采
粉丝 4
博文 40
码字总数 20837
作品 0
浦东
后端工程师
私信 提问
CSS中behavior属性语法

本文和大家重点讨论一下CSS中behavior属性语法的使用,在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,CSS中的behavior就...

飛飛飛jjs
2016/11/30
0
0
走在网页游戏开发的路上(六)

本文转自吴秦博客园博客,原文链接:http://www.cnblogs.com/skynet/archive/2011/06/11/2078554.html,如需转载请自行联系原作者Flash动画原理 ——动画是将静止的画面变为动态的艺术.实现...

老朱教授
2017/11/26
0
0
使用WKWebView替换UIWebView(转自简书)

iOS8以后,苹果推出了新框架,提供了替换的组件。各种的问题没有了,速度更快了,占用内存少了,一句话,是App内部加载网页的最佳选择! 先看下 的特性: 在性能、稳定性、功能方面有很大提升...

biyu6
2016/07/14
35
0
Python全栈 Web(基于Flask框架的完整项目、项目搭建)

个人博客项目 前端模板目录结构 将动态网页放在templates模板目录中 将静态文件以及静态页面放在static目录中 项目的整体效果 搭建后端Flask项目 数据库的建模 初始化数据库 1 创建项目数据库...

巴黎香榭
2018/10/11
0
0
【物联网智能网关-13】Html5:Canvas+WebSocket实现远程实时通信(上)

在上一篇博文《网关为核心,互联网为基础构建物联网平台》中简要介绍了基于.NET Micro Framework如何构建Web Server应用,本篇文章将基于Html5的Canvas和WebSocket技术详细介绍远程实时通信的...

yefanqiu
2012/11/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
1
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部