มาดูขั้นตอนการเพิ่ม 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
Dynamic Sensor Value HTML Webpage on ESP-01S Web Server:
Reference: Display Values of Multiple DS18B20s on ESP8266 NodeMCU Web Server