首页 > 代码库 > 前端html

前端html

一、http协议

HTTPhypertext transport protocol),即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。客户端发送给服务器的格式叫请求协议;服务器发送给客户端的格式叫响应协议

特点:1、HTTP叫超文本传输协议,基于请求/响应模式的!

   2、HTTP是无状态协议。(换句话说每次响应请求都是独立的时间,相互之间没有影响)、

URL:统一资源定位符,就是一个网址:协议名://域名:端口/路径。

二、请求协议

请求首行;  // 请求方式 请求路径 协议和版本,例如:GET /index.html HTTP/1.1
请求头信息;// 请求头名称:请求头内容,即为key:value格式,例如:Host:localhost
空行;     // 用来与请求体分隔开
请求体。   // GET没有请求体,只有POST有请求体。

http默认是get请求:①没有请求体。②数据必须在1K之内。③求情内容会暴露在url中。

基于get的请求的特点,所以get的应用场景:①在浏览器的地址栏中直接给出URL,那么就一定是GET请求。②点击页面上的超链接也一定是GET请求。③提交表单时,表单默认使用GET请求,但可以设置为POST。

下面是请求报文的具体格式:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk
Host:127.0.0.1:8090
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36
Name
login/
requests???737?B transferred???Finish: 5?ms???DOMContentLoaded: 14?ms???Load: 14?ms

post请求:

(1). 数据不会出现在地址栏中
(2). 数据的大小没有上限
(3). 有请求体
(4). 请求体中如果存在中文,会使用URL编码!

技术分享
我们都知道Http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号对键值对进行分割。如"?name1=value1&name2=value2",这样在服务端在收到这种字符串的时候,会用“&”分割出每一个参数,然后再用“=”来分割出参数值。

 

针对“name1=value1&name2=value2”我们来说一下客户端到服务端的概念上解析过程: 
  上述字符串在计算机中用ASCII吗表示为: 
  6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532。 
   6E616D6531:name1 
   3D:= 
   76616C756531:value1 
   26:&
   6E616D6532:name2 
   3D:= 
   76616C756532:value2 
   服务端在接收到该数据后就可以遍历该字节流,首先一个字节一个字节的吃,当吃到3D这字节后,服务端就知道前面吃得字节表示一个key,再想后吃,如果遇到26,说明从刚才吃的3D到26子节之间的是上一个key的value,以此类推就可以解析出客户端传过来的参数。

   现在有这样一个问题,如果我的参数值中就包含=或&这种特殊字符的时候该怎么办。 
比如说“name1=value1”,其中value1的值是“va&lu=e1”字符串,那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对,但是服务端会解析成两个键值对,这样就产生了奇异。

如何解决上述问题带来的歧义呢?解决的办法就是对参数进行URL编码 
   URL编码只是简单的在特殊字符的各个字节前加上%,例如,我们对上述会产生奇异的字符进行URL编码后结果:“name1=va%26lu%3D”,这样服务端会把紧跟在“%”后的字节当成普通的字节,就是不会把它当成各个参数或键值对的分隔符。

为什么要进行URL编码
url编码

使用post提交

<form action="" method="post">
  关键字:<input type="text" name="keyword"/>
  <input type="submit" value="提交"/>
</form>

post的请求体

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:13
Content-Type:application/x-www-form-urlencoded
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk
Host:127.0.0.1:8090
Origin:http://127.0.0.1:8090
Pragma:no-cache
Referer:http://127.0.0.1:8090/login/
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
           AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36

POST请求是可以有体的,而GET请求不能有请求体。

  • Referer: http://localhost:8080/hello/index.jsp请求来自哪个页面,例如你在百度上点击链接到了这里,那么Referer:http://www.baidu.com;如果你是在浏览器的地址栏中直接输入的地址,那么就没有Referer这个请求头了(可以做防盗链,和);
  • Content-Type: application/x-www-form-urlencoded表单的数据类型,说明会使用url格式编码数据;url编码的数据都是以“%”为前缀,后面跟随两位的16进制。
  • Content-Length:13请求体的长度,这里表示13个字节。
  • keyword=hello请求体内容!hello是在表单中输入的数据,keyword是表单字段的名字。
