[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新

最新推荐文章于 2023-11-15 14:15:00 发布

kikook

最新推荐文章于 2023-11-15 14:15:00 发布

阅读量1.7w

点赞数 6

分类专栏： WEB

本文链接：https://blog.csdn.net/chenhanxuan1999/article/details/100531830

版权

WEB 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本周在做STC大作业的时候，采集了开发板上的光照和温度数据传到了腾讯云服务器上（实现可以参考我的另外一篇文章： socket实现服务器和客户端双向通信），由于开发板采集的数据是时实更新的，故网页的数据也需要实时更新，故学习并记录Ajax数据更新方法，当然还需要结合之前做H5游戏开发多子弹线程的经验，使用setInterval() 方法实现函数的循环定时回调，以实现数据不断刷新的效果

Ajax实现网页数据异步更新并实时自动刷新

1. 理解Ajax的工作原理

1.1 简介

1.2 XMLHttpRequest

1.3 XMLHttpRequest 成员函数之 onreadystatechange

1.4 XMLHttpRequest 成员函数之 open & send

0. 补充一下注释的方法

<!--  -->是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。

/* */是CSS的注释标签

/* */（注释代码块）、//（注释单行）是JS的注释标签。

1. 理解Ajax的工作原理

1.1 简介

个人的理解：Ajax看起来像是一种很高级的协议，开放的接口就是从客户端（浏览器）产生请求（出发事件为案件，下拉框，输入框中的值等等），将请求数据包(XMLHttpRequest对象)发送到服务器端，服务器进行处理(处理XMLHttpRequest)，然后将数据包通过Internet返回到浏览器端，在浏览器端，由这种协议驱动的JS自动处理返回的数据并更新页面的内容

官方的解释：

应用：2005 年 Google开发了这项技术，首先用于搜索引擎的智能的智能提示补充

但是今天，2019/9/4，我，chx，要用来写STC大作业，哈哈哈哈

1.2 XMLHttpRequest

XMLHttpRequest 是 Ajax基础： 参考: 在线运行

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

上面的代码中出现了：

xmlhttp.readyState==4 && xmlhttp.status==200

前面的数据readyState共有5个状态0-4，但是直到4的时候才是服务器准备好的时候：

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

具体的，这里使用闭包方式定义的函数（函数xmlhttp.onreadystatechange在函数loadXMLDoc()进行定义）

会在对应的服务器对open&send均完成并进行处理，可以获得服务器响应的时候就是状态4

200也是正常的状态

然后是对<body></body>部分的代码的分析：

<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

第一行设计了一个按钮，效果是按下触发函数loadXMLDoc(),按钮上面的文字内容为“请求数据”

第二行开了一个容器div，并赋予ID = “myDiv”之后回调函数 loadXMLDoc会在这个div中写入内容

然后来分析这个回调函数：

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}

先看xmlhttp的声明和赋值过程：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

首先声明了对象xmlhttp，然后对某些比较捉急的浏览器用else语句单独处理一下....

其他的现代浏览器就用统一的XMLHttpRequest声明对象即可

可以看到这个函数是一个“被动函数”，即只有在回调机制被触发的时候，

这个回调函数才有效果，然后进入if/else逻辑生成不同的类型的变量名，但是后面的处理的

流程是一样的，也就是都是对已经生成的对象xmlhttp进行操作

然后分析这个回调函数的其余部分：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();

首先在回调函数的内部又定义了一个工具函数，xmlhttp.onreadystatechange

这个东西应该是XMLHttpRequest和ActiveXObject两个类都有的类函数

可以自行定义其逻辑

这里定义的逻辑是服务器在处理完了xmlhttp.open()和xmlhttp.send()请求后修改之前说

的div-> myDiv中间的HTML内容为xmlhttp得到的返回的字符串xmlhttp.responseText

再看一眼上面数据流图：

上面的代码对应到下面的这个数据流图，步骤如下：

按钮被按下，click事件触发，调用函数LoadXMLDoc()
LoadXML函数在客户端的机器上开始执行，首先根据用户的浏览器是否为捉急版本(IE5,6)生成不同类型的对象，好在后期操作手法一致，用同一个变量存起来
定义成员方法：onreadystatechange，这个事件用来处理状态改变的时候的逻辑，待会再写
调用open和send方法，将请求数据包传输到服务器，完成了上图中的上半部分
服务器处理数据，这里由于仅仅是前端的代码，所以不作讨论，对应的服务器收到HttpRequest的数据包之后的处理逻辑，在相应的后端中进行编写
服务处理完数据后，将结果客户端的浏览器
客户端的浏览器接收到数据，再次调用onreadystatechange方法，根据用户自己编写的逻辑进行处理，对应到这里的示例代码的逻辑，就是将服务器返回的数据展示到前端

