AJAX和CGI 技术的应用

一、AJAX

1、AJAX的概述

AJAX 不是语言 而是(基于js和xml)技术
概述:
1、AJAX是 Asynchronous JavaScript And XML的缩写
2、AJAX 是一种用于创建快速动态网页的技术
3、AJAX 不是新的编程语言,而是一种使用现有标准的新方法
4、AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面
5、AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等
浏览器与服务器通信采用的就是AJAX技术,AJAX核心是XMLHttpRequest对象

AJAX局部更新网页流程图:

在这里插入图片描述
在这里插入图片描述

异步流程:
异步的意思就是发送给服务器指令,不关心什么时候回应

1、创建对象
2、设置回调函数 ,fun函数
3、open 创建服务器请求
4、send  向服务器发送请求,
5、服务器有结果会自动调用fun回调函数
在回调函数里面根据服务器返回的响应信息 更新用户界面

2、AJAX的通信过程

2.1、创建xmlHttpRequest对象

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

在js文件中开始定义这个函数,其他js函数直接调用就能创建一个异步请求对象

2.2、设置服务器响应的回调函数

标准的XMLHttpRequest属性

Onreadystatechange 每个(服务器的)状态改变时都会触发这个事件处理器,
通常会调用一个JavaScript函数
服务器的状态:
readyState:请求的状态。0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
status:服务器的HTTP状态码(200对应OK,404对应Not Found(未找到))
状态的改变会触发异步函数,调用回调函数。
不是每一种状态改变都要处理,==一般在readyState 状态值为4,status状态值为200的时候,处理服务器应答,==所以在回调函数里写一个判断,判断readyState 为4,status为200,再做处理

服务器的应答:

responseText 和 responseXML就是服务器的反馈的结果

属 性描 述
onreadystatechange每个状态改变时都会触发这个事件处理器 通常会调用一个JavaScript函数
readyState请求的状态。0 = 未初始化,1 = 正在加载,2 = 已加载, 3 = 交互中,4 = 完成
responseText服务器的响应,表示为一个字符串
responseXML服务器的响应,表示为XML。这个对象可以解析为一个DOM对象
status服务器的HTTP状态码(200对应OK,404对应Not Found(未找到))
statusTextHTTP状态码的相应文本(OK或Not Found(未找到)等等)
标准的XMLHttpRequest对象的方法
方 法描 述
abort()停止当前请求
getAllResponseHeaders()把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)返回指定首部的串值
open(“method”, “url”, true)建立对服务器的请求。method参数可以是GET、POST。url参数可以是相对URL或绝对URL。 true:异步;false:同步
send(content)向服务器发送请求
setRequestHeader(“header”, “value”)把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

2.3、open的使用

//想从服务器上请求文件a.txt
var url = "a.txt?data";
xmlhttp.open("GET",url,true);//true异步   false同步

2.4、send的使用

//GET方式:
xmlhttp.send(不要传任何数据);

//POST方式:
xmlhttp.send(data);

AJAX案例:请求服务器上的文件数据

index.html

<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <!--这是描述 js中的函数来之哪个js文件-->
        <script type="text/javascript" src="03_js.js"></script>
    </head>
    <body>
       文件的内容:<label id="label"></label>
       <br>
       <input type="button" value="获取文件内容" onclick="get_file_fun();">
    </body>
</html>

03_js.js

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

    //2、设置服务器响应的回调函数
    xmlhttp.onreadystatechange = function(){
        //xmlhttp.readyState==4 && xmlhttp.status==200 标识服务器处理完成
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //获取服务器的结果 xmlhttp.responseXML才是服务器的应答
            //获取服务器的结果 xmlhttp.responseText才是服务器的应答
            var ret = xmlhttp.responseText;
            //局部更新网页上的label
            document.getElementById("label").innerHTML = ret;
        }
    }

    //3、open
    var url="./file/a.txt";
    xmlhttp.open("GET", url, true);//异步方式
    
    //4、send
    xmlhttp.send();
}

运行结果:
在这里插入图片描述

二、CGI

CGI的概述

CGI是任何具备标准输入、输出、环境变量的语言编写并生成的可执行文件。

什么是CGI?

CGI是通用网关接口(Common Gateway Interface);
是HTTP服务器与其它程序进行“交谈”的工具
通过CGI接口就能在服务器端运行其他的程序。

