一。HTTP詳解
1.超文本：（HyperText）
（1）超文本文件彼此鏈接，形成網(wǎng)狀（web），內(nèi)含有超鏈接（Link）與各種媒體元素標(biāo)記（Markup）。
（2）超文本文件彼此鏈接使用URL表示。（下面解釋URL）
（3）常見超文本格式是超文本標(biāo)記語言HTML。（下面解釋HTML，代碼）
綜上：學(xué)習(xí)超文本需要了解超鏈接，超文本標(biāo)記語言
2.URL
（1）URL稱為統(tǒng)一資源定位符Uniform Resource Locator，唯一標(biāo)識萬維網(wǎng)的某個文檔。
（2）URL組成:協(xié)議+（主機(jī)+端口）+文件名
?3.HTTP
（1）工作原理
? ? ? ? 在我看來就是建立TCP連接，客戶機(jī)發(fā)送請求文檔，服務(wù)器端發(fā)送響應(yīng)文檔。三次握手四次揮手。
（2）請求報文與響應(yīng)報文（字段為ASCLL碼，?CRLF為回車）
?（3）請求方法
1.GET：請求讀取一個Web頁面
2.POST：附加一個命名資源（如Web頁面）
3.DELETE：刪除Web頁面
4.CONNECT：用于代理服務(wù)器
5.HEAD：請求讀取一個Web頁面的首部
6.PUT：請求存儲一個Web頁面
7.TRACE：用于測試，要求服務(wù)器送回收到的請求
8.OPTION：查詢特定選項
二。實驗：初步使用Web超文本標(biāo)記語音html
1.實驗1：html
? ? 復(fù)制下面代碼到一個文件夾下，后綴改為 .html，雙擊打開。
<HTML>
?? ?<HEAD>
?? ??? ?<TITLE>歡迎進(jìn)入 HTML 世界</TITLE>
?? ?</HEAD>
?? ?<BODY>
?? ??? ?<P>這會是一種很有趣的體驗</P>
?? ?</BODY>
</HTML>代碼解答：
? ? ? ? 1.大框架，<HTML> 內(nèi)容 </HTML>
? ? ? ? 2.頭名稱，<HEAD> 內(nèi)容 </HEAD>
????????????????<TITLE>歡迎進(jìn)入 HTML 世界</TITLE>
????????????????
? ? ? ? 3.頁面內(nèi)容，<BODY> 內(nèi)容 </BODY>
????????????????<P>這會是一種很有趣的體驗</P>
?????????????????
? ?? ? ? ? ??? ? ? ???
結(jié)果：
2.實驗2：引入CSS?
（1）CSS作用：樣式修改
（2）步驟：
創(chuàng)建一個文件夾，后綴名為 .html
<HTML>
<HEAD>
<TITLE>歡迎進(jìn)入 HTML 世界</TITLE>
<style type="text/css">
p{
font-size:200px;
color:red;
}
</style>
</HEAD>
<BODY>
<P>這會是一種很有趣的體驗</P>
</BODY>
</HTML>代碼解答：
? ? ? ? 1.style樣式：中間寫對<BODY>中的樣式處理
? ? ? ? 2.樣式中的p{}對應(yīng)<BODY>中的<p>,即style中對<p></p>中數(shù)據(jù)進(jìn)行樣式處理
3.實驗：引入javascript
（1）javascript介紹
1.javascript是互聯(lián)網(wǎng)上最流行的腳本語言，可以用于HTML和web。
2.具體的功能包括：
直接寫入 HTML 輸出流
對事件的反應(yīng)
改變 HTML 內(nèi)容
改變 HTML 圖像
改變 HTML 樣式
驗證輸入
（2）步驟：
<HTML>
<HEAD>
<TITLE>歡迎進(jìn)入 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"> 內(nèi)容 </script>中是寫HTML的動作
? ? ? ? 2.setInterval(changeImg,1000);//使用函數(shù)，1秒運行一次
? ? ? ? ? ?function changeImg(){}//函數(shù)具體實現(xiàn)? ? ? ? 3.<img id = "obj" src = "1.jpg"/>命名圖片的id，初始化一個屬性為“src”，在javaScript中使用可以對其進(jìn)行修改，這樣就可以改變HTML的動作。
使用代碼步驟
1.在桌面下創(chuàng)建
2.點擊hello.html
會自己改變圖片。
?三。實驗三：ajax技術(shù)
1.ajax作用
? ? ? ? ajax主要是為了與服務(wù)器交換數(shù)據(jù)，更新部分頁面內(nèi)容。
2.ajax使用
（1）創(chuàng)建XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}（2）向服務(wù)器發(fā)送請求
<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發(fā)送數(shù)據(jù)。
<異步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()相當(dāng)于C語言的回調(diào)函數(shù)，所以使用異步true可以像C語言中斷回調(diào)一樣，不需要堵塞程序。
<同步false>
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;? ? ? ? 同步會堵塞程序，即沒有連接成功會一直在等待連接，效率差。
3.html實現(xiàn)
（1）基礎(chǔ)實現(xiàn)
<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="關(guān)閉" style="width:160px;height:80px;background:red;" onclick="ledSwitch('white')" />
</div>
</body>
</html>1.使用方法? ? ? ??
????????復(fù)制到 .html文件中，直接運行。
2.解釋
? ? ? ? （1）<script></script>中寫函數(shù)
? ? ? ? （2）onclick表示按鍵，按下后調(diào)用script中的函數(shù)。
3.詳細(xì)解釋
（2）交互功能實現(xiàn)
<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="關(guān)閉" style="width:160px;height:80px;background:red;" onclick="ledSwitch('off')" />
</div>
</body>
</html>
?代碼解釋：
? ? ? ? （1）復(fù)制到.html中
? ? ? ? （2）打開EasyWebServer，設(shè)置主目錄為桌面，端口號80
? ? ? ? （3）在瀏覽器中輸入127.0.0.1/hello.html
四。最終實驗：web點亮stm32的led燈
1.cubemx創(chuàng)建工程
?（0）串口，時鐘，F(xiàn)reertos都配置完成
? （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=\"關(guān)閉\" 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){
//響應(yīng)頭
sprintf(SendBuff, "HTTP/1.1 200 OK\r\n");
Write(cfd, SendBuff, strlen(SendBuff));
//響應(yīng)首部
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));
//響應(yīng)主題
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);
//是否為 關(guān)閉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 服務(wù)器任務(wù)
* @param None
* @retval None
*/
void vHttpServerTask(void){
int sfd, cfd, n;
struct sockaddr_in server_addr, client_addr;
socklen_t client_addr_len;
//創(chuàng)建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));
//監(jiān)聽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){
//等待客戶端發(fā)送數(shù)據(jù)
n = Read(cfd, ReadBuff, BUFF_SIZE);
if(n <= 0){
goto again;
}
//解析響應(yīng)http協(xié)議
HttpParResponse(cfd, ReadBuff);
//http響應(yīng)后要關(guān)閉fd
close(cfd);
goto again;
}
}
4.結(jié)果
stm32為服務(wù)器，所以輸入stm32的IP地址192.168.1.10，stm32的燈會被按鈕控制。文章來源：http://www.zghlxwxcb.cn/news/detail-688598.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-688598.html
到了這里，關(guān)于8.物聯(lián)網(wǎng)LWIP，簡要介紹http（超文本，URL），html（css，ajax），web實現(xiàn)打開燈的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
