文档章节

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

阿采
 阿采
发布于 2015/12/03 09:33
字数 767
阅读 85
收藏 1
点赞 0
评论 0

需求:

有一个网页,网页上内容较多,网页动态定义好的一批元素的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
博文 28
码字总数 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
BigPipe:高性能的“流水线技术”网页

原文地址:http://www.facebook.com/note.php?noteid=389414033919 译文地址:http://isd.tencent.com/?p=2419 作者:蒋长浩 Facebook的网站速度做为最关键的公司任务之一。在2009年,我们成...

晨曦之光
2012/03/09
111
0
浅谈移动端页面无刷新跳转问题的解决方案

浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘 最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,...

祈澈姑娘
2017/12/22
0
0
Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题。 这是一个典型的 B/S 模式。 PS. B/S结构(Browser/Ser...

梁音
06/19
0
0
利用 Jython 与 Ajax 技术构建一个简单的 Web 应用程序

Ajax 是现如今构建互动性强,更为动态的 Web 应用程序的必备技术。而 Jython 是 Python 语言的纯 Java 实现,它结合了二者的优势,使用它可以作为服务器端的实现。本文以一个典型的用户注册应...

红薯
2011/01/16
1K
4
parky/domTemplate

domTemplate.js 一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎。彻底实现前后端分离,让后端专注业务的处理。 ####Demo http://parky18....

parky
2016/06/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TextView设置行间距、字体间距

一、设置行间距 1、设置行间距:android:lineSpacingExtra,取值范围:正数、负数和0,正数表示增加相应的大小,负数表示减少相应的大小,0表示无变化 2、设置行间距的倍数:android:lineSpa...

王先森oO
4分钟前
0
0
适配器模式

适配器模式(Adapter):将一个类的接口转换成客户端希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 适配器用于连接两种不同种类的对象,使其毫...

阿元
4分钟前
0
0
CoreText进阶(四)-文字行数限制和显示更多

CoreText进阶(四)-文字行数限制和显示更多 用例和效果 Demo:CoreTextDemo 效果图: 默认的截断标识和自定义的截断标识符效果图  点击查看更多之后的效果图  为了可以设置显示的行数以...

aron1992
7分钟前
0
0
nginx的五种负载算法

nginx的五种负载算法 2017年04月26日 15:01:11 阅读数:1297 1.round robin(默认) 轮询方式,依次将请求分配到各个后台服务器中,默认的负载均衡方式。 适用于后台机器性能一致的情况。 挂...

linjin200
9分钟前
0
0
Android RecyclerView快速上手

RecyclerView mainMenu = findViewById(R.id.fragmentMain); mainMenu.setLayoutManager(new GridLayoutManager(getActivity(),4)); mainMenu.setAdapter(new MainAdapter......

燕归南
11分钟前
0
0
RabbitMQ实战:理解消息通信 

应用RabbitMQ的5种队列 一、简单队列 P:消息的生产者 C:消息的消费者 红色:队列 简单队列的生产者和消费者关系一对一 但有时我们的需求,需要一个生产者,对应多个消费者,那就可以采用第...

spinachgit
12分钟前
0
0
Linux的使用技巧:到底要不要会用?[图]

Linux的使用技巧:到底要不要会用?[图] 最近有个项目接近了尾声,要进入到调试测试阶段。这是一个使用Springboot框架为后台程序,mpvue构建的小程序项目。服务器我最终仍旧选择了Linux操作系...

原创小博客
13分钟前
0
0
记elasticdump 备份数据导出导入

版本: elasticsearch 5.5.2 elasticdump 2.2 系统 CentOS7.3 因项目需求 从生产导出一份索引到测试 帮助文档 https://github.com/taskrabbit/elasticsearch-dump?utm_source=dbweekly&utm_m......

雁南飞丶
14分钟前
0
0
saltstack配置目录管理

1.服务端配置 -接着编辑之前的 top.sls 文件 #vim /srv/salt/top.sls //修改为如下 base: 'slaver.test.com': - filedir -新建 filedir.sls 文件 # vim /srv/salt/filedir.sls file-dir: fi......

硅谷课堂
14分钟前
0
0
python日期时间

日期和时间 Python内建的datetime模块提供了datetime、date和time类型。datetime类型结合了date和time,是最常使用的: In [102]: from datetime import datetime, date, timeIn [103]:...

火力全開
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部