CGI处理步骤

1、通过浏览器将用户请求送到服务器
2、服务器接收用户请求并交给CGI程序处理
3、CGI程序把处理结果传送给服务器
4、服务器把结果送回到浏览器

CGI编程

(1)CGI程序通过标准输入(stdin)、标准输出(stdout)实现与web服务器间信息的传递
(2)环境变量为Web服务器和CGI接口之间约定的,用来向CGI程序传递一些重要的参数

在这里插入图片描述
在这里插入图片描述
CGI传送给Web服务器的信息可以用各种格式,通常是以HTML文本或者XML文本的形式
(1)传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
(2)传输XML文本第一行输出的内容必须是"content-type:text/xml\n\n"
(3)还有其他的一些格式:JIF(image/gif)、JPEG(image/jpeg)、AVI(video/avi)

案例、cgi实现计算器(GET异步方式实现)

在这里插入图片描述

两个重要的CGI环境变量:

1、QUERY_STRING:在浏览器端以GET的方法输入的数据,数据的内容就是url问号后的内容
//可以直接读取到数据
char *data = getenv("QUERY_STRING");//data-->"10+20"
2、CONTENT_LENGTH:在浏览器端以POST方法输入的数据的字节数,数据的内容通过标准输入获取
1、首先的到数据的长度
char *len = getenv("CONTENT_LENGTH");

2、根据长度 从标准输入设备 获取内容
char data[128]="";
fgets(data,atoi(len)+1, stdin);//"10+20"

index.html

<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <!--这是描述 js中的函数来之哪个js文件-->
        <script type="text/javascript" src="04_js.js"></script>
    </head>
    <body>
       data1:<input type="text" id="data1">
       <br>
       data2:<input type="text" id="data2">
       <br>
       结果:<label id="ret"></label>
       <br>
       <input type="button" value="add" onclick="calc_fun(1);">
       <input type="button" value="sub" onclick="calc_fun(0);">
       
    </body>
</html>

04_js.js

function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本,如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else//如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{
    //1、获取网页输入框的数据data1 data2
    var data1 = document.getElementById("data1").value;
    var data2 = document.getElementById("data2").value;
    //判断data1 data2是否合法
    if(isNaN(data1) || isNaN(data2) )
    {
        document.getElementById("data1").value="";
        document.getElementById("data2").value="";
        alert("请输入有效的数值");
        return;
    }

    //组包请求报文url "/cgi-bin/calc.cgi?10+20"  "/cgi-bin/calc.cgi?10-20"
    var url="/cgi-bin/calc.cgi?";
    url +=data1;
    if(arg == "1")//加
    {
        url +="+";
    }
    else if(arg == "0")//减
    {
        url +="-";
    }
    url+=data2;
    alert("url:"+url);

    //创建一个xmlHttpRequest对象
    var xmlHttp = null;
    xmlHttp =  getXMLHttpRequest();

    //设置回调函数
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status==200)
        {
            //获取服务器的结果
            var ret = xmlHttp.responseText;
            //将ret赋值给label
            document.getElementById("ret").innerHTML=ret;
        }
    }

    //open
    xmlHttp.open("GET", url, true);

    //send
    xmlHttp.send();//将请求url发送给服务器

}

04_calc.c

#include<stdio.h>
#include<stdlib.h>
int main()
{
    //传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
    printf("content-type:text/html\n\n");

    //获取服务器的数据 GET方式 QUERY_STRING
    char *data = getenv("QUERY_STRING");//data-->"10+20"
    
    //解析data
    int data1=0,data2=0;
    char ch = 0;
    sscanf(data,"%d%c%d", &data1, &ch, &data2);
    if(ch == '+')//加法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1+data2);
    }
    else if(ch == '-')//减法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1-data2);
    }

    return 0;
}

gcc 04_calc.c -o calc.cgi
将文件放到"/cgi-bin/"目录下
运行结果:
在这里插入图片描述

案例、cgi实现计算器(GET同步方式实现)

同步流程:
1、创建对象
2、open 建立对服务器的请求
3、send 向服务器发送请求
4、fun 函数处理,服务器反馈结果。

index.htm

