用XMLHttpRequst对象实现真实的网页加载进度

最新推荐文章于 2024-09-18 10:53:24 发布
原创 最新推荐文章于 2024-09-18 10:53:24 发布 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xmlhttprequest #function #div #url #服务器 #null

本文介绍了一种使用JavaScript实现的无刷新数据读取技术，通过定时请求指定URL并更新页面内容的方式，实现了动态获取远程数据的效果。文章详细展示了如何创建XMLHttpRequest对象，并通过设置回调函数来处理不同状态的响应。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<script type="text/javascript">
<!--
//3个用于实现无刷新数据读取的函数
var xmlHttp ;
//用来记录setTimeout返回值
var TimeoutId;
function createXMLHttpRequest() 
{
 if(window.ActiveXObject) 
 {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 else if(window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
 }
}

function startRequest() 
{
 createXMLHttpRequest();
 var url = "http://www.163.com";
 xmlHttp.onreadystatechange = handleStateChange;
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 TimeoutId=setTimeout("startRequest()",1000);
 //alert(TimeOutId);
}

function handleStateChange() 
{
 if(xmlHttp.readyState == 1) 
 {
  document.getElementById("msg").innerHTML = "正在连接服务器......";
 }
 else if(xmlHttp.readyState == 2) 
 {
  document.getElementById("msg").innerHTML = "正在加载信息......";
 }
 else if(xmlHttp.readyState==3)
 {
   document.getElementById("msg").innerHTML = "数据交互中，请稍后......";
 }
 else if(xmlHttp.readyState == 4) 
 {
  if(xmlHttp.status == 200) 
  {
   //document.getElementById("show").innerHTML = xmlHttp.responseText;
   document.getElementById("msg").innerHTML="加载完毕";
   document.clear();
   document.write(xmlHttp.responseText);
   location.reload();
  // document.getElementById("show").innerHTML = xmlHttp.responseText;
  //停止执行setTimeout()
   clearTimeout(TimeoutId);
  }
  else
  {
   document.getElementById("msg").innerHTML = "数据读取失败，请稍后再试......";
  }
 } 

}
//-->
</script>
<body onload="startRequest();">
<div id="msg">
</div>
<div id="show">
</div>
</body> 
 
你真的会使用XMLHttpRequest吗？
weixin_33885676的博客
01-17 3777
看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决定认真阅读一遍W3C的X...
[Javascript]XMLHttpRequest对象实现下载进度条
weixin_34099526的博客
04-11 586
摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text". response属性的值会根据responseType属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document...
学习XMLHttpRequst对象
宁静以致远,淡泊以明志
10-09 1791
一：例子 aaron.htmvar bloglist=new Array(); var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); function startload(){ xmlHttp.open("GET", "http://blog.youkuaiyun.com/aaronbai/Rss.aspx", true); xmlHttp.onreadysta
js 文件上传进度条
weixin_34081595的博客
04-22 139
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;XMLHttpRequest上传文件进度实现&lt;/title&gt; &lt;script type="text/javascript"&gt;
简单好用的ajax进度条（xmlhttp)，实现的是真正的进度
aimcode
10-20 1290
来源: http://wen.jianbao.blog.163.com/blog/static/410614        近日一个项目需要用到多级下拉列表，所以花了一点时间做了一个xmlhttp下载数据的javascript类。        还顺手完成了一个进度条。根据readystate来计算的，不是虚拟的进度，不过速度快的话可能看不到效果。        代码如下：
XMLHttpRequest
Jessieeeeeee的博客
02-18 3324
XMLHttpRequest XMLHttpRequest 对象用于在后台与服务器交换数据。 XMLHttpRequest 对象是开发者的梦想，因为能够： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 XMLHttpRequest 对象 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出...
AJAX中文教程 CHM版：深入浅出网页开发技术
在JavaScript中，除了XMLHttpRequest外，还可以使用Promise、async/await等现代JavaScript特性实现异步编程，它们使异步代码的书写和管理变得更加容易和清晰。 7. 传统Web与AJAX的对比： 传统Web开发模式需要加载...
深入理解Ajax核心技术：HTML、CSS与XMLHttpRequst
Ajax，全称Asynchronous JavaScript and XML，是一种用于创建动态和交互式网页的技术，它允许web应用在无需重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心是利用JavaScript和...
Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
10-21
在本文中，我们将深入探讨如何使用Ajax通过XML异步提交从数据库中获取省份和城市信息，从而实现二级联动效果。这种技术是提高Web应用程序用户体验的关键，因为它允许在不刷新整个页面的情况下更新特定区域，增强用户...
深入理解Ajax基础技术：HTML、CSS与XMLHttpRequst
Ajax，全称Asynchronous JavaScript and XML，是一种用于创建动态和交互式网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心是XMLHttpRequest对象，它使得JavaScript...
XMLHttpRequest上传文件实现进度条
weixin_33729196的博客
06-17 229
话不多说，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件进度实现</title> <script type="text/javascript"> ...
XMLHttpRequest中显示文件的上传进度
LMXMIX的博客
10-03 854
//创建xhr对象 var xhr = new XMLHttpRequest() //监听xhr.upload的onprogress事件 xhr.upload.onprogress = function(e){ // e.lengthComputable是一个布尔值,表示当前上传的资源是否有可计算的长度 if (e.lengthComputable){ // 计算出上传的进度 // e.loaded 已传输的字节 // e.total 需传输的总字节 var procentComplete
关于XMLHttpRequest
CS_wuxiang的专栏
09-12 693
if(this.ActiveXObject && !this.XMLHttpRequest ){       var xmlHttpRequstActiveIds = [           "Microsoft.XMLHTTP"//IE5的，最早的XHR实现           ,"MSXML2.XMLHTTP"  //偷懒的办法,调用的2与3.0的版本         //,"MSXM
XMLHttpRequest 详解
热门推荐
m0_48982503的博客
12-03 1万+
XMLHTTPRequest对象，顾名思义：是基于XML的HTTP请求。XMLHTTPRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后，ajax操作就此诞生
【精简版】XMLHttpRequest 详解
weixin_46485638的博客
07-07 3462
精简的 XMLHttpRequest 详解。
XMLHttpRequst对象的使用
STANDADD的专栏
11-11 838
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    Untitled Page var xmlHttp;function createXMLHttpRequest(){  //在IE下创建XMLHttpRequest对象  try  {    xmlHttp = ne
深入解析XMLHttpRequest：实现异步通信的利器
墨辰JC的博客
06-11 3839
在网络应用程序开发中，XMLHttpRequest（XHR）方法是一种用于向服务器发送HTTP请求和接收服务器响应的技术。它为开发者提供了一种使用JavaScript进行服务器通信的简单和灵活的方式。本篇博客将详细介绍XMLHttpRequest的使用方法和注意事项，并通过代码示例进行调试和演示。XMLHttpRequest是一个在JavaScript中使用的对象，它可以与服务器进行通信，发送HTTP请求并获取服务器的响应。通过XHR，我们可以在不刷新整个页面的情况下更新部分页面内容，实现动态交互。
【AJAX】XMLHttpRequest查询参数与数据提交详解
最新发布
lph159的博客
09-18 1329
是一种在浏览器端用来与服务器通信的 API。它允许网页在不重新加载整个页面的情况下，向服务器发送请求并接收响应，从而实现异步更新内容的效果。虽然近年来fetchAPI 更加流行，但仍然被广泛使用，尤其是在对旧浏览器的兼容性需求较高的情况下。在GET请求中，数据通过 URL 的查询字符串传递。查询字符串是指 URL 中?之后的部分，通常由键值对组成，并且多个键值对通过分隔。GET请求适用于请求一些不会对服务器数据产生修改的操作。POST。
XMLHttpRequest的简单认识和原始JS建立该对象方法
shenzhenNBA的专栏
03-09 5152
在进行前端开发时经常使用到 ajax 进行异步请求获取数据，那么进行 ajax 请求最关键的一步是建立 XMLHttpRequest  对象，然后在利用该对象进行数据异步请求操作，那么现在这里就简单了解一下这个关键的 XMLHttpRequest对象 [更多可以 baidu/google搜索查看更多]， ajax 异步请求，可以在Client端用JS建立，也可以在Server端用ASP，JSP等
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值