HTML Javascript CGI

时间  2020-07-08 标签 html javascript cgi

HTML Javascript CGI

最近工做须要实现一个web 服务器。用来显示设备参数以及修改参数等简单的功能。因为是嵌入式设备，因此选择了一些小型的web 服务器。javascript

shttpd：

小型嵌入式web服务器，可使用C和C++来实现网页。不过彻底由C语言来实现网页代码结构很是乱，后期维护修改确定是灾难。仍是用HTML语言来实现网页比较好。css

HTML:

一个html页面一般须要包括 html、css、javascript。以一个登录界面为例：html

<html>
    <head>
        <title>StarDCU Web</title>
        <style> .login{ position: absolute; width: 30%; height: 50%; border:1px solid #d3d3d3; margin:0 auto; left:50%;top:50%; margin-left:-15%;margin-top:-15%; #background: url(timg.jpg) no-repeat center; background-color: #FAFAFA; } .login_form{ border:1px solid #d3d3d3; position:relative; height: 15%; width: 90%; top: 5%; left:5% } .login_edit{ position:relative; width: 90%; height:75%; top:12%; border:0px; outline:none; font-size:20px;font-weight:normal; color:#d3d3d3; background-color: #FAFAFA; } .login_btn{ position:relative; width: 35%; height: 70%; top:20%; } .login_msg{ position:relative; top:20%; width:100%; border:0px; color:red; background-color: #FAFAFA; } </style>
    </head>
    <body style="text-align:center;">
        <div class="login">
            <form class="login_form" style="border:0px;">
                <h2 style="text-align:left;color:#A3A3A3">Login</h2>
            </form>
            <form class="login_form" id="user_form">
                <input type="text" id="user" class="login_edit" placeholder="User name"></input>
            </form>
            <form class="login_form">
                <input type="password" id="pass" class="login_edit" placeholder="Password"></input>
            </form>
            <form class="login_form" style="border:0px;">
                <input type="button" onclick="getConfig(0)" id="login_ok" class="login_btn" value="Login"></input>
            </form>
            <form class="login_form" style="border:0px;">
                <input type="text" id="msg" class="login_msg" disabled="true"></input>
            </form>
        </div>
        <script type="text/javascript" src="file.js"></script>
        <script> var timer; function getConfig(index) { var user = document.getElementById("user").value; if(user.length === 0) { document.getElementById("msg").value = "user name is null..."; return; } var pass = document.getElementById("pass").value; if(pass.length === 0) { document.getElementById("msg").value = "password is null..."; return; } timer = window.setTimeout("timeout()",2000); httpGet(index, login); } function timeout() { login(""); } function login(string){ window.clearTimeout(timer); var user = document.getElementById("user").value; var pass = document.getElementById("pass").value; if(string.length === 0) { document.getElementById("msg").value = "login timeout..."; return; } if(getQueryStringByName(string,"user_name") !== user) { document.getElementById("msg").value = "user name is incorrect..."; return ; } if(getQueryStringByName(string,"user_pass") !== pass) { document.getElementById("msg").value = "password is incorrect..."; return ; } //set session value sessionStorage.setItem("login", 1); //jump page self.location='dcu.html'; } document.onkeydown=function(event){ if(event.keyCode==13){ document.getElementById("login_ok").click(); } }; </script>
    </body>
</html>

style即CSS代码，用来定义界面样式。一般的方法是将这些样式定义保存在文件中，方便全部页面调用。调用方法class=”name”。
javascript 实现页面逻辑，能够作不少后台处理的操做。java

Javascript

第一次试着实现web服务器，页面部分比较简单（固然只是比较简陋的界面）。比较麻烦的是我须要从其余程序获取设备信息，换言之就是要与其余程序进行数据交换。那么网页的数据怎么传递和获取呢。又是传递给谁呢？
网上不少说用ajax，Ajax是一种一种建立交互式网页应用的网页开发技术。具体就是XMLHttpRequest。
页面交互主要就是GET/POST两个请求web

function httpGet(index, callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "./config.cgi?"+index, true );
    xmlHttp.setRequestHeader("If-Modified-Since","0"); 
    xmlHttp.send();
    xmlHttp.onreadystatechange=function() {
        //get request ready
        if (xmlHttp.readyState==4 && xmlHttp.status==200)
        {
            keyList.length = 0;
            valList.length = 0;
            callback(xmlHttp.responseText);
        }
    }
}
function xmlHttpPost(str) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "POST", "./config.cgi", true ); 
// xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("If-Modified-Since","0"); 
    xmlHttp.send(str);
    xmlHttp.onreadystatechange=function() {
        //get request ready
        if (xmlHttp.readyState==4 && xmlHttp.status==200)
        {
            //alert(xmlHttp.responseText);
        }
    }
}

经过XMLHttpRequest很容易像cgi程序发送请求。还有其余方式，好比创建虚拟form的方式来提交ajax

function post(PARAMS) {        
    var iframe = document.createElement("iframe"); 
    iframe.style.display = "none";
    var form = document.createElement("form"); 
    form.action = "./config.cgi"; 
    form.method = "post"; 
    form.style.display = "none";
    form.target = "iframe";

    for(var i=0; i<PARAMS.length; i+=2)
    {
        var opt = document.createElement("input");
        opt.name = PARAMS[i];
        opt.value = PARAMS[i+1];

        form.appendChild(opt);
    }
    document.body.appendChild(form); 
    form.submit();
    document.body.removeChild(form);
}

不过这种方式我没有使用，由于它在提交后会跳转页面。Javascript语法不难理解，用起来甚至感受很方便，回调函数参数传递等。浏览器

CGI

CGI 通用网关接口，经过环境变量来与html进行交互。主要的环境变量有
SERVER_NAME：运行CGI序为机器名或IP地址。
SERVER_INTERFACE：WWW服务器的类型，如：CERN型或NCSA型。
SERVER_PROTOCOL：通讯协议，应当是HTTP/1.0。
SERVER_PORT：TCP端口，通常说来web端口是80。
HTTP_ACCEPT：HTTP定义的浏览器可以接受的数据类型。
HTTP_REFERER：发送表单的文件URL。（并不是全部的浏览器都传送这一变量）
HTTP_USER-AGENT：发送表单的浏览的有关信息。
GETWAY_INTERFACE：CGI程序的版本，在UNIX下为 CGI/1.1。
PATH_TRANSLATED：PATH_INFO中包含的实际路径名。
PATH_INFO：浏览器用GET方式发送数据时的附加路径。
SCRIPT_NAME：CGI程序的路径名。
QUERY_STRING：表单输入的数据，URL中问号后的内容。
REMOTE_HOST：发送程序的主机名，不能肯定该值。
REMOTE_ADDR：发送程序的机器的IP地址。
REMOTE_USER：发送程序的人名。
CONTENT_TYPE：POST发送，通常为application/xwww-form-urlencoded。
CONTENT_LENGTH：POST方法输入的数据的字节数。服务器

CGI程序会在GET/POST请求发送时运行，经过读取环境变量来获取传递的信息。而后在将结果返还给javascript。session

经过调用cgic库来实现本身的cgi程序。cgic实现了main函数，获取了环境变量的信息，并将对应的数据存储在变量中方便程序获取。
这里写图片描述
在cgi程序中能够彻底按你喜欢的方式获取数据。可是有一点须要注意，CGI程序会在任意发送GET/POST的时候被调用。运行完成后就会退出，CGI会在退出后将stdout的信息传递给Javascript。因此CGI程序的运行时间应尽可能简短。若是运行时间过长，下一次调用时就会出错，从而获取不到数据信息。app

联系我们 沪ICP备13005482号-10