主要是统计和防盗链
Referer请求头是比较有用的一个请求头,它可以用来做统计工作,也可以用来做防盗链。
统计工作:我公司网站在百度上做了广告,但不知道在百度上做广告对我们网站的访问量是否有影响,那么可以对每个请求中的Referer进行分析,如果Referer为百度的很多,那么说明用户都是通过百度找到我们公司网站的。
防盗链:我公司网站上有一个下载链接,而其他网站盗链了这个地址,例如在我网站上的index.html页面中有一个链接,点击即可下载JDK7.0,但有某个人的微博中盗链了这个资源,它也有一个链接指向我们网站的JDK7.0,也就是说登录它的微博,点击链接就可以从我网站上下载JDK7.0,这导致我们网站的广告没有看,但下载的却是我网站的资源。这时可以使用Referer进行防盗链,在资源被下载之前,我们对Referer进行判断,如果请求来自本网站,那么允许下载,如果非本网站,先跳转到本网站看广告,然后再允许下载。

Referer的应用

三、相应

响应内容是由服务器发送给浏览器的内容,浏览器会根据响应内容来显示。遇到<img src=http://www.mamicode.com/‘‘>会开一个新的线程加载,所以有时图片多的话,内容会先显示出来,然后图片才一张张加载出来。

响应首行;
响应头信息;
空行;
响应体。
Request URL:http://127.0.0.1:8090/login/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8090
Response Headers
view source
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Oct 2016 06:48:50 GMT
Server:WSGIServer/0.2 CPython/3.5.2
X-Frame-Options:SAMEORIGIN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
  用户名:<input type="text" name="username"/>
  <input type="submit" value="提交"/>
</form>    
</body>
</html>

状态码:

