动图：

其中拿取文件内容的操作，需要用到服务器下的.cgi文件来完成

编译命令：gcc get.c -o get.cgi

4.html-数字相加、字符串拼接、数字拼接、获取服务器中某个文件内容

  

    
        
        
        
        这是我的第二个网页
        这是一级标签
        这是二级标签
        这是三级标签
    

    
    


    
    

        
        
        
        
        
        
        

        
        
         



        
        加数1:

        加数2:


        结果：


        
        
        标签结果：*****

        


        


        


        


        


        字符串拼接：^^^^^

        





        
        标签文件结果：######

expo2.js–4.html中操作对应的函数调用

function jscript()
{

    alert("第三个使用方法");
}


function myjsadd()
{
    var ref = 0;

    if( Number( document.getElementById("iddate1").value) != 0 && Number(document.getElementById("iddate2").value) != 0)
    {
        ref =  Number( document.getElementById("iddate1").value) + Number(document.getElementById("iddate2").value);
        alert("正常，显示结果");
    }
    else
    {
        alert("结果异常，退出关闭网页");
        window.close();
        //return;
    }
    // 文本框显示
    document.getElementById("idtext1").value = ref;

    // 标签显示
    document.getElementById("idlabel").innerHTML=ref;
    // document.write("hello boy!");

}

//关闭网页
function jsclose()
{
    window.close();
}

//跳转
function jsjump()
{
    window.location.href="index.html";
}

//拼接
function jsstrcat1()
{
    //对标签、value操作，显示拼接结果到标签上
    document.getElementById("idjsstrcat").innerHTML=
                    "hello" +
                    "word!!" +
                    document.getElementById("iddate1").value + 
                    document.getElementById("iddate2").value +
                    "*2" +
                    "+45";
}


function jsstrcat2()
{
    //对标签、value操作，显示拼接结果到标签上
    var mid = document.getElementById("idjs_numstrcat").innerHTML=
                    document.getElementById("iddate1").value + 
                    document.getElementById("iddate2").value +
                    "*2" +
                    "+45";

    document.getElementById("idnumlabel").innerHTML = eval(mid);
}



//AJAX通信模板
//================AJAX 开始内容==============================
//仅仅是一个Javascript 和XML 融合一个 专门用于 网页和web服务器进行异步通信的一个 对象
//异步通信：只有在这个事情发生的时候，才会与服务器建立通信连接，一般情况下处于未连接状态
//说白就是一个 对象（属性 方法）
function getXMLHttpRequest()
{  

    var xmlhttp = null;  
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本，如果是 IE5.0 以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari   
        xmlhttp=new XMLHttpRequest();//创建AJAX请求对象  
    } 
    else//如果浏览器是底版本的 
    {// code for IE6, IE5 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建AJAX请求对象 
    }

    return xmlhttp;//返回AJAX请求对象 

}
//================AJAX 结束内容==============================

//--------------明文拿取指定文件内容--------------------//
function myprc()
{
    var myxmlhttp = null;
    //获得了新建立的AJAX请求对象 ，通过这个对象所包含的成员函数与服务器建立连接
    var myxmlhttp = getXMLHttpRequest();


    
    var mistring = null;
    mistring = "./cgi-bin/expo2.cgi?" + document.getElementById("idfiletext").value;
    alert(mistring);


    //相当于C++  信号和槽函数 connect
    //先发送请求
    //对连接过程中的状态进行监控，当发生改变，就来调用该函数
    myxmlhttp.onreadystatechange = function()
    {//如果发现AJAX异步通信对象里面的一个属性，状态属性发生改变这个事情一旦发生，那么就来调用这个函数

        if(myxmlhttp.readyState == 4 && myxmlhttp.status == 200)
        {

            //得到的文本信息显示在标签上
            document.getElementById("idfile").innerHTML = myxmlhttp.responseText;
        }

    }


    
    //GET明码打开文件
    //打开cgi-bin文件下的expo2.cgi文件（.c编译好的）
    myxmlhttp.open("GET", mistring , true);
    myxmlhttp.setRequestHeader("If-Modified-Since","0");

    //发送请求（打开了新的文件内容致使连接状态改变）
    myxmlhttp.send();
    

    //POST打开文件

}

//---------------拿取表格提交的用户名、密码-----------------------//
function myprc1()
{
    var myxmlhttp = null;
    var myxmlhttp = getXMLHttpRequest();


    myxmlhttp.onreadystatechange = function()
    {
        if(myxmlhttp.readyState == 4 && myxmlhttp.status == 200)
        {
            document.getElementById("idform").innerHTML = myxmlhttp.responseText;
        }

    }

    myxmlhttp.open("GET", "./cgi-bin/get.cgi?" , true);
    myxmlhttp.setRequestHeader("If-Modified-Since","0");
    myxmlhttp.send();
    
}

expo2.c-C语言实现，拿取服务器下文件内容的操作

#include 
#include 
#include 
//Cgi程序和 web服务器通信依靠3东西
//第一 stdin  如果在cgi程序里 去读取 stdin东西，其实就是读到 浏览器通过网页传递过来参数---->存到stdin 直接去读它
//第二 stdout 如果我们用C语言的printf 就是送到网页那边去，中间都是同boa来自动处理的
// 环境变量  传参数
//用GCC进行编译，最后可执行程序后缀一定是.cgi
int main()
{
    char str[128] = {0};

    //传输 HTML 文本
    //在CGI程序一定加入这个声明，web服务器不能识别当前的程序是cgi程序
    printf("content-type:text/htmlnn");

    FILE *fp = fopen("../file.txt", "r+");
    if(fp == NULL)
    {
        printf("file open failedn");
        return 0;
    }

    char str1[128] = {0};
    char *data = NULL;

    #if 1//明文方式对接处理
    data = getenv("QUERY_STRING"); 
    strcpy(str1, data);
    int num = atoi(str1);

    while(num--)
    {
        memset(str, 0, sizeof(str));
        fgets(str, sizeof(str), fp);//拿取指定行内容       
    }
    #endif

    #if 0 //POST密文处理内容
    char *dataLen = NULL;
    dataLen = getenv("CONTENT_LENGTH"); 
    strcpy(str1, dataLen);
    int num = atoi(str1);

    while(num--)
    {
        memset(str, 0, sizeof(str));
        fgets(str, sizeof(str), fp);//拿取指定行内容       
    }
    #endif

    printf("%s", str);

    fclose(fp);

    return 0;
}

index.html

这是我的第一个网页