web server/cgi/html/css/js

原创 2015年07月09日 10:10:35

       随着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> 关联进来就可以用了。用户与页面交互(点击,悬停等等)时,JS 代码对此作出一定的反应,添加特效与动画;交互的过程中可能需要向服务器索取或提交额外的数据(局部的刷新,类似微博的新消息通知),一般不是跳转就是通过 JS 代码(响应某个动作或者定时)向 Web Server 发送请求,Web Server 再用服务器脚本进行处理(生成资源or写入数据之类的),把资源返回给客户端,客户端用得到的资源来实现动态效果或其他改变。


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

   

CGI    

        CGI(common gateway interface)WEB 服务器和运行在服务器端的外部程序之间的一个接口规范,按照这个规范编写并运行的外部程序就叫做CGI程序,其目的是实现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()流程图:




版权声明:如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!本文为博主原创文章,转载请注明链接!

相关文章推荐

HTML+CSS+JavaScript+CGI

HTML+CSS+JavaScript+CGI读数据过程:.cgi程序通过在boa服务器下运行,从arm的寄存器获取数据,再传送给JavaScript,.js程序再传送.HTML文件。 写数据:.h...
  • xxgxgx
  • xxgxgx
  • 2015年05月09日 13:29
  • 611

浅析html+css+javascript之间的关系与作用 三者间的关系

浅析html+css+javascript之间的关系与作用 三者间的关系 一个基本的网站包含很多个网页,一个网页由html, css和javascript组成。 html是主体,...

HTML+css+JavaScript

主要参见:http://www.w3school.com.cn/ HTML+CSS+Javascript标签及属性 一、HTML 1、和 标签限定了文档的开始和结束点。  属性:  (1) ...

Web服务器和CGI的关系

什么是WEB服务器(IIS、Nginx、Apache) WEB服务器也称为WWW(WORLD WIDE WEB)服务器,主要功能是提供网上信息浏览服务。 (1)应用层使用HTTP协议。 (2)H...

谈谈在WebServer中如何实现CGI技术

谈谈在WebServer中如何实现CGI技术 在WebServer中,cgi技术的实现相信许多人很感兴趣,不过在一些开源软件如Apache中,由于软件规模大,相关模块多,直接去读懂是如何实现的比较费劲...

js调用web server服务(基于html)

  • 2015年07月20日 13:55
  • 61KB
  • 下载

基于CGI的嵌入式web server设计

基于CGI的嵌入式web server设计  [嵌入式]发布时间:2010-09-06 16:30:23  一、CGI概述   CGI(公用网关接口)规定了Web服务器调用其他...

Web Server、CGI、PHP-CGI、FastCGI和php-fpm之间的关系

原文地址:http://segmentfault.com/q/1010000000256516 GDC注:在linux下使用PHP的过程中,经常看到php-fpm这个进程,感觉应该和...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web server/cgi/html/css/js
举报原因:
原因补充:

(最多只允许输入30个字)