AJAX和CGI 技术的应用
AJAX，CGI
一、AJAX1、AJAX的概述AJAX局部更新网页流程图：异步流程：
2、AJAX的通信过程2.1、创建xmlHttpRequest对象2.2、设置服务器响应的回调函数标准的XMLHttpRequest属性服务器的应答：标准的XMLHttpRequest对象的方法
2.3、open的使用2.4、send的使用
AJAX案例：请求服务器上的文件数据
二、CGICGI的概述什么是CGI?CGI处理步骤CGI编程
案例、cgi实现计算器（GET异步方式实现）两个重要的CGI环境变量:1、QUERY_STRING：在浏览器端以GET的方法输入的数据，数据的内容就是url问号后的内容2、CONTENT_LENGTH：在浏览器端以POST方法输入的数据的字节数，数据的内容通过标准输入获取
案例、cgi实现计算器（GET同步方式实现）案例、cgi实现计算器（POST的异步方式实现）案例、cgi实现计算器（POST的同步方式实现）
三、web点灯
一、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
文件的内容:
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
data1:
data2:
结果:
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
#include
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
data1:
data2:
结果:
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
#include
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
data1:
data2:
POST结果:
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
#include
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
data1:
data2:
POST同步结果:
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
#include
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
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
#include
#include
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;
}