1.3 XMLHttpRequest 成员函数之 onreadystatechange

在上面分析的流程中，这个函数一共被触发了5次，但是仅仅最后一次有实际的效果，为什么呢？

因为用户仅仅编写了最后一种情况对应的处理逻辑

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.onreadystatechange函数会在5个状态切换之间被自动调用（5次），5个状态：

只有一个分支if，只对应一种情况（状态3 - > 4）

1.4 XMLHttpRequest 成员函数之 open & send

在数据到达服务器（又称后台，这里指的是软件平台）之前，需要借助高度封装的open和send函数

xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();

上面就是将一个HttpRequest 发送给了服务器端的后台，而且明显demo_get.asp是一个asp写的服务器程序

还有用php写的服务器，比如淘宝，那么就应该会有下面这种请求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

用true是为了能够支持异步发送数据，这个打开，速度也会变快，防止多访问造成的挂起

一个使用post发送数据的例子：

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

两者既然都能用来发送数据，那么应该选哪一个呢？

post支持发送的数据量比get大（表单的提交就是post），但是post的稍慢于get

所以post还有一个隐藏技能：使用setRequestHeader的”仿表单提交” 参考：在线运行

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("我也不知道我该提交点什么给服务器");

对于Get，怎么传递参数？

答案：“包在字符串里一起发送给服务器”

下面的这个示例代码就是使用了参数q，来将参数传递给服务器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h3>在输入框中尝试输入字母 a:</h3>
<form action=""> 
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

2. Ajax 中与服务器的交互

2.1 服务器响应

在1中已经详细分析了，前端的面如何发送数据给后端的服务器，即get和post，方法，并介绍了post方法的隐藏技能：“类表单提交”，现在来看一下服务器是怎么响应这个请求的

比较常用的返回数据的格式为字符串，所以使用responseText

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果请求的是xml数据，进行数据转化的函数：

// 将得到的xml的数据转为字符串返回，并写入空的Div中（my_div）
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

那么此时就可以写下面这种：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  var txt,x,i;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc=xmlhttp.responseXML;
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
      {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
}
</script>
</head>

<body>

<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获取我的 CD</button>
 
</body>
</html>

2.2 服务器设计

这个查了一下，好像不是今天一个下午就能够搞定的...

明天就验收了，那就用框架然后部署一下好了...

学计算机网络后再来补这里

今天竟然又有人问起这篇博客，可以说是很神奇了。

可以，大三下学了计算机网络前来还愿：

https://blog.csdn.net/chenhanxuan1999/article/details/106855715

大三下学了数据库之后，看了下简单的Java Web编程，加上JQuery，通过Servlet实现了类似功能。

含有完整的前端和服务器的代码，看实验3.

3. 实现定时自动刷新

参考：在线运行JS

这个网站已经写好的后端，效果是返回当前时间

那么在前端中使用js的setinterval()函数模拟不停按下按钮

然后原来的按钮改造一下，设置为停止按钮：

<html>
<head>
<script type="text/javascript">
var processID = self.setInterval("loadXMLDoc()",1000);
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();

}
function closeConnection() {
	window.clearInterval(processID);  
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="closeConnection()">关闭连接</button>
<div id="myDiv"></div>

</body>
</html>

效果就为点击运行代码，数据开始自动更新，点击关闭连接，数据停止更新

kikook

关注

6
点赞
踩
75

收藏

觉得还不错? 一键收藏
0
评论
[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新

本周在做STC大作业的时候，采集了开发板上的光照和温度数据传到了腾讯云服务器上（实现可以参考我的另外一篇文章： socket实现服务器和客户端双向通信），由于开发板采集的数据是时实更新的，故网页的数据也需要实时更新，故学习并记录Ajax数据更新方法，当然还需要结合之前做H5游戏开发多子弹线程的经验，使用setInterval() 方法实现函数的循环定时回调，以实现数据不断刷新的效果Aja...
复制链接

扫一扫