文档章节

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

阿采
 阿采
发布于 2015/12/03 09:33
字数 767
阅读 87
收藏 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
【物联网智能网关-13】Html5:Canvas+WebSocket实现远程实时通信(上)

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

yefanqiu
2012/11/22
0
0
iOS8以后使用WKWebView替换UIWebView

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

-Man
2016/10/27
271
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部