技术分享
  1xx(临时响应)
  表示临时响应并需要请求者继续执行操作的状态码。
  100(继续)请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
  101(切换协议)请求者已要求服务器切换协议,服务器已确认并准备切换。
 
  2xx (成功)
  表示成功处理了请求的状态码。
  200(成功)服务器已成功处理了请求。通常,这表示服务器提供了请求的网页。如果是对您的 robots.txt 文件显示此状态码,则表示 Googlebot 已成功检索到该文件。
  201(已创建)请求成功并且服务器创建了新的资源。
  202(已接受)服务器已接受请求,但尚未处理。
  203(非授权信息)服务器已成功处理了请求,但返回的信息可能来自另一来源。
  204(无内容)服务器成功处理了请求,但没有返回任何内容。
  205(重置内容)服务器成功处理了请求,但没有返回任何内容。与 204 响应不同,此响应要求请求者重置文档视图(例如,清除表单内容以输入新内容)。
  206(部分内容)服务器成功处理了部分 GET 请求。
 
  3xx (重定向)
  要完成请求,需要进一步操作。通常,这些状态码用来重定向。Google 建议您在每次请求中使用重定向不要超过 5 次。您可以使用网站管理员工具查看一下 Googlebot 在抓取重定向网页时是否遇到问题。诊断下的网络抓取页列出了由于重定向错误导致 Googlebot 无法抓取的网址。
  300(多种选择)针对请求,服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
  301(永久移动)请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。您应使用此代码告诉 Googlebot 某个网页或网站已永久移动到新位置。
  302(临时移动)服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似,会自动将请求者转到不同的位置,但您不应使用此代码来告诉 Googlebot 某个网页或网站已经移动,因为 Googlebot 会继续抓取原有位置并编制索引。
  303(查看其他位置)请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。对于除 HEAD 之外的所有请求,服务器会自动转到其他位置。
  304(未修改)自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。
  如果网页自请求者上次请求后再也没有更改过,您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。服务器可以告诉搜索引擎的蜘蛛/机器人 自从上次抓取后网页没有变更,进而节省带宽和开销。
  .
  305(使用代理)请求者只能使用代理访问请求的网页。如果服务器返回此响应,还表示请求者应使用代理。
  307(临时重定向)服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似,会自动将请求者转到不同的位置,但您不应使用此代码来告诉 Googlebot 某个页面或网站已经移动,因为 Googlebot 会继续抓取原有位置并编制索引。
 
  4xx(请求错误)
  这些状态码表示请求可能出错,妨碍了服务器的处理。
  400(错误请求)服务器不理解请求的语法。
  401(未授权)请求要求身份验证。对于登录后请求的网页,服务器可能返回此响应。
  403(禁止)服务器拒绝请求。如果您在 Googlebot 尝试抓取您网站上的有效网页时看到此状态码(您可以在 Google 网站管理员工具诊断下的网络抓取页面上看到此信息),可能是您的服务器或主机拒绝了 Googlebot 访问。
  404(未找到)服务器找不到请求的网页。例如,对于服务器上不存在的网页经常会返回此代码。
  如果您的网站上没有 robots.txt 文件,而您在 Google 网站管理员工具"诊断"标签的 robots.txt 页上看到此状态码,则这是正确的状态码。但是,如果您有 robots.txt 文件而又看到此状态码,则说明您的 robots.txt 文件可能命名错误或位于错误的位置(该文件应当位于顶级域,名为 robots.txt)。
  如果对于 Googlebot 抓取的网址看到此状态码(在"诊断"标签的 HTTP 错误页面上),则表示 Googlebot 跟随的可能是另一个页面的无效链接(是旧链接或输入有误的链接)。
  405(方法禁用)禁用请求中指定的方法。
  406(不接受)无法使用请求的内容特性响应请求的网页。
  407(需要代理授权)此状态码与 401(未授权)类似,但指定请求者应当授权使用代理。如果服务器返回此响应,还表示请求者应当使用代理。
  408(请求超时)服务器等候请求时发生超时。
  409(冲突)服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码,以及两个请求的差异列表。
  410(已删除)如果请求的资源已永久删除,服务器就会返回此响应。该代码与 404(未找到)代码类似,但在资源以前存在而现在不存在的情况下,有时会用来替代 404 代码。如果资源已永久移动,您应使用 301 指定资源的新位置。
  411(需要有效长度)服务器不接受不含有效内容长度标头字段的请求。
  412(未满足前提条件)服务器未满足请求者在请求中设置的其中一个前提条件。
  413(请求实体过大)服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。
  414(请求的 URI 过长)请求的 URI(通常为网址)过长,服务器无法处理。
  415(不支持的媒体类型)请求的格式不受请求页面的支持。
  416(请求范围不符合要求)如果页面无法提供请求的范围,则服务器会返回此状态码。
  417(未满足期望值)服务器未满足"期望"请求标头字段的要求。
 
  5xx(服务器错误)
  这些状态码表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。
  500(服务器内部错误)服务器遇到错误,无法完成请求。
  501(尚未实施)服务器不具备完成请求的功能。例如,服务器无法识别请求方法时可能会返回此代码。
  502(错误网关)服务器作为网关或代理,从上游服务器收到无效响应。
  503(服务不可用)服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。
  504(网关超时)服务器作为网关或代理,但是没有及时从上游服务器收到请求。
  505(HTTP 版本不受支持)服务器不支持请求中所用的 HTTP 协议版本。
服务器相应状态码
当用户第一次请求index.html时,服务器会添加一个名为Last-Modified响应头,这个头说明了
  index.html的最后修改时间,浏览器会把index.html内容,以及最后响应时间缓存下来。当用户第
  二次请求index.html时,在请求中包含一个名为If-Modified-Since请求头,它的值就是第一次请
  求时服务器通过Last-Modified响应头发送给浏览器的值,即index.html最后的修改时间,
  If-Modified-Since请求头就是在告诉服务器,我这里浏览器缓存的index.html最后修改时间是这个,
  您看看现在的index.html最后修改时间是不是这个,如果还是,那么您就不用再响应这个index.html
  内容了,我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值,与index.html
  的当前最后修改时间比对,如果相同,服务器会发响应码304,表示index.html与浏览器上次缓存的相
  同,无需再次发送,浏览器可以显示自己的缓存页面,如果比对不同,那么说明index.html已经做了修
  改,服务器会响应200。

可以指定相应头,例如:

HTMl页面中可以使用<meta http-equiv="" content="">来指定响应头,例如在index.html页面中给出<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">,表示浏览器只会显示index.html页面3秒,然后自动跳转到http://www.baidu.com。

前端html