第53章 RL-TCPnet之Web服务器的JavaScript实现简单说明

席萌0209

第53章     RL-TCPnet之Web服务器的JavaScript实现简单说明

      本章节主要为大家讲解Web服务器中使用JavaScript的方法。关于JavaScript涉及到的知识点太多，我们就不专门做成教程了，仅简单进行说明并配套一个例子，方便大家作为参考。

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

53.1 初学者重要提示

53.2 Web服务器使用JavaScript的简单说明

53.3      总结

53.1  初学者重要提示

1、学习JavaScript的基础知识，请看第48章。

2、搞本章节的例子之前，务必保证已经学习了前面几个章节的Web服务器知识和配套的例子。

3、网上有很多比较好的JavaScript库，大家可以参考使用。初学的话，自己编写还是比较吃力的。

4、本章节配套如下六个例子，F407和F429开发板各三个：

      V5-1072_RL-TCPnet实验_WebServer之JavaScript实现动态网页（RTX）

      V5-1073_RL-TCPnet实验_WebServer之JavaScript实现动态网页（uCOS-III）

      V5-1074_RL-TCPnet实验_WebServer之JavaScript实现动态网页（FreeRTOS）

      V6-1072_RL-TCPnet实验_WebServer之JavaScript实现动态网页（RTX）

      V6-1073_RL-TCPnet实验_WebServer之JavaScript实现动态网页（uCOS-III）

      V6-1074_RL-TCPnet实验_WebServer之JavaScript实现动态网页（FreeRTOS）

53.2  Web服务器使用JavaScrip的简单说明

      前面章节学习Ajax技术时，已经使用到异步JavaScript+XML，只是相对比较简单，将JavaScript代码通过标签<script></script>插入到HTML文件里面。

      我们这里直接将用户制作好的JavaScript文件xxx.js添加到工程里面，然后通过CGI脚本文件或者HTML文件调用这个JavaScript文件里面的API函数即可。比如本章节配套的例子，JavaScript文件Graph.js是由官方提供的，CGI脚本文件graph.cgi调用了Graph.js文件里面的API函数，并且通过脚本命令行实现互动。

                              

      graph.cgi文件中调用Graph.js文件中API函数的代码如下（大家添加了Graph.js文件后，切不要忘了将其添加到Web.inp文件里面，具体看本章节配套的例子即可）：

1. t <script language=JavaScript>
   
2. 
   
3. t var bg = new Graph(10);
   
4. 
   
5. t bg.parent = document.getElementById('here');
   
6. 
   
7. t bg.title = '月平均气温';
   
8. 
   
9. t bg.xCaption = 'Month';
   
10. 
    
11. t bg.yCaption = 'Temperature';
    
12. 
    
13. c m a   bg.xValues[0] = [%s,'Jan'];
    
14. 
    
15. c m b   bg.xValues[1] = [%s,'Feb'];
    
16. 
    
17. c m c   bg.xValues[2] = [%s,'March'];
    
18. 
    
19. c m d   bg.xValues[3] = [%s ,'April'];
    
20. 
    
21. c m e   bg.xValues[4] = [%s ,'May'];
    
22. 
    
23. c m f   bg.xValues[5] = [%s ,'June'];
    
24. 
    
25. c m g   bg.xValues[6] = [%s ,'July'];
    
26. 
    
27. c m h   bg.xValues[7] = [%s ,'Aug'];
    
28. 
    
29. c m i   bg.xValues[8] = [%s ,'Sept'];
    
30. 
    
31. c m j   bg.xValues[9] = [%s ,'Oct'];
    
32. 
    
33. c m k   bg.xValues[10] = [%s ,'Nov'];
    
34. 
    
35. c m l   bg.xValues[11] = [%s ,'Dec'];
    
36. 
    
37. t bg.showLine = true;
    
38. 
    
39. t bg.showBar = true;
    
40. 
    
41. t bg.orientation = 'horizontal';
    
42. 
    
43. t bg.draw();
    
44. 
    
45. t </script>

复制代码

本例子的Web服务器访问方法跟前面几个章节讲解Web服务器时的方法是一样的。如果不熟练的话，看第44章的44.6小节即可。

      进入主网页的效果如下：

点击“JavaScript实例”超链接后进入到如下界面：

      关于JavaScript就为大家讲解这么多，如果要搞JavaScrip，需要大家系统的学习JavaScript的相关知识。

53.3  总结

      我们这里讲解的比较简单，如果大家要深入学习JavaScript的话，看第48章的初学者重要提示小节给的地址即可。