web服务器/cgi/html/css/js

时间：2015-07-09 13:21:19 收藏：0 阅读：5165

随着Internet技术的兴起，在嵌入式设备的管理与交互中，基于Web方式的应用成为目前的主流，这种程序结构也就是大家非常熟悉的B/S架构，即在嵌入式设备上运行一个支持脚本或CGI功能的Web服务器，能够生成动态页面，在用户端只需要通过Web浏览器就可以对嵌入式设备进行管理和监控，非常方便实用。本节主要介绍这种应用的开发和移植工作。

Web

典型的嵌入式Web服务器有Boa （www.boa.org）和thttpd （http://www.acme.com/software/thttpd/）等，它们和Apache等高性能的Web服务器主要的区别在于它们一般是单进程服务器，只有在完成一个用户请求后才能响应另一个用户的请求，而无法并发响应，但这在嵌入式设备的应用场合里已经足够了。

HTML

Web方式的应用开发一般都会将界面和程序逻辑脱离开来，允许在一定程度下更改界面，如改变界面文本的属性，建立多语言版本等，而无需改动程序逻辑。界面一般由美工来进行制作，而程序员负责具体功能的实现。

HTML(超文本标记语言)是用来创建与平台无关的超文本文档的简单标记语言，能够用来标记超文本消息、邮件、文档、超媒体、菜单选项、数据库查询结果以及有内嵌图形的简单结构文档。HTML为文档编码，包括要显示的文本、文本如何格式化的信息、要显示的图片名字(不是图片自身)、以及其他重要信息。连接到一个网页时，Web浏览器(如IE)就在内存中按照HTML的结构“构造”该网页，然后在屏幕上显示组装好的网页。

通常浏览器只能通过HTML请求从服务器获取静态网页进行浏览，如果用户需要通过浏览器提交一些数据给服务器进行处理并返回结果，以达到交互的效果则要用到HTML表单。HTML表单是用户通过浏览器提交数据为主要输入手段，它由普通文字、标记和一些称为“控件”的特殊元素(如复选框、单选按钮、菜单等)以及控件上的标签组成。用户通过填写或选择控件内容来输入数据，最后提交给服务器进行处理。它适用于任何浏览器。

下面是一个表单的示例：

FORM的一些参数解释如下：

1. action指定了调用的CGI脚本

2. methed定义了表单被提交的方法。methed有两种，GET和POST。GET是CGI默认的传输方法，用户输入的数据会附在URL之后传给Web服务器。POST方法传递数据时，服务器端CGI处理程序会从SID躺中接收传输入数据。

3. reset的外观和submit相似，不过一旦用户按下它，这个form中的所有输入值都会被清除，或者是回到初值。

HTML+CSS+JS

html，css，js属于网站前台，现在最新的叫法也叫“网站前端”。

浏览器拿到这些代码之后，分析一下给你渲染好页面显示出来，如果不用css，效果是这样的，按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等；见下图：

技术分享

是不是觉得默认样式有点看瞎狗眼呢……所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在 html 文件里用一个<link>标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来，然后你就能看到一个符合人类正常审美的页面了:

技术分享

JavaScript 与浏览器脚本

有了表示内容和语义的 HTML，规定样式的 CSS，得到的是一个静态的页面，没什么动画（其实用 CSS 还是可以有一些动画的，不过这个跑题了），按 F5 才会刷新数据，都 21世纪了，这么呆板单调的网页怎么能展现我大智人种族的创造性口胡！于是我们有了 Javascript（JS）来给页面添加一些动态的效果，比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果啦。

浏览器都会帮你实现一些 JS 可以用的工具（函数，对象什么的），你只要写一些 JS 的代码，保存在 xxx.js 里，在 html 文件中用 <script> 关联进来就可以用了。

总之，说下前台这三个，html是名词，css是形容词，javascript是动词。三个互相配合才是一句句子。

CGI

CGI（common gateway interface）WEB 服务器和运行在服务器端的外部程序之间的一个接口规范，按照这个规范编写并运行的外部程序就叫做CGI程序，其目的是实现Web服务器与客户端浏览器之间的动态交互。CGI程序通过由Web服务器来调用实现和WEB浏览器之间的交互。Web服务器将WEB浏览器发送来的信息，传送给CGI程序，由CGI程序进行处理，CGI程序在处理完后将响应结果再回送给Web服务器，然后由Web服务器发送到Web浏览器。如果需要调用其他外部应用如数据库服务等，均由CGl程序去与外部应用进行交互。

