`

Ajax实现首页界面先加载页面然后再更新上面的超载率相关数据(防止页面加载过慢的问题出现)(异步数据更新)

阅读更多
日常开发中常常会遇到页面加载特别慢的问题,大多数情况都是后台的数据查询或数据处理比较慢导致的,比较常见的解决办法是先将页面加载出来,页面上的数据先设置成默认,页面出来之后采用ajax实现页面的异步数据更新同步,下面是这样的一个使用示例:

main.jsp里面添加的js(ajax)代码:
/*首页加载之后自动更新首页超载率数据*/
 /*第一次读取最新通知(超载率数据)*/
 setTimeout(function() {
             Push();
           },
        100);
 /*3个小时轮询读取函数,3个小时自动更新一次界面数据*/
 setInterval(function() {

            Push();

    },
        1000*60*60*3);
 function Push() {
    $.ajax({
        type: "POST",
        url: "indexRateList.do",
        // 请求参数为空,不需要带参数
        data: {
            
        },
        beforeSend: function() {},
        success: function(data) {
            var obj = eval("("+data+")");
            // data为ajax请求返回结果数据
            // alert(obj.overrate4);
            // alert(obj.sixin);
            /*定位到id为overrate的元素,规定其显示内容为"本周:"+obj.overrate,并调用show()方法将其显示出来*/
            $("#overrate").html("本周:"+obj.overrate).show();
            $("#overrate1").html("本季:"+obj.overrate1).show();
            $("#overrate2").html(obj.overrate2).show();
            $("#overrate3").html("本月:"+obj.overrate3).show();
            $("#overrate4").html(obj.overrate4).show();
            //if (obj.overrate != null && obj.overrate != '') {
                ////定位到overrate标签
                //$("overrate").html(obj.overrate).show();
            //}
            //if (obj.sixin != 0) {
                //$(".tongzhi").html(obj.sixin).show();
            //} else {
                //$(".tongzhi").html(0).hide();

            //}
        }


    });
    }


main.jsp里面使用上述代码的元素代码(rateList是刚加载页面时的默认数据,可以在后台设置成0或是什么的,不需要从库里查询,以减少页面加载时间,这些数据在页面加载之后都会由ajax异步重新更新的):
				<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
						<tr>
								<th height="29" colspan="2" scope="col" class="txtLeft">超载率统计:</th>
								</tr>
						<tr>
								<td width="48%" height="25"><span class="txtLeft" >当天:</span><span class="red" id="overrate2">${rateList[2] }</span><span class="txtLeft"><br />
								</span></td>
								<td width="52%"><span class="txtLeft" id="overrate">本周:${rateList[0] }</span></td>
						</tr>
						<tr>
								<td height="25"><span class="txtLeft" id="overrate3">本月:${rateList[3] }</span></td>
								<td><span class="txtLeft" id="overrate1">本季:${rateList[1] }</span></td>
						</tr>
						<tr>
								<td height="25"><span class="txtLeft">本年:</span><span class="blue" id="overrate4">${rateList[4] }</span></td>
								<td>&nbsp;</td>
						</tr>
				</table>

下面是请求indexRateList.do对应的java代码:
	/**
	 * 根据当前用户所在区域获取各类超载率
	 * 方法: indexRateList <br>
	 * 描述: TODO <br>
	 * 作者: 
	 * 时间: Dec 24, 2013 11:31:34 AM
	 * @return
	 */
	public void indexRateList(){
		StringBuffer json = new StringBuffer("{");
		try {
			UserInfo userInfo = (UserInfo) ServletActionContext.getRequest().getSession().getAttribute("login");
			try {
				String orgCode = userInfo.getOrgcode();
				String overrate = reportManager.queryAllTypeoverRunRate(orgCode, "0") ;
				String overrate1 = reportManager.queryAllTypeoverRunRate(orgCode, "1");
				String overrate2 = reportManager.queryAllTypeoverRunRate(orgCode, "2");
				String overrate3 = reportManager.queryAllTypeoverRunRate(orgCode, "3");
				String overrate4 = reportManager.queryAllTypeoverRunRate(orgCode, "4");
				overrate  = "0".equals(overrate)  || overrate == null ? "0" : overrate  + "%";
				overrate1 = "0".equals(overrate1) || overrate1 == null ? "0" : overrate1 + "%";
				overrate2 = "0".equals(overrate2) || overrate2 == null ? "0" : overrate2 + "%";
				overrate3 = "0".equals(overrate3) || overrate3 == null ? "0" : overrate3 + "%";
				overrate4 = "0".equals(overrate4) || overrate4 == null ? "0" : overrate4 + "%";
				
				json.append("'overrate':'" + overrate.trim() + "',");
				json.append("'overrate1':'" + overrate1.trim() + "',");
				json.append("'overrate2':'" + overrate2.trim() + "',");
				json.append("'overrate3':'" + overrate3.trim() + "',");
				json.append("'overrate4':'" + overrate4.trim() + "'}");
				this.getResponse().getWriter().write(json.toString());
				
			} catch (Exception e) {
				e.printStackTrace();
			}
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}



下面是涉及到的一些问题:
1、js里面的eval函数的用法:
http://www.cnblogs.com/agloat/archive/2008/05/09/1190468.html

2、jQuery里面的show()、html()、hide()几个方法的用法:
http://blog.csdn.net/lansky07/article/details/3392404
http://www.w3school.com.cn/jquery/manipulation_html.asp

3、html中对$('#wait_pls').show();的一些解释:
$是jquery封装javascript后的一个对象,相当于js中的window。$()则是一个选择器,里面写不同的表达式,可以获得不同的html元素,获取不到则是undefind,例如$('#wait_pls')就是定位html里面id为wait_pls的元素,获取id为wait_pls的对象;$('wait_pls')就是定位到html里面的wait_pls标签。
show()是jquery中动态中的一个方法,调用这个方法则会使该HTML元素变为显示状态,相当于将其的DISPLAY属性改为block。show()是jquery自带的方法,是将查找出的对象显示出来,如果对象为隐藏的,则将其显示出来;如果该对象为显示对象,则无任何效果。


这里实现的效果和“ajax实现jsp页面无刷新数据更新”功能非常类似,自己可上google查询这个功能的实现。
分享到:
评论

相关推荐

    ajax实现页面内部模块更新

    **Ajax 实现页面内部模块更新** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过JavaScript与服务器进行异步数据交换,使用户可以与网页进行交互,...

    使用Ajax实现页面表格添删改查的异步刷新操作

    "使用Ajax实现页面表格添删改查的异步刷新操作"是一个实用的技术实现,它允许用户在不刷新整个页面的情况下更新表格内容,从而提高页面响应速度和用户体验。 首先,我们需要理解AJAX的基本原理。AJAX通过JavaScript...

    H5移动端上滑加载,带ajax异步请求后台数据,拿来即用

    这种功能通常与Ajax异步请求后台数据相结合,实现无缝的数据加载。 一、H5移动端上滑加载原理 H5移动端上滑加载的核心在于监听用户的滚动事件,当用户滚动到页面底部时,触发一个函数,该函数通过Ajax发送请求至...

    异步数据加载时,所用的等待组件,JS源码,类似于UI Block

    "UI Block"在这里意味着它会暂时禁用用户界面,防止用户在数据更新过程中误操作。这种设计思路是用户体验设计的重要组成部分,因为它能创建出流畅、一致的交互体验。 在描述中提到,这个组件是针对AJAX...

    dtree+ajax异步加载树

    当dtree与Ajax结合时,可以实现异步加载树节点,提升用户体验,减少页面加载时间。 ### dtree基础知识 1. **dtree基本结构**:dtree通过JSON数据格式来构建树形结构。每个节点包含`id`(唯一标识)、`text`(显示...

    jquery 异步加载页面

    jQuery中的核心方法`$.ajax()`是实现异步加载的关键。这个函数可以发送AJAX(Asynchronous JavaScript and XML)请求,尽管现在XML用得较少,但名称保留了下来。通过设置不同的参数,我们可以定制请求的类型、URL、...

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先,C#是一种面向对象的编程语言,广泛应用于...

    jquery异步加载页面

    在jQuery中,$.ajax()函数是实现异步加载的核心。它可以配置多个参数,如URL、类型(GET或POST)、数据、成功回调函数等。例如,我们可以创建一个函数来处理选项卡的点击事件,当用户切换到新的选项卡时,通过$.ajax...

    以AJAX方式加载图片=异步加载图片,先显示个图片的占位图片 此技术常见于漫画网站.zip

    AJAX(Asynchronous JavaScript and XML)的核心是利用JavaScript进行异步通信,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。 首先,当我们谈论异步加载图片时,通常会提及“占位图片”或...

    Echarts:基础折线图(含异步加载数据)

    接下来,我们谈谈如何实现异步加载数据。在某些情况下,数据可能来自服务器,不能一次性定义在配置项中。ECharts支持动态加载数据,这通常通过Ajax或Fetch等HTTP请求实现。例如,我们可以使用jQuery的`$.getJSON`来...

    java实现ztree异步加载

    在IT领域,尤其是在Web开发中,用户界面的交互性和数据加载效率是提升用户体验的关键因素。ZTree是一款基于JavaScript的树形插件,广泛应用于网站的目录结构展示、权限管理等场景。ZTree的一个显著特性是支持异步...

    Ajax JQ 滚动加载页面

    这种技术通过监听用户的滚动行为,当页面接近底部时,不刷新整个页面,而是通过Ajax异步请求后台数据,然后使用jQuery处理并动态添加到页面的现有内容下方,实现无缝加载的效果。 1. **Ajax技术**:Ajax是一种在...

    redis + ajax实现异步下拉列表加载

    "redis + ajax实现异步下拉列表加载"的主题聚焦于如何结合Redis内存数据库和Ajax技术来实现在网页中动态加载下拉列表内容。下面我们将详细探讨这两个关键技术和它们如何协同工作。 首先,Redis是一个开源的、基于...

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    在实现异步加载ECharts地图数据之前,需要进行一些准备工作: 1. 准备HTML页面,并引入ECharts、jQuery等所需的JavaScript库文件。在本例中,需要加载Echarts和中国地图js文件,以及jQuery库文件。 2. 在HTML页面...

    AJAX页面无刷新实现数据更新

    **AJAX页面无刷新实现数据更新** 在网页开发中,用户界面的实时性和交互性是提升用户体验的关键因素。AJAX(Asynchronous JavaScript and XML)技术就是为了解决这个问题而诞生的,它允许网页在不重新加载整个页面...

    HTML5 异步上拉加载Jquery ajax

    这种技术通常用于社交媒体、新闻网站或者有大量列表数据需要分页显示的应用中,能够提高用户体验,避免一次性加载大量数据导致的页面加载慢问题。 首先,我们需要理解HTML5中的关键特性,如`&lt;script&gt;`标签的`async`...

    jquery实现图片延迟加载和ajax方式加载页面.rar

    本资源“jquery实现图片延迟加载和ajax方式加载页面.rar”聚焦于两个核心概念:图片延迟加载(Lazy Loading)和Ajax页面加载。 **图片延迟加载**是一种优化网页性能的技术,它避免了一次性加载所有图片导致的页面...

    实现ajax加载更多功能

    6. **处理响应**:前端接收到服务器的响应后,JavaScript会解析返回的数据,然后将新数据动态插入到页面的适当位置,同时更新或隐藏“查看更多”按钮,以反映是否还有更多内容可加载。 7. **错误处理**:良好的Ajax...

    EasyuiTabs异步加载页面

    // 防止页面跳转,使用load方法异步加载内容 load: function(title, url){ $.ajax({ url: url, success: function(data){ // 将返回的数据填充到对应的标签页 $('#tt').tabs('update', { title: title, ...

    jquery实现图片延迟加载和ajax方式加载页面

    "jQuery实现图片延迟加载和Ajax方式加载页面"是一种优化策略,旨在解决页面加载速度慢的问题,特别是对于那些资源密集型的网站。 首先,让我们深入了解一下**图片延迟加载(Lazy Loading)**的概念。在传统的网页...

Global site tag (gtag.js) - Google Analytics