How to display dynamic sensor value on webpage

มาดูขั้นตอนการเพิ่ม Script เพื่อแสดงค่าจากตัว Sensor ให้ Update ได้แบบ Real-time บน หน้าเวบเพจ โดยการใช้ AJAX แทนการ Auto Refresh จะทำได้ตอน Load ค่าใหม่เข้ามา เราไม่เห็นมา Browser กระพริบ เพื่อทำการ Refresh หน้าเพจ 

โดยสามารถทำได้ง่ายๆ ด้วยการเพิ่ม Script AJAX เข้าไปก่อน </head>

Code สำหรับ HTML Page ทั่วไป:

<script>
setInterval(loadDoc,60000);
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.body.innerHTML =this.responseText}
};
xhttp.open("GET", "", true);
xhttp.send();
}
</script>

Code สำหรับ Arduino HTML Page Web Server:

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";
ptr +="function loadDoc() {\n";
ptr +="var xhttp = new XMLHttpRequest();\n";
ptr +="xhttp.onreadystatechange = function() {\n";
ptr +="if (this.readyState == 4 && this.status == 200) {\n";
ptr +="document.body.innerHTML =this.responseText}\n";
ptr +="};\n";
ptr +="xhttp.open(\"GET\", \"/\", true);\n";
ptr +="xhttp.send();\n";
ptr +="}\n";
ptr +="</script>\n";

โดยเราสามารถกำหนดความถี่ในการ  Update  ข้อมูลได้จากการกำหนดค่า setInterval() 

ptr +="<script>\n";
ptr +="setInterval(loadDoc,1000);\n";

Example: AJAX XMLHttpRequest Webpage

• Online Real-time IoT WiFi MQTT Smart Energy Meter Din-Rial
• WiFi MQTT Temperature and Humidity Sensor

Reference: Display Values of Multiple DS18B20s on ESP8266 NodeMCU Web Server

 Buy our Smart IoT devices: