在浏览器输入socket地址后,可以在串口助手上看到以下数据:(以下数据均为字符)
//------------------------------------------------
GET / HTTP/1.1
Host: 192.168.1.199
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36 SE 2.X MetaSr 1.0
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8
//------------------------------------------------
这就是浏览器向服务器发送的请求数据(不同浏览器的数据稍有不同),关于这些数据的含义,请参看以下两篇文章:
->(文章1) .html我们通过相应socket向浏览器返回一个登陆界面 Login.HTML的代码:(下文相同代码均用(网页代码1)等方式表示)
(网页代码1)
//------------------------------------------------
<!DOCTYPE html>
<html>
<title>LOGIN</title>
<body>
<form method='get' action=i'>
用户名:<input type='text' name='username'><br>
密 码:<input type='password' name='password'><br>
<input type='submit' value='登 录'>
</form>
</body>
</html>
//------------------------------------------------
因为单片机的储存空间有限,一般将网页以const的形式存放在flash中,而且尽量精简,除了必要的效果和兼容性语句外,
其他都可以删掉(如对齐格式时使用的大量tab、空格等),以减轻单片机负担。当然了,肯定不行。因为浏览器无法知道单片机要发送什么类型、多少长度的数据。所以,我们还需要一个返回数据的格式。
//------------------------------------------------
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: xx
//------------------------------------------------
文章1`2中也已经讲到了。所以,我们发送到浏览器的数据应该是这样的:
//------------------------------------------------
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length:282
(网页代码1)
//------------------------------------------------
注意,这些数据中,有些换行是不能省的(下文rn起强调作用,并不是接收到的字符):
//------------------------------------------------
HTTP/1.1 200 OKrn
Content-Type: text/htmlrn
Content-Length:xxrn
rn
(网页代码1)rn
rn
//------------------------------------------------
否则浏览器无法识别数据。
其中的Content-Length:282是网页文件的大小(字节),需要提前算好。不管其他的,我们先登陆一下试试,输入用户名:hello,密码:world,点击登录。然后我们发现单片机收到了如下数据:
//------------------------------------------------
GET /i?Username=hello&Password=world HTTP/1.1
Host: 192.168.1.199
Connection: Keep-Alive
Accept: */*
Accept-Language: zh-CN
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; SE 2.X MetaSr 1.0)
Referer: 192.168.1.199/
Accept-Encoding: gzip, deflate
//------------------------------------------------
好了,我们需要的数据应该全在第一行里面了,有用户名和密码,但是看一下浏览器的地址栏,用户名和密码同样以URL的形式出现了:
//------------------------------------------------
HTTP://192.168.1.i?Username=hello&Password=world
//------------------------------------------------
知道了get 和 post 的区别,我们将Login.html中 method='get' 改为 method='post'重新操作一次,结果,单片机收到的数据变成了这样:
//------------------------------------------------
POST /i HTTP/1.1
Host: 192.168.1.199
Connection: Keep-Alive
Content-Length: 29
Pragma: no-cache
Cache-Control: no-cache
Accept: */*
Accept-Language: zh-CN
Content-Type: application/x-www-form-urlencoded
Origin: 192.168.1.199
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; SE 2.X MetaSr 1.0)
Referer: 192.168.1.199/
Accept-Encoding: gzip, deflatern
rn
Username=hello&Password=world
//------------------------------------------------
(网页代码2)
//------------------------------------------------
<!DOCTYPE html>
<html>
<title>COM SETTING</title>
<body>
<form method='post' action='i'>
串口号:<input type='text' id='COM' name='COM_NUM'/><br>
波特率:<input type='text' id='BDR' name='BD_RATE'/><br>
<input type='submit' value='确定'/>
</form>
</body>
</html>
//------------------------------------------------
先看一下效果:
串口的设置是在变的,不能写死到网页里,该怎么动态显示呢?(网页代码3)
//------------------------------------------------
<script>
ElementById('COM').value='1';
ElementById('BDR').value='9600';
</script>
//------------------------------------------------
value里的值是通过单片机实时生成的,我们姑且这样写。发送一下试试先:
//------------------------------------------------
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length:410
(网页代码2)
(网页代码3)
//------------------------------------------------
现在,显示效果是这样的:
具体操作方式是这样的:
//------------------------------------------------
HTTP/1.1 200 OKrn
Content-Type: text/htmlrn
Transfer-Encoding: chunkedrn
rn
数据长度1(16进制)rn
数据1rn
数据长度2(16进制)rn
数据2rn
......
0rn
rn(结束符:0表示数据长度为0,换行后没有数据内容,再换行)
//------------------------------------------------
那么再试一试上面的网页:
//------------------------------------------------
HTTP/1.1 200 OKrn
Content-Type: text/htmlrn
Transfer-Encoding: chunkedrn
rn
12Crn
(网页代码2)rn
6Crn
(网页代码3)rn
......
0rn
rn
//------------------------------------------------
通过CSS格式,可以做出很多炫酷的网页特效,但是有些效果,还是不能代替图片。那么,看下一节:
是的,少了图片的网页,看起来枯燥无味。那么,让我们尝试着发送一张图片到浏览器上去。
本文发布于:2024-02-03 06:42:20,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170691374049313.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |