无刷新显示即时更新数据两例

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量1.5k 收藏
点赞数
分类专栏： DHTML Javascript CSS 文章标签： javascript url function html iframe

无刷新显示即时更新数据两例  
　　因最近做网站需要用到无刷新数据，所以在网上查了一些资料，无刷新数据的实现无外乎用javascript或xmlhttp或iframe来实现。在网上找到一代码不是不能用就是效率太低，有的甚至使我的CPU达到100%，我根据网上的代码及查阅了一些资料，提供以下两例无刷新数据的例子，保证完全无错！

例一：
example1.htm
-------------------------------------
<html>
<head>
<title>无刷新</title>

<script   language="JavaScript"   type="text/javascript">
function   GetData(url)
{
                url="example1.asp";//调用页面
                try
                {
                                DataLoad.src   =   url;
                }
                catch(e)
                {
                return   false;
                }
                {
                var   timeoutid   =   setTimeout("GetData()",1000)
                }
}
</script>
<script   id="DataLoad"   language="JavaScript"   type="text/javascript"   defer></script>

<body     onLoad="javascript:GetData();">
<span   id=loadcontent>数据载入中……</span>
</body>
-------------------------------------
数据调用程序：example1.asp
--------------------------------------
loadcontent.innerHTML="<%=now()%>"

例二：
example2.htm
-------------------------------------
<HTML>
<head>
<title>无刷新</title>

<script   language="javascript">
function   GetData()
{
url="example2.asp";//调用页面

  var   http   =   new   ActiveXObject("Microsoft.XMLHTTP");
  http.open("GET",url,false);
  http.send();
  var   str   =   http.responseText;
  loadcontent.innerHTML=str;
  setTimeout("GetData()",1000);
}
</script>

</head>
<BODY   οnlοad="javascript:GetData();">
<span   id="loadcontent">数据载入中……</span>
</BODY>
</HTML>
-------------------------
数据调用程序:example2.asp
---------------------------
<%=now%>
--------------------------- 

