掌控板micropython编程实现网页实时显示板载光线传感器的值

掌控板micropython编程实现网页实时显示板载光线传感器的值

一、AJAX简介

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页内容的技术。它允许Web页面与服务器进行异步数据交换，这意味着可以在后台与服务器通信，而用户可以继续与页面交互，不会感受到任何延迟或中断。

（一）AJAX的关键组成部分：

1. JavaScript：用于编写客户端脚本，控制整个AJAX请求的过程。
2. XMLHttpRequest：这是一个浏览器内置的对象，用于在后台与服务器进行数据交换。尽管名字中有XML，但它可以用于发送和接收各种格式的数据，包括XML、JSON、HTML、纯文本等。
3. 异步：请求是异步发送的，这意味着JavaScript代码可以在等待服务器响应的同时继续执行，不会阻塞用户界面。

（二）AJAX的工作流程：

1. 创建XMLHttpRequest对象：JavaScript代码首先创建一个XMLHttpRequest对象。
2. 初始化请求：使用open方法初始化一个到服务器的请求，指定请求的类型（GET或POST）、URL以及是否异步处理。
3. 设置请求完成后的回调函数：通过设置onreadystatechange事件处理函数，定义当请求状态改变时应该执行的操作。通常在这个回调函数中检查请求是否完成，并处理服务器的响应。
4. 发送请求：使用send方法向服务器发送请求。如果是GET请求，数据可以附加在URL中；如果是POST请求，数据通常作为send方法的参数发送。
5. 处理响应：服务器处理请求并返回数据后，JavaScript代码可以获取这些数据，并根据需要更新网页的部分内容。

（三）AJAX的优点：

• 改善用户体验：用户在与网页交互时不会感受到延迟，因为页面不需要完全重新加载。
• 减少服务器负载：只传输必要的数据，而不是整个页面，可以减少服务器的处理负担。
• 提高应用性能：通过异步请求，可以实现更流畅的用户界面和更快的响应时间。

（四）AJAX的常见用途：

• 表单提交：在不重新加载页面的情况下提交表单数据。
• 动态内容更新：例如，在社交媒体平台上动态加载新的帖子或评论。
• 实时数据展示：如股票价格更新、天气信息等。
• Web应用功能增强：如搜索建议、地图服务等。

二、掌控板micropython编程实现网页实时显示板载光线传感器的值

Web server on ESP32: How to update and display sensor values? | Circuits4you.com

给出了用于esp32在arduino中编程实现在网页上实时显示传感器数值的示例。

本文给出了掌控板micropython编程实现网页实时显示板载光线传感器的值，并在掌控板的OLED同步显示。代码如下：

import network
import socket
from machine import ADC, Pin
from machine import Pin, SoftI2C, ADC
from ssd1106 import SSD1106_I2C

# 设置你的SSID和密码
ssid = 'TP-LINK_FF40'
password = '0268'

# 连接到WiFi
def connect_to_wifi():
    wlan = network.WLAN(network.STA_IF)
    wlan.active(True)
    if not wlan.isconnected():
        print('Connecting to network...')
        wlan.connect(ssid, password)
        while not wlan.isconnected():
            pass
    print('Network config:', wlan.ifconfig())

# 读取ADC值
adc = ADC(Pin(39))  # ESP32的光线传感器对应GPIO39


# 初始化I2C通信
i2c = SoftI2C(scl=Pin(22), sda=Pin(23))

# 初始化OLED显示屏
oled = SSD1106_I2C(128, 64, i2c)

# 创建Web服务器响应
def web_page():
    html = """
    
        
            
            
        
        
            
ESP32 AJAX Light Sensor Value
            
Light Sensor Value: 0
        
    
    """
    return html

# 启动Web服务器
def start_server():
    connect_to_wifi()
    s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    s.bind(('', 80))
    s.listen(5)
    while True:
        conn, addr = s.accept()
        print('Got a connection from %s' % str(addr))
        request = conn.recv(1024)
        print('Content = %s' % str(request))
        request = str(request)
        if request.find('/readADC') == 6:
            adc_value = adc.read()
            response = str(adc_value)
        else:
            response = web_page()
        conn.send('HTTP/1.1 200 OK\n')
        conn.send('Content-Type: text/html\n')
        conn.send('Connection: close\n\n')
        conn.sendall(response)
        conn.close()
        # 清除OLED屏幕
        oled.fill(0)  # 用0填充屏幕，即清除屏幕
        oled.text("Lightvalue:"+response , 0, 20)  # 显示模拟值
        oled.show()

start_server()

在thonny中，运行程序，在Shell中显示掌控板的IP地址是192.168.1.102。

在浏览器中输入IP地址，网页上就可以实时显示掌控板板载光线传感器的数值了。