<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <!--这是描述 js中的函数来之哪个js文件-->
        <script type="text/javascript" src="00_js.js"></script>
    </head>
    <body>
       data1:<input type="text" id="data1">
       <br>
       data2:<input type="text" id="data2">
       <br>
       结果:<label id="ret"></label>
       <br>
       <input type="button" value="add" onclick="calc_fun(1);">
       <input type="button" value="sub" onclick="calc_fun(0);">
       
    </body>
</html>

00_js.js

//不要设置回调函数,在程序最后等待服务器应答
function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本,如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else//如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{
    //1、获取网页输入框的数据data1 data2
    var data1 = document.getElementById("data1").value;
    var data2 = document.getElementById("data2").value;
    //判断data1 data2是否合法
    if(isNaN(data1) || isNaN(data2) )
    {
        document.getElementById("data1").value="";
        document.getElementById("data2").value="";
        alert("请输入有效的数值");
        return;
    }

    //组包请求报文url "/cgi-bin/calc.cgi?10+20"  "/cgi-bin/calc.cgi?10-20"
    var url="/cgi-bin/calc.cgi?";
    url +=data1;
    if(arg == "1")//加
    {
        url +="+";
    }
    else if(arg == "0")//减
    {
        url +="-";
    }
    url+=data2;
    alert("url:"+url);

    //创建一个xmlHttpRequest对象
    var xmlHttp = null;
    xmlHttp =  getXMLHttpRequest();

    //open
    xmlHttp.open("GET", url, false);//false表示同步

    //send
    xmlHttp.send();//将请求url发送给服务器

    //等待服务器的应答(同步)
    if(xmlHttp.readyState == 4 && xmlHttp.status==200)
    {
        //获取服务器的结果
        var ret = xmlHttp.responseText;
        //将ret赋值给label
        document.getElementById("ret").innerHTML=ret;
    }
}

04_calc.c

#include<stdio.h>
#include<stdlib.h>
int main()
{
    //传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
    printf("content-type:text/html\n\n");

    //获取服务器的数据 GET方式 QUERY_STRING
    char *data = getenv("QUERY_STRING");//data-->"10+20"
    
    //解析data
    int data1=0,data2=0;
    char ch = 0;
    sscanf(data,"%d%c%d", &data1, &ch, &data2);
    if(ch == '+')//加法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1+data2);
    }
    else if(ch == '-')//减法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1-data2);
    }

    return 0;
}

在这里插入图片描述

案例、cgi实现计算器(POST的异步方式实现)

post:将表单数据包含在表单的主体中,一起传输到服务器上。没有长度限制,密文传输
POST数据是密文传输 不能将数据放入?后面
POST send 由于url没有数据 所以只能用send将data发送出去
获取服务器的数据 POST方式 QUERY_STRING

index.html

<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <!--这是描述 js中的函数来之哪个js文件-->
        <script type="text/javascript" src="01_js.js"></script>
    </head>
    <body>
       data1:<input type="text" id="data1">
       <br>
       data2:<input type="text" id="data2">
       <br>
       POST结果:<label id="ret"></label>
       <br>
       <input type="button" value="add" onclick="calc_fun(1);">
       <input type="button" value="sub" onclick="calc_fun(0);">
    </body>
</html>

01_js.js

function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本,如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{
    //1、获取网页输入框的数据data1 data2
    var data1 = document.getElementById("data1").value;
    var data2 = document.getElementById("data2").value;
    //判断data1 data2是否合法
    if(isNaN(data1) || isNaN(data2) )
    {
        document.getElementById("data1").value="";
        document.getElementById("data2").value="";
        alert("请输入有效的数值");
        return;
    }

    //POST数据是密文传输 不能将数据放入?后面
    var url="/cgi-bin/calc.cgi";

    //将发送给服务器的数据data
    var data="";
    data +=data1;
    if(arg == "1")//加
    {
        data +="+";
    }
    else if(arg == "0")//减
    {
        data +="-";
    }
    data+=data2;
    alert("data:"+data);

    //创建一个xmlHttpRequest对象
    var xmlHttp = null;
    xmlHttp =  getXMLHttpRequest();

    //设置回调函数
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status==200)
        {
            //获取服务器的结果
            var ret = xmlHttp.responseText;
            //将ret赋值给label
            document.getElementById("ret").innerHTML=ret;
        }
    }

    //open POST
    xmlHttp.open("POST", url, true);

    //POST send 由于url没有数据 所以只能用send将data发送出去
    xmlHttp.send(data);//将data发送给服务器

}

