第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-20 03:30:44

对于这个子界面，“手动更新”按钮实现的功能跟第1步中无源蜂鸣器控制按钮实现的功能是一样的，只是这里是500ms。下面重点说下“自动更新”的复选框，如果用户选中了定期更新复选框，浏览器将调用函数periodicUpdateTemp（）并执行。
var formUpdate = new periodicObj("ds18b20.cgx";, 500);

function periodicUpdateTemp()

{

   if(document.getElementById("TempChkBox").checked == true)

   {

      updateMultiple(formUpdate);

      TempTime = setTimeout(periodicUpdateTemp, formUpdate.period);

   }

   else

   {

      clearTimeout(TempTime);

   }

}

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

1、此函数的主要功能是判断复选框是否选中了，如果选中了，将调用函数updateMultiple来更新温度数值和RTC时间，并返回给浏览器。这里通过函数setTimeout启动了一个单次定时器，设置时间为formUpdate.period，单位毫秒。时间到后会再次调用函数periodicUpdateTemp，从而实现了周期性更新的效果。
2、如果复选框取消选中或者未选中，调用函数clearTimeout停止开启的单次定时器。

lee_st · 2018-1-20 03:31:13

52.4.4 第4步：将温度监控页面的HTML文件改为CGI文件
由于我们希望用户打开温度监控页面就可以看到更新的温度数值和RTC时间，需要将这个HTML修改为CGI文件。
t

t

t

t 安富莱嵌入式网络服务器

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t 安富莱嵌入式网络服务器

t

t

t

t

t

t
温度监控

t

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

t 从而实现平滑且无闪烁的更新效果。
2. 测试前请务必将DS18B20器件插到开发板上。
3. 为了保证

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

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t

t

选项	RTC实时时钟	温度
t DS18B20: t	t c g 1 size="6" id="rtc_value" value="%0.2d:%0.2d:%0.2d">	t c g 2 id="temperature " value="%4.1f C" /> t

t

t

t

t
自动更新:

t

t

t Copyright © 2017-2020

t 武汉安富莱电子有限公司版权所有.

t

t

t

t

.

lee_st · 2018-1-20 03:31:34

主要在上面代码中置红的语句前加上c命令行即可。这样一来，打开温度监控页面就会看到更新的RTC时间和温度数值。c命令行会触发HTTP_CGI.c文件中cgi_func函数的执行，进行命令行解析。
case 'g':

  /* DS18B20 Input - xml file 'ds180b20.cgi' */

  switch (env[2]) {

   case '1':

         RTC_GetTime(RTC_Format_BIN, &RTC_TimeStructure);

         len = sprintf((char *)buf,(const char *)&env[4],  RTC_TimeStructure.RTC_Hours,

                                                                  RTC_TimeStructure.RTC_Minutes,

                                                                  RTC_TimeStructure.RTC_Seconds);

   break;



   case '2':

   len = sprintf((char *)buf,(const char *)&env[4],(float)iTemp/16);

   break;

  }

  break;

lee_st · 2018-1-20 03:31:42

字符命令“g1”会返回RTC时间，字符命令“g2”会返回温度数值。

lee_st · 2018-1-20 03:31:58

52.4.5 第5步：制作温度控制页面所需的XML文件
这一步要制作ds18b20.cgx文件，制作方法同52.4.2小节，这里就不重复讲解了，内容如下：
t

.

lee_st · 2018-1-20 03:32:17

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

  /* DS18B20 Input - xml file 'ds180b20.cgx' */

  RTC_GetTime(RTC_Format_BIN, &RTC_TimeStructure);

  len = sprintf((char *)buf,(const char *)&env[1], RTC_TimeStructure.RTC_Hours,

                                                RTC_TimeStructure.RTC_Minutes,

                                                RTC_TimeStructure.RTC_Seconds);

  break;

case 'x':

  /* DS18B20 Input - xml file 'ds180b20.cgx' */

  len = sprintf((char *)buf,(const char *)&env[1], (float)iTemp/16);

  break;

lee_st · 2018-1-20 03:32:27

收到字符命令“p”会返回RTC时间，收到字符命令“x”会返回DS18B20的温度值。

lee_st · 2018-1-20 03:32:39

52.4.6 第6步：最后一步，所需的文件都添加上

添加方法和网页相关文件的存放路径位置已经在前面第44章节详细进行了说明，我们这里不再赘述。如果还没有掌握好，务必要返回第44章学习如何添加。

1、添加index.htm，beep.htm，beep.cgx，ds18b20.cgi和ds18b20.cgx文件到MDK工程。

2、新建并添加一个Web.i***件到MDK工程。

这个文件要设置的地方较多，详情看第44章。

lee_st · 2018-1-20 03:32:50

文件Web.inp填写的内容如下：
weixin.jpg,

beep.htm,

beep.cgx,

home.png,

ds18b20.cgi,

ds18b20.cgx,

xml_http.js,

index.htm to Web.c nopr root(Web)

lee_st · 2018-1-20 03:33:08

这里是将文件weixin.jpg，beep.htm，beep.cgx，home.png，ds18b20.cgi，ds18b20.cgx，xml_http.js和index.htm通过FCARM命令转换后存到Web.c文件里面。

3、添加HTTP_CGI.c文件。

这个文件也要添加到MDK中，此文件在MDK4.74安装目录：C:Keil_v474ARMRLTCPnetUser里面。我们这里将其复制到工程目录：RL-ARMRL-TCPnet里面了。用户添加此文件到MDK工程中后，要根据自己设计的网页来修改此文件。具体此文件的实现看本章节配套的例子即可。

HTTP_CGI.c文件也添加到MDK工程后：

lee_st · 2018-1-20 03:33:21

4、添加xml_http.js文件。

这个是最后一步了，添加xml_http.js（以MDK4.74为例，在MDK安装目录的C:Keil_v474ARMRLTCPnetJava文件里面）文件。

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

现在就可以全编译了，全编译后，将生成的Web.c文件（关于此文件的添加和相关问题看第44章）也添加进来：

lee_st · 2018-1-20 03:33:53

这个Web.c文件务必要添加进来，否则会出现Web服务器网页无法访问的情况：

最后，下载程序到开发板之前，最好再全编译一遍，防止Web.c文件中的网页内容没有参与编译。

lee_st · 2018-1-20 03:34:11

52.5 访问开发板Web服务器的方法
（强烈推荐将网线接到路由器或者交换机上面测试，因为已经使能了DHCP，可以自动获取IP地址）
用户可在浏览器中直接输入IP地址访问Web服务器，跟大家访问路由器后台一样，也可以通过NetBIOS Name直接访问，即http://armfly/，这样就无需查看具体IP了。下面我们两种方式都说下。