一。HTTP详解
1.超文本：（HyperText）
（1）超文本文件彼此链接，形成网状（web），内含有超链接（Link）与各种媒体元素标记（Markup）。
（2）超文本文件彼此链接使用URL表示。（下面解释URL）
（3）常见超文本格式是超文本标记语言HTML。（下面解释HTML，代码）
综上：学习超文本需要了解超链接，超文本标记语言
2.URL
（1）URL称为统一资源定位符Uniform Resource Locator，唯一标识万维网的某个文档。
（2）URL组成:协议+（主机+端口）+文件名
3.HTTP
（1）工作原理
在我看来就是建立TCP连接，客户机发送请求文档，服务器端发送响应文档。三次握手四次挥手。
（2）请求报文与响应报文（字段为ASCLL码， CRLF为回车）
（3）请求方法
1.GET：请求读取一个Web页面
2.POST：附加一个命名资源（如Web页面）
3.DELETE：删除Web页面
4.CONNECT：用于代理服务器
5.HEAD：请求读取一个Web页面的首部
6.PUT：请求存储一个Web页面
7.TRACE：用于测试，要求服务器送回收到的请求
8.OPTION：查询特定选项
二。实验：初步使用Web超文本标记语音html
1.实验1：html
复制下面代码到一个文件夹下，后缀改为 .html，双击打开。
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
</HEAD>
<BODY>
<P>这会是一种很有趣的体验</P>
</BODY>
</HTML>代码解答：
1.大框架，<HTML> 内容 </HTML>
2.头名称，<HEAD> 内容 </HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
3.页面内容，<BODY> 内容 </BODY>
<P>这会是一种很有趣的体验</P>
结果：
2.实验2：引入CSS
（1）CSS作用：样式修改
（2）步骤：
创建一个文件夹，后缀名为 .html
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<style type="text/css">
p{
font-size:200px;
color:red;
}
</style>
</HEAD>
<BODY>
<P>这会是一种很有趣的体验</P>
</BODY>
</HTML>代码解答：
1.style样式：中间写对<BODY>中的样式处理
2.样式中的p{}对应<BODY>中的<p>,即style中对<p></p>中数据进行样式处理
3.实验：引入javascript
（1）javascript介绍
1.javascript是互联网上最流行的脚本语言，可以用于HTML和web。
2.具体的功能包括：
直接写入 HTML 输出流
对事件的反应
改变 HTML 内容
改变 HTML 图像
改变 HTML 样式
验证输入
（2）步骤：
<HTML>
<HEAD>
<TITLE>欢迎进入 HTML 世界</TITLE>
<script type = "text/javascript">
var arr = new Array();
arr[0] = "1.jpg";
arr[1] = "2.jpg";
arr[2] = "3.jpg";
var i = 0;
setInterval(changeImg,1000);
function changeImg()
{
var obj = document.getElementById("obj");
obj.src = arr[i++];
if(i == 3){
i = 0;
}
}
</script>
</HEAD>
<BODY>
<P>这会是一种很有趣的体验</P>
<img id = "obj" src = "1.jpg"/>
</BODY>
</HTML>解释：
1.<script type = "text/javascript"> 内容 </script>中是写HTML的动作
2.setInterval(changeImg,1000);//使用函数，1秒运行一次
function changeImg(){}//函数具体实现3.<img id = "obj" src = "1.jpg"/>命名图片的id，初始化一个属性为“src”，在javaScript中使用可以对其进行修改，这样就可以改变HTML的动作。
使用代码步骤
1.在桌面下创建
2.点击hello.html
会自己改变图片。
三。实验三：ajax技术
1.ajax作用
ajax主要是为了与服务器交换数据，更新部分页面内容。
2.ajax使用
（1）创建XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}（2）向服务器发送请求
<GET>
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();<POST>
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");上述GET与POST都是需要先open打开，其次send发送数据。
<异步true>
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();xmlhttp.onreadystatechange=function()相当于C语言的回调函数，所以使用异步true可以像C语言中断回调一样，不需要堵塞程序。
<同步false>
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;同步会堵塞程序，即没有连接成功会一直在等待连接，效率差。
3.html实现
（1）基础实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web 点灯</title>
<script defer="defer">
function ledSwitch(string) {
document.getElementById("txtState").style.backgroundColor = string;
}
</script>
</head>
<body style="background-color:black">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Web 点灯</big></div>
</b>
</font>
<br> </br>
<div align="center" id="txtState"style="margin:auto;width:160px;height:160px;border-radius:50%;background:white;"></div>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="打开" style="width:160px;height:80px;background:green;" onclick="ledSwitch('red')" />
<input type="button" value="关闭" style="width:160px;height:80px;background:red;" onclick="ledSwitch('white')" />
</div>
</body>
</html>1.使用方法
复制到 .html文件中，直接运行。
2.解释
（1）<script></script>中写函数
（2）onclick表示按键，按下后调用script中的函数。
3.详细解释
（2）交互功能实现
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web 点灯</title>
<script defer="defer">
function ledSwitch(string) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtState").style.backgroundColor = xmlhttp.responseText;
console.log(xmlhttp.responseText);
}
},
xmlhttp.open("GET", string, true);
xmlhttp.send();
}
</script>
</head>
<body style="background-color:black">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Web 点灯</big></div>
</b>
</font>
<br> </br>
<div align="center" id="txtState"style="margin:auto;width:160px;height:160px;border-radius:50%;background:white;"></div>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="打开" style="width:160px;height:80px;background:green;" onclick="ledSwitch('on')" />
<input type="button" value="关闭" style="width:160px;height:80px;background:red;" onclick="ledSwitch('off')" />
</div>
</body>
</html>
代码解释：
（1）复制到.html中
（2）打开EasyWebServer，设置主目录为桌面，端口号80
（3）在浏览器中输入127.0.0.1/hello.html
四。最终实验：web点亮stm32的led灯
1.cubemx创建工程
（0）串口，时钟，Freertos都配置完成
（1）配置灯led6，初始化为高电平（不亮）
（2）LWIP配置
使能DNS
使能muticast
使能IGMP
2.步骤：
（1）修改端口号为80
（2）http_server.h
#ifndef _HTTP_SERVER_H
#define _HTTP_SERVER_H
void vHttpServerTask(void);
#endif（3）http_server.c
#include "socket_tcp_server.h"
#include "socket_wrap.h"
#include "ctype.h"
#include "http_server.h"
#include "string.h"
static char ReadBuff[BUFF_SIZE];
char SendBuff[128];
char *HtmlPage =
"<html>"
"<head>"
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />"
"<title>web 点灯</title>"
"<script defer=\"defer\">"
" function ledSwitch(string) {"
" var xmlhttp;"
" if (window.XMLHttpRequest) {"
" xmlhttp = new XMLHttpRequest();"
" } else {"
" xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");"
" }"
" xmlhttp.onreadystatechange = function () {"
" if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {"
" document.getElementById(\"txtState\").style.backgroundColor = xmlhttp.responseText;"
" console.log(xmlhttp.responseText);"
" }"
" },"
" xmlhttp.open(\"GET\", string, true);"
" xmlhttp.send(); "
" }"
" </script>"
"</head>"
"<body style=\"background-color:black\">"
"<font size=\"12\" color=\"yellow\">"
"<b>"
"<div class=\"text\" style=\" text-align:center;\"><big>Web 点灯</big></div>"
"</b>"
"</font>"
"<br> </br> "
"<div align=\"center\" id=\"txtState\"style=\"margin:auto;width:160px;height:160px;border-radius:50%;background:white;\"></div>"
"<br> </br>"
"<div style=\" text-align:center;\">"
"<input type=\"button\" value=\"打开\" style=\"width:160px;height:80px;background:green;\" onclick=\"ledSwitch(\'on\')\" />"
"<input type=\"button\" value=\"关闭\" style=\"width:160px;height:80px;background:red;\" onclick=\"ledSwitch(\'off\')\" />"
"</div>"
"</body>"
"</html>";
void HttpParResponse(int cfd, char *Buff)
{
//是否为请求主页
if(strstr(Buff, "GET / HTTP/1.1") != NULL){
//响应头
sprintf(SendBuff, "HTTP/1.1 200 OK\r\n");
Write(cfd, SendBuff, strlen(SendBuff));
//响应首部
sprintf(SendBuff, "Content-Type: text/html\r\n");
Write(cfd, SendBuff, strlen(SendBuff));
sprintf(SendBuff, "Connection: Keep-Alive\r\n");
Write(cfd, SendBuff, strlen(SendBuff));
sprintf(SendBuff, "Content-Length: %d\r\n", strlen(HtmlPage));
Write(cfd, SendBuff, strlen(SendBuff));
sprintf(SendBuff, "\r\n");
Write(cfd, SendBuff, strlen(SendBuff));
//响应主题
Write(cfd, HtmlPage, strlen(HtmlPage));
//是否为 打开led
}else if(strstr(Buff, "GET /on HTTP/1.1") != NULL){
Write(cfd, "red", strlen("red"));
HAL_GPIO_WritePin(D6_GPIO_Port, D6_Pin, GPIO_PIN_RESET);
//是否为 关闭led
}else if(strstr(Buff, "GET /off HTTP/1.1") != NULL){
Write(cfd, "white", strlen("white"));
HAL_GPIO_WritePin(D6_GPIO_Port, D6_Pin, GPIO_PIN_SET);
//请求资源无效， 就是404
}else{
printf("GET Method Error\r\n");
close(cfd);
}
}
/**
* @brief http 服务器任务
* @param None
* @retval None
*/
void vHttpServerTask(void){
int sfd, cfd, n;
struct sockaddr_in server_addr, client_addr;
socklen_t client_addr_len;
//创建socket
sfd = Socket(AF_INET, SOCK_STREAM, 0);
server_addr.sin_family = AF_INET;
server_addr.sin_port = htons(SERVER_PORT);
server_addr.sin_addr.s_addr = htonl(INADDR_ANY);
//绑定socket
Bind(sfd, (struct sockaddr *)&server_addr, sizeof(server_addr));
//监听socket
Listen(sfd, 5);
//等待客户端连接
client_addr_len = sizeof(client_addr);
again:
cfd = Accept(sfd, (struct sockaddr *)&client_addr, &client_addr_len);
printf("client is connect cfd = %d\r\n",cfd);
while(1){
//等待客户端发送数据
n = Read(cfd, ReadBuff, BUFF_SIZE);
if(n <= 0){
goto again;
}
//解析响应http协议
HttpParResponse(cfd, ReadBuff);
//http响应后要关闭fd
close(cfd);
goto again;
}
}
4.结果
stm32为服务器，所以输入stm32的IP地址192.168.1.10，stm32的灯会被按钮控制。文章来源：https://www.toymoban.com/news/detail-688598.html
文章来源地址https://www.toymoban.com/news/detail-688598.html
到了这里，关于8.物联网LWIP，简要介绍http（超文本，URL），html（css，ajax），web实现打开灯的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