CGI工作原理如下：客户端的用户通过浏览器完成一定输入工作后，向服务器发出。HTTP请求(称为CGI请求)，服务器守护进程，接收到该请求后，就创建一个子进程(称为CGI进程)。该CGI子进程将CGI请求的有关数据设置成环境变量，在CGI程序与服务器间建立两台数据通道，然后启动URL指定的CGI程序。子进程通过标准输出流将处理结果传递给服务器守护进程，守护进程再将处理结果作为应答消息回送到客户端。一个CGI程序的任务分为输入任务和输出任务。输入任务根据请求方法的不同，从环境变量QUE-RY_STRING或标准输入中读取用户输入数据。输出任务生成HTTP响应头标内容，如消息正文的数据类型和数据长度等；生成HTTP响应消息正文内容，如动态生成的HTML文件内容。

浏览器与Web服务器的具体交互过程如下：

(1)客户机使用TCP／IP协议，与服务器建立连接，发送URL请求；

(2)Web服务器到相应的目录中调用CGI程序，使用客户机传递的参数作为CGI程序的参数，而CGI程序调用相应的外部程序完成操作；

(3)CGI程序以能被识别的格式返回处理结果给HTTP服务器；

(4)Web服务器将数据返回客户机处理，通过html文件显示CGI执行结果。

CGI程序运行在Web服务器上，提供同客户端Html页面的接口。我们看一个实际例子：常见的个人主页上大都有一个留言本，留言本的工作方式是这样的：先由用户输入一些信息，如名字之类的东西，接着用户按一下“留言”（到目前为止工作都在客户端），浏览器就把这些信息传送到服务器的CGI程序中，于是CGI程序在服务器上按照预定的方法进行处理，在本例中就是把用户提交的信息存入指定的文件中，最后CGI程序给客户端发回一个“留言结束”字样的页面，用户可以在浏览器里看到。

CGI工作的主要流程是：

1.一个用户请求激活一个CGI应用程序；

2.CGI应用程序将交互主页里用户输入信息提取出来；

3.将用户输入的信息传给服务器主机应用程序（如数据库查询〕；

4.将服务器处理结果通过HTML文件返回给用户；

5.CGI进程结束。

CGI程序可以通过环境变量获取Web服务器传递过来的用户数据，常见的环境变量有：
1.      SERVER-NAME：运行CGI序为机器名或IP地址。

2.      SERVER-INTERFACE：WWW服务器的类型，如：CERN型或NCSA型。

3.      SERVER-PROTOCOL：通信协议，应当是HTTP/1.0。

4.      SERVER-PORT：TCP端口，一般说来web端口是80。

5.      HTTP-ACCEPT：HTTP定义的浏览器能够接受的数据类型。

6.      HTTP-REFERER：发送表单的文件URL。（并非所有的浏览器都传送这一变量）

7.      HTTP-USER-AGENT：发送表单的浏览器的有关信息。

8.      GETWAY-INTERFACE：CGI程序的版本，在UNIX下为 CGI/1.1。

9.      PATH-TRANSLATED： PATH-INFO中包含的实际路径名。

10.  PATH-INFO：浏览器用GET方式发送数据时的附加路径。

11.  SCRIPT-NAME： CGI程序的路径名。

12.  QUERY-STRING：表单输入的数据，URL中间号后的内容。

13.  REMOTE-HOST：发送程序的主机名，不能确定该值。

14.  REMOTE-ADDR：发送程序的机器的IP地址。

15.  REMOTE-USER：发送程序的人名。

具体的通信方式有两种

1)      利用shell脚本获取QUERY_STRING环境变量

2)      利用cgic库编程动态网页

CGI可以使用多种编程语言来实现，包括C、 C++、Perl等，但在嵌入式设备的开发中，一般都不会采用Perl等解释性语言，因为这种语言还需要有解释执行的支撑模块，会占用存贮空间和内存，最常用的方法当然是用C来编写，但C并不是很适合开发象CGI这种需要大量进行字符串操作的程序，编程比较烦琐，因此，对于一个专业的开发人员来说，首先想到的应该是有没有可复用的库来支持快速高效的开发CGI程序。幸运的是目前就有不少开放源码的支持CGI开发的 C库。常见的有CGIC。

以下以boa服务器为例，具体流程如下。

下图是boa服务器的工作流程：

技术分享

下图是处理静态网页init_get()流程图：

技术分享

下图是init_cgi()流程图：

技术分享