cui55
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
数仓体系与数据治理全集
weixin_44687655的博客
04-06 3122
数据仓库（Data Warehouse），可简写为DW或DWH。数据仓库，是为企业所有级别的决策制定过程，提供所有类型数据支持的战略集合。它出于分析性报告和决策支持目的而创建。
Ajax添加数据即时显示信息篇
10-28
在本教程中，我们将探讨如何利用Ajax实现向服务器数据库添加数据，并即时在网页上显示这些新添加的信息，而无需刷新页面。 首先，我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象，它允许JavaScript在...
asp mysql 更新数据,无刷新显示即时更新数据两例-ASP教程,数据库相关
weixin_32486581的博客
04-01 293
因最近做网站需要用到无刷新数据，所以在网上查了一些资料，无刷新数据的实现无外乎用javascript或xmlhttp或iframe来实现。在网上找到一代码不是不能用就是效率太低，有的甚至使我的cpu达到100%，我根据网上的代码及查阅了一些资料，提供以下两例无刷新数据的例子，保证完全无错！例一：example1.htm————————————-无刷新function getdata(url){ur...
python中plot实现即时数据动态显示方法
木牛的博客
09-30 1万+
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/u013468614/article/details/58689735 python中plot实现即时数据动态显示方法 在Matlab使用Plot函数实现数据动态显示方法总结中介绍了两种实现即时数据动态显示的方法。考虑到使用python的人...
耗时n年，38页《数据仓库知识体系.pdf》（数据岗位必备）
热门推荐
独木不成林，单弦不成音。
10-07 47万+
拥有本篇文章，意味着你拥有一本完善的书籍，本篇文章整理了数据仓库领域，几乎所有的知识点。
jQuery无刷新聊天室一例[分析]
wust_star的专栏
06-09 3694
Wust_star说： 这是个很简单的聊天室，两个页面就搞定了，可以参考！毕竟我刚开始学Ajax; 还要要包含一个jquery.js文件，不然运行不出来。 我先说一下实现的整体思路，然后是详细的源代码---- 首先客户端是两处Ajax请求--- (1)是发生在客户点击"发送"后的，把聊天信息提交到后台处理 (2)是没4s就自动请求一下后台，并看有没有新的内容，如有就更新聊天框
❤️ 爆肝三万字《数据仓库体系》轻松拿下字节offer ❤️【建议收藏】
独木不成林，单弦不成音。
09-12 2万+
尤其适合大学生 和 初级程序员掌握的体系内容，资深程序员也可夯实基础
数据可视化
Weightlessly的博客
06-17 1万+
数据可视化笔记
数据仓库基础信息
qq_45450889的博客
04-26 793
数据存储架构数据处理工具聚焦如何把数据搬到湖里关注如何对湖中的数据进行分析、挖掘、利用数据湖和数据仓库的对比。
Greenplum 实时数据仓库实践（1）——数据仓库简介
wzy0623的专栏
11-05 6004
对于每一种技术，先要理解相关的概念和它之所以出现的原因，这对于我们继续深入学习其技术细节大有裨益。实时数据仓库首先是个数据仓库，只是它优先考虑数据的时效性问题。因此本篇开头将介绍业界公认的数据仓库定义，它和操作型数据库应用的区别，以及为什么我们需要数据仓库。 在对数据仓库的概念有了基本的认识后，有必要单独说明一下ETL这个最重要的过程，然后向读者介绍四种常见的数据仓库架构。本篇最后描述实时数据仓库的产生背景、特定需求和使用场景，并列举一些常见的实时数据仓库技术架构。 1.1...
个人支付宝即时到账支付系统
04-03
这个系统提供了两种通知方式，同步和异步，以确保商家能够及时准确地接收到用户的支付状态。 同步通知是用户体验的一部分。当用户扫描二维码完成支付后，系统会自动执行一个操作，通常是将浏览器重定向到商家预先...
php注册系统和使用Xajax即时验证用户名是否被占用
12-19
// 根据response处理结果，比如更新按钮状态和显示提示信息 } xajax.registerCallback(checkResult); ``` 这个例子展示了如何结合PHP、Xajax和JavaScript创建一个实时验证用户名的注册系统。通过使用Xajax，...
数据透视表SQL语句入门
05-06
6、 当更改B1和B2单元格的内容（做个数据有效性）时，A3及以下的数据会即时刷新。 此法对于需要经常在局域网中查询数据非常方便，比如：数据放在局域网内的一台主机上，通过MS Query即可不打开工作簿查询数据。
Vc++对数据库的动态刷新和多表切换
06-26
"Vc++对数据库的动态刷新和多表切换"这一主题，主要涵盖了两个关键点：一是如何利用Vc++实现数据库数据的实时更新，二是如何在多个数据表之间灵活切换。以下是对这两个知识点的详细说明。 1. 数据库动态刷新： 在...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1227
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 374
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 1085
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 181
【代码】vue el-select的下拉树形结构。
swiperefreshlayout上拉刷新加载数据更新数据
05-16
SwipeRefreshLayout 是一个 Android 支持库中提供的下拉刷新控件，可以实现下拉刷新数据的功能。如果需要实现上拉加载更多数据的功能，可以结合 RecyclerView 或 ListView 等列表控件使用，利用它们的滑动监听事件来实现上拉加载更多数据的功能。 具体实现步骤如下： 1. 在布局文件中添加 SwipeRefreshLayout 和 RecyclerView 或 ListView 控件。 2. 在 Activity 或 Fragment 中获取 SwipeRefreshLayout 和 RecyclerView 或 ListView 控件的引用。 3. 设置 SwipeRefreshLayout 的刷新监听事件，在 onRefresh() 方法中更新数据并通知列表控件刷新数据。 4. 设置 RecyclerView 或 ListView 的滑动监听事件，在 onScrollStateChanged() 方法中判断是否滑动到底部，如果是，则加载更多数据并通知列表控件更新数据。 示例代码如下： ``` // 布局文件 <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swipe_refresh_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> // Activity 或 Fragment private SwipeRefreshLayout mSwipeRefreshLayout; private RecyclerView mRecyclerView; private MyAdapter mAdapter; private List<MyData> mDataList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mSwipeRefreshLayout = findViewById(R.id.swipe_refresh_layout); mRecyclerView = findViewById(R.id.recycler_view); // 初始化数据 mDataList = new ArrayList<>(); mAdapter = new MyAdapter(mDataList); mRecyclerView.setAdapter(mAdapter); // 设置 SwipeRefreshLayout 的刷新监听事件 mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { // 更新数据并通知列表控件刷新数据 mDataList.clear(); loadData(); mAdapter.notifyDataSetChanged(); mSwipeRefreshLayout.setRefreshing(false); } }); // 设置 RecyclerView 的滑动监听事件 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); if (newState == RecyclerView.SCROLL_STATE_IDLE) { LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager(); // 判断是否滑动到底部 if (layoutManager.findLastVisibleItemPosition() == mAdapter.getItemCount() - 1) { // 加载更多数据并通知列表控件更新数据 loadMoreData(); mAdapter.notifyDataSetChanged(); } } } }); // 加载数据 loadData(); } // 加载数据 private void loadData() { // TODO: 加载数据 } // 加载更多数据 private void loadMoreData() { // TODO: 加载更多数据 } ``` 注意：在加载更多数据时，应该避免重复加载，可以设置一个标志位来判断是否正在加载中，避免重复加载数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值