05_post.c

#include<stdio.h>
#include<stdlib.h>
int main()
{
    //传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
    printf("content-type:text/html\n\n");

    //获取服务器的数据 POST方式 QUERY_STRING
    //1、首先的到数据的长度
    char *len = getenv("CONTENT_LENGTH");

    //2、根据长度 从标准输入设备 获取内容
    char data[128]="";
    fgets(data,atoi(len)+1, stdin);//"10+20"
    
    //解析data
    int data1=0,data2=0;
    char ch = 0;
    sscanf(data,"%d%c%d", &data1, &ch, &data2);
    if(ch == '+')//加法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1+data2);
    }
    else if(ch == '-')//减法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1-data2);
    }

    return 0;
}

案例、cgi实现计算器(POST的同步方式实现)

index.html

<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <!--这是描述 js中的函数来之哪个js文件-->
        <script type="text/javascript" src="02_js.js"></script>
    </head>
    <body>
       data1:<input type="text" id="data1">
       <br>
       data2:<input type="text" id="data2">
       <br>
       POST同步结果:<label id="ret"></label>
       <br>
       <input type="button" value="add" onclick="calc_fun(1);">
       <input type="button" value="sub" onclick="calc_fun(0);">
       
    </body>
</html>

02_js.js

function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本,如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{
    //1、获取网页输入框的数据data1 data2
    var data1 = document.getElementById("data1").value;
    var data2 = document.getElementById("data2").value;
    //判断data1 data2是否合法
    if(isNaN(data1) || isNaN(data2) )
    {
        document.getElementById("data1").value="";
        document.getElementById("data2").value="";
        alert("请输入有效的数值");
        return;
    }

    //POST数据是密文传输 不能将数据放入?后面
    var url="/cgi-bin/calc.cgi";

    //将发送给服务器的数据data
    var data="";
    data +=data1;
    if(arg == "1")//加
    {
        data +="+";
    }
    else if(arg == "0")//减
    {
        data +="-";
    }
    data+=data2;
    alert("data:"+data);

    //创建一个xmlHttpRequest对象
    var xmlHttp = null;
    xmlHttp =  getXMLHttpRequest();

    //open POST
    xmlHttp.open("POST", url, false);//false 同步

    //POST send 由于url没有数据 所以只能用send将data发送出去
    xmlHttp.send(data);//将data发送给服务器

    if(xmlHttp.readyState == 4 && xmlHttp.status==200)
    {
        //获取服务器的结果
        var ret = xmlHttp.responseText;
        //将ret赋值给label
        document.getElementById("ret").innerHTML=ret;
    }
}

05_post.c

#include<stdio.h>
#include<stdlib.h>
int main()
{
    //传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
    printf("content-type:text/html\n\n");

    //获取服务器的数据 POST方式 QUERY_STRING
    //1、首先的到数据的长度
    char *len = getenv("CONTENT_LENGTH");

    //2、根据长度 从标准输入设备 获取内容
    char data[128]="";
    fgets(data,atoi(len)+1, stdin);//"10+20"
    
    //解析data
    int data1=0,data2=0;
    char ch = 0;
    sscanf(data,"%d%c%d", &data1, &ch, &data2);
    if(ch == '+')//加法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1+data2);
    }
    else if(ch == '-')//减法运算
    {
        //将处理的结果 发送给服务器
        printf("%d\n", data1-data2);
    }

    return 0;
}

运行结果:
在这里插入图片描述

三、web点灯

如图:
了解led原理图:
点亮灯 GPIO为低电平:
GPIOA 32管脚 GPIOB 32管脚
GPIOC7—>gpio71
GPIOC11—>gpio75
GPIOC12—>gpio76
在这里插入图片描述
开发板上的程序 必须使用交叉编译器:arm-linux-gcc
index.html

<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <!--这是描述 js中的函数来之哪个js文件-->
        <script type="text/javascript" src="03_js.js"></script>
    </head>
    <body>
       <img id="led1" src="./image/led_off.png"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <img id="led2" src="./image/led_off.png">   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <img id="led3" src="./image/led_off.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <br>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="button" value="开关" id="btn1" onclick="deal_led('led1');">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="button" value="开关" id="btn2" onclick="deal_led('led2');">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="button" value="开关" id="btn3" onclick="deal_led('led3');">
       
    </body>
