admin 管理员组文章数量: 887176
13
知识点1【cgi实现计算器案例】
2、GET的同步方式：
index.html
<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, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象}return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{//1、获取网页输入框的数据data1 data2var 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();//openxmlHttp.open("GET", url, false);//false表示同步//sendxmlHttp.send();//将请求url发送给服务器//等待服务器的应答（同步）if(xmlHttp.readyState == 4 && xmlHttp.status==200){//获取服务器的结果var ret = xmlHttp.responseText;//将ret赋值给labeldocument.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_STRINGchar *data = getenv("QUERY_STRING");//data-->"10+20"//解析dataint 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;
}运行结果：
3、POST的异步方式
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, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象}return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{//1、获取网页输入框的数据data1 data2var 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";//将发送给服务器的数据datavar 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赋值给labeldocument.getElementById("ret").innerHTML=ret;}}//open POSTxmlHttp.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"//解析dataint 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;
}运行结果：
4、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, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象}return xmlhttp;//返回请求对象
}
function calc_fun(arg)
{//1、获取网页输入框的数据data1 data2var 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";//将发送给服务器的数据datavar data="";data +=data1;if(arg == "1")//加{data +="+";}else if(arg == "0")//减{data +="-";}data+=data2;alert("data:"+data);//创建一个xmlHttpRequest对象var xmlHttp = null;xmlHttp = getXMLHttpRequest();//open POSTxmlHttp.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赋值给labeldocument.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"//解析dataint 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;
}运行结果：
知识点2【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"> <img id="led2" src="./image/led_off.png"> <img id="led3" src="./image/led_off.png"> <br> <input type="button" value="开关" id="btn1" onclick="deal_led('led1');"> <input type="button" value="开关" id="btn2" onclick="deal_led('led2');"> <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, Safarixmlhttp=new XMLHttpRequest();//创建请求对象}else如果浏览器是底版本的{// code for IE6, IE5xmlhttp=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);}}//openxmlhttp.open("GET",url, true);//url="/cgi-bin/led.cgi?led2:1"//sendxmlhttp.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_STRINGchar *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;
}知识点3【路由器项目】
不同网段通信的桥梁
将我们的ubuntu作为路由器。
//ubuntu里
//1、创建一个原始套接字 用来收发数据
int sockfd = socket(PF_PACKET, SOCK_RAW, htons(ETH_P_ALL));
//2、创建一个线程 用来接受网络数据recvfrom
unsigned char buf[1500]="";
int len = recvfrom(sockfd, buf);
3、判断buf中的目的mac地址 和 路由器的哪块网卡的mac相同 就表明哪块网卡收到
4、buf中帧类型0x0800提取目的IP，如果目的IP和路由器的某块网卡是同一个网段，
数据就从该网卡出去（src_mac该网卡的mac 目的mac为目的主机mac）
5、buf中帧类型0x0800提取目的IP，入宫目的IP和路由器的所有网卡都不同一个网段，
查看路由表 寻找下一跳 查看路由器的哪块网卡 和下一跳同一个网段，还数据就从
改网卡 发送到下一跳（src_mac该网卡的mac 目的mac为下一跳mac）
注意：以上目的主机或者下一跳的mac 如果没有记录记得用arp获取 并存入arp表中2、和路由器交互（终端、网页）（创新）
3、win10配置（静态的）：只需将网关设置eth0的IP
4、手机设置（静态的）：ip:192.168.1.3 网关是192.168.1.2
5、虚拟的设置：
添加网卡：
设置成桥接模式：
给eth0设置指定的IP
添加新的连接：
配置成功：
基本功能完成：
如果win10 ping通 手机
手机 ping通 win10
创新：
1、多网卡 3个
2、防火墙不转发
3、动态获取ip mac
补充思路：
unsigned char phone_mac[]={};
unsigned char phone_ip[]={};
unsigned char win_mac[]={};
unsigned char win_ip[]={};
int main()
{int sockfd = sockfd(原始套接字);//获取网络接口getinterface();while(1){int len = recvfrom(sokcfd, buf,sizeof(buf),0,NULL,NULL);//转发ip报文unsigned short mac_type = ntohs(*(unsigned short *)(buf+12));if(mac_type == 0x0800)//转发{//判断 buf中的目的IP 和 路由器的哪块网卡同一个网段unsigned char *dst_ip = buf+14+16;int i=0;for(i=0;i<interface_num;i++){if(memcmp(dst_ip, net_interface[i].ip, 3) == 0 && \memcmp(dst_ip, net_interface[i].ip, 4) != 0){//修改buf中源mac未路由器的接口macmemcpy(buf+6, net_interface[i].mac, 6);//修改目的mac#if 0//固定if(memcmp(dst_ip, phone_ip, 4) == 0)memcpy(buf, phone_mac, 6);else if(memcmp(dst_ip, win_ip, 4) == 0)memcpy(buf, win_mac, 6);#else//从arp表中查找dst_ip对应的macunsigned char *dst_mac = find_from_arp();if(dst_mac == NULL){//发送arp请求break;}else if(dst_mac != NULL){memcpy(buf, dst_mac, 6);}#endifmy_sendto(sockfd, net_interface[i].name, buf,len, );break;}}//目的ip和路由器的所有接口都不在同一个网段if(i == interface_num){//分析路由器表}}else if(mac_type == 0x0806)//arp 应答 更新arp表{}}}
本文标签： 13
版权声明：本文标题：13 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1686792454h37073.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论