當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/8/1 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 [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基礎： 參考: 在線運行

<html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else{// code for IE6, IE5xmlhttp=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>部分的代碼的分析：

第一行設計了一個按鈕，效果是按下觸發函數loadXMLDoc(),按鈕上面的文字內容為“請求數據”

第二行開了一個容器div，并賦予ID = “myDiv”之后回調函數 loadXMLDoc會在這個div中寫入內容

然后來分析這個回調函數：

先看xmlhttp的聲明和賦值過程：

var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else{// code for IE6, IE5xmlhttp=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, Safarixmlhttp=new XMLHttpRequest();} else{// code for IE6, IE5xmlhttp=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>

效果就為點擊運行代碼，數據開始自動更新，點擊關閉連接，數據停止更新

總結

以上是生活随笔為你收集整理的[WEB] 详解Ajax实现网页数据异步更新并实时自动刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Nexus3功能介绍
下一篇：未来科技计算机作文600字,未来科技作文