</html>

03_js.js

function getXMLHttpRequest()
{
    var xmlhttp = null;
    if (window.XMLHttpRequest)//自动检测当前浏览器的版本,如果是IE5.0以上的高版本的浏览器
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();//创建请求对象
    }
    else如果浏览器是底版本的
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象
    }
    return xmlhttp;//返回请求对象
}
function deal_led(arg)//arg就是img的id led1  led2 led3
{  
    var url="/cgi-bin/led.cgi?";
    url+=arg;

    var path = document.getElementById(arg).src;
    if(path.indexOf("led_off",0) != -1)
    {
        document.getElementById(arg).src = "./image/led_on.png";
        url+=":1";
    }
    else if(path.indexOf("led_on",0) != -1)
    {
        document.getElementById(arg).src = "./image/led_off.png";
        url+=":0";
    }

    //创建xmlhttp对象
    var xmlhttp = getXMLHttpRequest();
    //设置回调函数
    xmlhttp.onreadystatechange=function(){
        //alert("xmlHttp.readyState="+xmlHttp.readyState,+",xmlHttp.status="+xmlHttp.status);
        if(xmlhttp.readyState == 4 && xmlhttp.status==200)
        {
            //获取服务器的结果
            var ret = xmlhttp.responseText;
            alert("ret="+ret);
        }
    }

    //open
    xmlhttp.open("GET",url, true);//url="/cgi-bin/led.cgi?led2:1"

    //send
    xmlhttp.send();
}

led.c

#include<stdio.h>
#include<stdlib.h>
#include<unistd.h>
void led_init()
{
    //判断GPIO是否在系统中打开
    if(access("/sys/class/gpio/gpio71/value", F_OK))//不存在
    {
        system("echo 71 > /sys/class/gpio/export");//到处IO口
    }
    if(access("/sys/class/gpio/gpio75/value", F_OK))//不存在
    {
        system("echo 75 > /sys/class/gpio/export");//到处IO口
    }
    if(access("/sys/class/gpio/gpio76/value", F_OK))//不存在
    {
        system("echo 76 > /sys/class/gpio/export");//到处IO口
    }

    //设置IO的方向(输出 输入)
    system("echo out > /sys/class/gpio/gpio71/direction");
    system("echo out > /sys/class/gpio/gpio75/direction");
    system("echo out > /sys/class/gpio/gpio76/direction");

    //将所有的灯灭掉
    system("echo 1 > /sys/class/gpio/gpio71/value");
    system("echo 1 > /sys/class/gpio/gpio75/value");
    system("echo 1 > /sys/class/gpio/gpio76/value");
}
void set_led(int led, int on_off)
{
    //判断哪一个灯
    if(led == 1)
    {
        //判断开关状态
        if(on_off == 1)//亮
        {
            //io口 输出低电平
            system("echo 0 > /sys/class/gpio/gpio71/value");
        }
        else if(on_off == 0)//灭
        {
            system("echo 1 > /sys/class/gpio/gpio71/value");
        }
    }
    else if(led == 2)
    {
        //判断开关状态
        if(on_off == 1)//亮
        {
            //io口 输出低电平
            system("echo 0 > /sys/class/gpio/gpio75/value");
        }
        else if(on_off == 0)//灭
        {
            system("echo 1 > /sys/class/gpio/gpio75/value");
        }
    }
    else if(led == 3)
    {
        //判断开关状态
        if(on_off == 1)//亮
        {
            //io口 输出低电平
            system("echo 0 > /sys/class/gpio/gpio76/value");
        }
        else if(on_off == 0)//灭
        {
            system("echo 1 > /sys/class/gpio/gpio76/value");
        }
    }
}
int main()
{
    //传输HTML 文本第一行输出的内容必须是"content-type:text/html\n\n"
    printf("content-type:text/html\n\n");

    //获取服务器的数据 GET方式 QUERY_STRING
    char *data = getenv("QUERY_STRING");//data-->"10+20"
    
    //解析data="led2:1"
    int led =0, on_off = 0;
    sscanf(data,"led%d:%d", &led, &on_off);

    //初始化设备
    led_init();

    //设置灯的状态
    set_led(led, on_off);
    
    return 0;
}
  • 6
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值