文档章节

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

阿采
 阿采
发布于 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
Python全栈 Web(基于Flask框架的完整项目、项目搭建)

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

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

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

yefanqiu
2012/11/22
0
0
使用WKWebView替换UIWebView(转自简书)

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

biyu6
2016/07/14
35
0

没有更多内容

加载失败,请刷新页面

加载更多

3分钟总结Mybatis别名

1.系统内置别名: 把类型全小写(resultType/paramType) 2.给某个类起别名 2.1 alias=”自定义” <typeAliases> <typeAlias type="com.bjsxt.pojo.People" alias="peo"/> </typeAli......

KingFightingAn
昨天
1
0
JAVA设计模式之模板方法模式和建造者模式

一、前期回顾 上一篇《Java 设计模式之工厂方法模式与抽象工厂模式》介绍了三种工厂模式,分别是工厂方法模式,简单工厂方法模式,抽象工厂模式,文中详细根据实际场景介绍了三种模式的定义,...

木木匠
昨天
7
0
C中的宏的使用(宏嵌套/宏展开/可变参数宏)

基本原则: 在展开当前宏函数时,如果形参有#或##则不进行宏参数的展开,否则先展开宏参数,再展开当前宏。 #是在定义两边加上双引号 #define _TOSTR(s) #sprintf(_TOSTR(test ABC))pr...

SamXIAO
昨天
4
0
SpringBoot 整合异步调用方法

1. 在 SpringBoot 主类上使用 @EnableAsync 注解,开启异步调用功能 package com.codingos.springbootdemo;import org.springframework.boot.SpringApplication;import org.springfra......

北漂的我
昨天
3
0
0015-如何使用Sentry管理Hive外部表权限

1.文档编写目的 本文档主要讲述如何使用Sentry对Hive外部表权限管理,并基于以下假设: 1.操作系统版本:RedHat6.5 2.CM版本:CM 5.11.1 3.集群已启用Kerberos和Sentry 4.采用具有sudo权限的...

Hadoop实操
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部