第52章 RL-TCPnet之Web服务器的Ajax实现

STM32

转帖

本章节为大家讲解RL-TCPnet的Ajax实现动态网页的局部刷新，前面第47章讲解了动态网页的整体刷新，本章节为大家讲解局部刷新方法。

本章教程含STM32F407开发板和STM32F429开发板。

52.1 初学者重要提示

52.2 HTTP配置说明（Net_Config.c）

52.3 HTTP调试说明（Net_Debug.c）

52.4 制作HTML，CGI和XML文件

52.5 访问开发板Web服务器的方法

52.6 实验例程说明（RTX）

52.7 总结

lee_st · 2018-1-19 10:37:55

主页面做好之后，就是子页面的设计了。这个子页面是我们本章节的重点。

lee_st · 2018-1-19 10:38:23

52.4.1 第1步：制作蜂鸣器控制页面的HTML文件
   Notepad++的设置就不再赘述了，前面第44章已经详细讲解，我们这里的编码字符集依然要选择GB2312。页面的HTML代码如下：



安富莱嵌入式网络服务器

margin="50" width="700">

            安富莱嵌入式网络服务器

无源蜂鸣器控制

         1. 无源蜂鸣器的控制采用JavaScript + XML，

         从而点击按钮控制的时候实现平滑且无闪烁的更新效果。
2. 如果用的比较老的V5开发板，

         请查看板子上面是否有无源蜂鸣器，后来出的V5板子都带无源蜂鸣器，V6板子都带无源蜂鸣器。

选项	设置
蜂鸣器控制:

lee_st · 2018-1-19 10:38:37

实际测试显示效果：

lee_st · 2018-1-19 10:39:01

对于这个子界面，主要是插入了JavaScript。当用户在浏览器上按下“蜂鸣器响两次”的按钮后，会触发按钮事件onclick=“updateMultiple（formUpdate）”，从而浏览器会从服务器下载JavaScript函数updateMultiple（）并执行，函数updateMultiple是在xml_http.js（以MDK4.74为例，在MDK安装目录的C:Keil_v474ARMRLTCPnetJava文件里面）文件中实现。

lee_st · 2018-1-19 10:39:14

函数updateMultiple的形参是formUpdate，这个是在子界面中创建的JavaScript对象：
var formUpdate = new periodicObj("beep.cgx", 300);

而函数periodicObj也是在xml_http.js中实现，定义了周期性更新的文件，时间单位ms。这里是浏览器300ms后下载一次beep.cgx文件进行更新。

lee_st · 2018-1-19 10:39:31

52.4.2 第2步：制作蜂鸣器页面所需的XML文件

这一步，我们需要制作XML文件beep.cgx（XML文件一定要以cgx作为后缀），这个文件制作比较简单，内容也比较简单。大家直接在MDK里面新建一个文件。

新建文件：

点击保存：

lee_st · 2018-1-19 10:40:18

点击保存后弹出如下窗口：

idianze · 2018-1-19 11:36:09

Ethernet Network Interface

lee_st · 2018-1-20 02:52:16

谢谢支持啊

lee_st · 2018-1-20 02:52:23

我分享的很多

lee_st · 2018-1-20 03:22:02

保存后，将新建的文件beep.cgx添加到工程里面，鼠标双击RL-TCPnet/Web分组。

弹出如下对话框，选择beep.cgx文件：

lee_st · 2018-1-20 03:23:47

这一步比较重要了，点击Add后，弹出如下窗口：

lee_st · 2018-1-20 03:24:37

这一步比较重要了，点击Add后，弹出如下窗口：

lee_st · 2018-1-20 03:26:20

这一步比较重要了，点击Add后，弹出如下窗口：

lee_st · 2018-1-20 03:28:57

点击OK后，文件beep.cgx就已经添加到MDK工程项目里面了，然后点击Close按钮，关闭弹出的窗口：

lee_st · 2018-1-20 03:29:12

文件添加上之后，就是如何编辑和设置这个文件了，beep.cgx文件的实现如下。
t

lee_st · 2018-1-20 03:29:23

对于XML文件来说，仅写入要更新的元素即可，并以标签结束。这个XML文件里面也有CGI脚本命令（特别注意末尾的点号不可省略，表示文件结束），会触发HTTP_CGI.c文件中的脚本解析函数cgi_func的执行：
/* BEEP Input - xml file 'beep.cgx' */

   case 'q':

      switch (env[1]) {

      case '1':

            BEEP_Start(5, 1, 2);

            break;

      }

   len = 0;

   break;

lee_st · 2018-1-20 03:29:35

我们这里仅执行了蜂鸣器的鸣响函数，无返回数据。至此，就完成了无源蜂鸣器的控制。

lee_st · 2018-1-20 03:30:01

52.4.3 第3步：制作温度监控页面的HTML文件
   Notepad++的设置就不再赘述了，前面第44章已经详细讲解，我们这里的编码字符集依然要选择GB2312。页面的HTML代码如下：



安富莱嵌入式网络服务器

width="700">

         安富莱嵌入式网络服务器

温度监控

            1. 本页的数据更新支持手动和自动，自动更新是基于JavaScript + XML，

            从而实现平滑且无闪烁的更新效果。


2. 测试前请务必将DS18B20器件插到开发板上。


3. 为了保证

            RTC实时时钟能够正常起振，下载程序后将板子断电然后重新上电再测试。