[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新 |
您所在的位置：网站首页 › 网页如何刷新数据文件 › [WEB] 详解Ajax实现网页数据异步更新并实时自动刷新 |
[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新
|
本周在做STC大作业的时候，采集了开发板上的光照和温度数据传到了腾讯云服务器上（实现可以参考我的另外一篇文章 ： socket实现服务器和客户端双向通信），由于开发板采集的数据是时实更新的，故网页的数据也需要实时更新，故学习并记录Ajax数据更新方法，当然还需要结合之前做H5游戏开发多子弹线程的经验，使用setInterval() 方法实现函数的循环定时回调，以实现数据不断刷新的效果 Ajax实现网页数据异步更新并实时自动刷新 1. 理解Ajax的工作原理 1.1 简介 1.2 XMLHttpRequest 1.3 XMLHttpRequest 成员函数之 onreadystatechange 1.4 XMLHttpRequest 成员函数之 open & send 2. Ajax 中与服务器的交互 2.1 服务器响应 2.2 服务器设计 3. 实现定时自动刷新 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基础 ： 参考: 在线运行 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(); } AJAX 请求数据上面的代码中出现了： 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也是正常的状态 然后是对部分的代码的分析： 请求数据第一行设计了一个按钮，效果是按下触发函数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，来将参数传递给服务器 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(); } 在输入框中尝试输入字母 a: 输入姓名:提示信息: 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 |
【本文地址】