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（未找到））
statusText	HTTP狀態碼的相應文本（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;
}

AJAX和CGI 技術的應用

AJAX，CGI

一、AJAX

1、AJAX的概述

AJAX局部更新網頁流程圖：

異步流程：

2、AJAX的通信過程

2.1、創建xmlHttpRequest對象

2.2、設置服務器響應的回調函數

標準的XMLHttpRequest屬性

服務器的應答：

標準的XMLHttpRequest對象的方法

2.3、open的使用

2.4、send的使用

AJAX案例：請求服務器上的文件數據

二、CGI

CGI的概述

什麼是CGI?

CGI處理步驟

CGI編程

案例、cgi實現計算器（GET異步方式實現）

兩個重要的CGI環境變量:

1、QUERY_STRING：在瀏覽器端以GET的方法輸入的數據，數據的內容就是url問號後的內容

2、CONTENT_LENGTH：在瀏覽器端以POST方法輸入的數據的字節數，數據的內容通過標準輸入獲取

案例、cgi實現計算器（GET同步方式實現）

案例、cgi實現計算器（POST的異步方式實現）

案例、cgi實現計算器（POST的同步方式實現）

三、web點燈