HTTP协议学习

1.HTTP协议学习目标：

(1).调试AJAX应用"看不见摸不着"的错误

(2).进行Web访问优化---高阶面试题

2.面试题：浏览器中输入www.taobao.com直到看到页面之间发生了什么？

(1).操作系统访问网络上的DNS服务器，把域名转换为IP地址

(2).浏览器发起HTTP请求消息

(3).Web服务器接收并解析请求消息，查找指定的资源，可能访问数据库，构建并返回HTTP响应消息

(4).浏览器接收并解析响应消息

(5).浏览器缓存接收到响应内容，并解析和渲染响应内容

3.URL统一资源定位符，互联网任何资源都有一个URL才能被访问

http://www.baidu.com=>网站

https://www.baidu.com/img/bd_logo1.png =>图片

http://127.0.0.1/01.php=>文件

(1).scheme:方案 指定以哪种协议从服务器获取指定资源

常见方案:http/https/ftp/mailto/file/telnet，以前两种最为常用

①.http:获取网络资源(明文)

http://www.ccb.com/cn =>建行

②.https:获取网络资源(加密)

https://ibsbjstar.ccb.com.cn =>建行登录

(2).host 主机名:资源在服务器ip地址或者域名

http://127.0.0.1=>ip地址

http://www.baidu.com =>域名(DNS 域名=>ip)

http://tmooc.cn =>域名

(3).port 端口号，每一项网络服务在服务器都对应一个端口号

①.ftp =>21(文件上传下载)

②.ssh=> 22(安全远程登录)

③.telnet =>23(远程登录)

④.smtp=>25(邮件传输发送)

⑤.dns =>53(域名解析)

⑥.http =>80(超文本传输apache)

⑦.pop3=>110(邮件接收)

⑧.https=>443(加密传输)

4.分清概念:URL/URN/URI(了解)

(1).URL:统一资源定位符

URL:<a href="login.html"></a>

URL:<img src="http://tmoo.cn/logo.jpg"></a>

(2).URN:统一资源命名符

URN:<a href="mailto:admin@tmooc.cn"></a>

URN:<a href="javascript:void(0)"></a>

(3).URI:统一资源标示符 (URI==URL+URN)

5.HTTP协议概述(传输网页),国际互联网任务组(IETF)制定http协议标准

(1).1991: HTTP/0.9 有严重缺陷

(2).1996: HTTP/1.0 正式版本

(3).1999: HTTP/1.1 当前主流版本(***)

6.HTTP协议工作原理方式:请求和响应

(1).客户端发送请求 (google=>apache)

(2).服务器响应请求(apache=>google)

7.面试题:HTTP/1.1比HTTP/1.0改进哪些地方?

(1).支持虚拟主机技术，在一个web服务器上同时并存多个不同域名的网站

(2).支持持久连接技术，不支持持久边接技术情况，每次客户端与服务器数据传输

固定流程 101(300握 400挥)

三次握手 3=>1=>4四次挥手

http: keep-alive (3)=>101=>(4)

(3).支持代理连接：Proxy:xxx

8.HTTP的作用是传输网页，HTTP工作方式为请求与响应

请求(Request) — 客户端浏览器发送web服务器，用于标明此次请求的目的

(1).GET：表客户端想“获得”指定的资源，请求方式有地址栏输URL、超链接/JS跳转、SRC/HREF属性、表单GET提交、AJAX-GET请求

①.GET /user HTTP/1.1

表客户端想获取所有用户

②.GET /user?pno=2&psize=10 HTTP/1.1

客户端想分页获取数据

③.GET /user/pno/2/psize/10 HTTP/1.1

客户端想分页获取数据

④.GET /user?uid=10 HTTP/1.1

客户端想获取10号用户

⑤.GET /user/10 HTTP/1.1

客户端想获取10号用户

(2).POST：客户端想“邮寄/上传/添加”指定的数据给服务器，相关数据在请求主体中，请求方式有表单POST提交、AJAX-POST请求

①.POST /user HTTP/1.1

客户端想向服务器添加一条新录 uname=tom&upwd=123

(3).PUT：表客户端想“放置/上传/更新”服务器上的指定资源，相关数据在请求主体中，请求方式有AJAX-PUT请求

①.PUT /user HTTP/1.1

客户端想更新服务器上的一条记录 uname=tom&upwd=123&uid=8

(4).DELETE：客户端想“删除”服务器上的指定资源，请求方式有AJAX-DELETE请求

①.DELETE /user HTTP/1.1

客户端想删除服务器上的所有用户

②.DELETE /user?uid=9 HTTP/1.1

客户端想删除9号用户

③.DELETE /user/9 HTTP.1.1

客户端想删除9号用户

响应(Response) — Web服务器发送客户端浏览器

(1).响应状态码

①.100-199 提示消息

②.200-299 响应成功 200

③.300-399 重定向 304

④.400-499 客户端请求错误 404

⑤.500-599 服务器错误 500

Message：消息/报文，是在http客户端和服务器传递数据块

http协议规定：消息必须符合特定格式才能理解

(2).响应消息类型

①.text/plain

②.text/html

③.text/css

④.application/javascript

⑤.application/json

9.面试题:GET/POST区别?

(1).标签语义

①.GET：客户端获取服务器上资源

②.POST：客户端将数据提交服务器

(2).安全级别

①.GET：不安全

②.POST：不安全 (https)

(3).数据长度

①.GET：通过浏览器地址栏请求起始行1KB,汉字约20-30

②.POST：通过http响应主体长度没限制

(4).数据编码

①.GET：不会自动编码-=>可能出现中文乱码

②.POST：自动编码=>不会中文乱码

(5).数据发起

①.GET

A.浏览器地址栏输入地址回车

B.标签：

href => <a> =>击发GET

src => <img> => 自动发GET

css => link =>自动发GET

script => src =>自动发GET

C.JS自动跳转kk = "1.html";

D.<form method="get" action="1.php"></form >

E.Ajax get

②.POST

A.<form action="" method="post"></form >

B.Ajax post

10.如何使用HTTP协议相关知识进行web优化?

(1).优化数据库

(2).优化php

(3).优化web服务器(apache/nginx)

(4).网速

(5).传输数据

(6).浏览器解析速度(html/css/js)

下面从http请求和响应角度考虑相关优化：

(1).域名解析，减少域名解析次数，减少跨站外，资源引用尽可能的来自同一地址

(2).创建连接，努力减少连接创建次数-Connection:keep-alive，启用持久连接

(3).减少发送请求次数，尽量减少请求次数--合理进行资源合并，合理使用缓存

(4).等待响应时间，提高服务器运行速度，提高数据运算及查询速度

(5).接收响应，尽可能减少响应数据长度--删除空白字符，启压缩

11.HTTP协义详解

(1).请求消息

①.请求起始行(Start line)

A.请求方法

a.GET(客户端想获得服务器端的信息)

b.POST(客户端想传递数据给服务器)

c.PUT(客户端想放置文件到服务器上)

d.DELETE(客户端想删除服务器上指定的文件)

e.HEAD(客户端想获得服务器上指定资源的响应头部)

f.CONNECT(连接测试)

g.TRACE(追踪)

h.OPTIONS(选项，保留以后使用)

B.空格

C.请求URI

D.空格

F.协议版本

②.请求头(Headers)

A.请求消息专用头

a.Host:127.0.0.1，告诉服务器请求的是哪一个虚拟主机

b.Accept:text/html,告诉服务器端可以接受的响应内容类型

c.Orgin:http://127.0.0.1 ,告诉服务器当前请求来源于哪个域名

d.Referer:http://127.0.0.1/index.html ,引用页,即请求来源页面,可防止盗用

e.User-Agent:Mozilla，客户端在告诉服务器自己的类型

f.Accept-Encoding:gzip,浏览器在告诉服务器自己接受的响应数据编码类型

g.Accept-language:zh-cn,告诉服务器自己可以接受的自然语言(实现国际化)

B.请求/响应消息通用头

a.Connection:keep-alive , 启用持久链接

b.Cache-Control:no-cache, 告诉对方如何缓存当前消息主体中的数据

c.Pragma:no-cache , 此为HTTP/1.0版本的Cache-Control

d.Date: Tue, 11 Jul 2017 10:25:55 GMT 消息的创建时间

C.请求主体描述头

a.Content-Length:36　请求消息主体内容的长度

b.Content-Type:描述请求主体内容类型

text/plain 普通文本，未经编码,有的服务器直接拒绝接受(ajax默认项)

application/x-www-form-urlencoded 请求主体是经过编码后的表单数据

multipart/form-data 表单中包含上传的文件数据

D.客户端自定义头部

③.CRLF

④.请求主体(Body)

(2).响应消息

①.响应起始行(Start line)

A.协议版本

B.空格

C.响应状态码

a.1xx:为提示信息

100(Continue继续)

101(Switching Protocols 切换协议)

b.2xx:成功的响应

200(OK,响应成功)

201(Created,创建好了，适用Put请求)

c.3xx:需要客户端重定向

300（Multiple Choices　可选重定向）

301(Moved Permanently　永久重定向)

302(Moved Temporarily 临时重定向)

303(see other 重定向 )

304(Not Modified 没有修改,使用缓存即可 )

d.4xx:客户端请求错误

400 (Bad Repuest 错误请求)

403(Forbidden 不能访问的文件)

404(Not Found 请求文件不存在)

405(Method Not Allowed 请求方法不允许)

e.5xx:服务器端运行错误

500(Internal Server Error 服务器代码里面运行有误,如java里面10/0)

501(Not Implemented 服务器无法处理正常的请求)

503(Service Unavaiable 服务不可用,分布式DOS攻击会导致服务不可用)

D.空格

E.原因短句

②.响应头(Headers)

A.响应消息专用头

a.Server:Apache:告诉客户端服务器类型

b.Last-Modified:Tue, 11 Jul 2017 08:15:29 GMT 指定资源的最后一次修改时间

c.Content-Encoding:gzip 告诉客户端内容经过了gzip压缩

B.请求/响应消息通用头

a.Connection:keep-alive , 启用持久链接

b.Cache-Control:no-cache, 告诉对方如何缓存当前消息主体中的数据

c.Pragma:no-cache , 此为HTTP/1.0版本的Cache-Control

d.Date: Tue, 11 Jul 2017 10:25:55 GMT 消息的创建时间

C.响应主体描述头

a.Content-Length:4373 响应主体内容长度

b.Content-Type:application/javascript 响应主体的内容类型(类型上100种),如果要精准的描述一段数据的内容类型，不能使用后缀名，可以借鉴MIME中定义的文件类型名称

D.服务器自定义头

③.CRLF

④.响应主体(Body):html/css/js的主体内容均在Response里面,而响应图片在preview里面

12.缓存工作原理

客户端可以自动保存已经访问过的文档的副本，这些副本就成为“文档缓存”

当客户端再次发送针对同一个URL的请求时，如果本地有“已缓存的副本”就可以直接从本地存储设备面不是远程服务提取该文档了

数据缓存有下列优点:

(1).减少了冗余的数据传输，节省客户端流量使用

(2).缓解服务器宽带瓶颈的问题，服务器可以节省出更多的带宽

(3).降低对服务器的资源消耗和运行要求

(4).降低了由于远距离而造成的加载延时

13.Cache-Control头

Cache-Control:max-age头部表示从服务器将文档传来之时起，可以认为此文档处于新鲜状态的秒数

Cache-Control:max-age=3600;

服务器端可以请求客户端不要缓存文档,或者将最大使用期设置为零，从而在每次访问的时候都进行刷新

Cache-Control:max-age=0;

客户端在事先没有跟原始服务进行再验证的情况下，不能提供对应数据的陈旧副本，但缓存仍然可以提供新鲜的副本

Cache-Control:must-revalidate

14.Expires头

Expires头部指定缓存的确切过期时间,HTTP设计者认为，由于很多服务器的时钟不能同步，所以推荐最好用剩余秒数来代替过期的绝对时间

Expires:Sun,15 Mar 2014 ,08:00:00 GMT

若希望客户端不要缓存资源，可以将过期的时间设置为一个过去的时间，如:

Expries:Sat,01 Jan 1970,08:00:00 GMT

Expries:0此为不符合标准的写法，可能某些软件不支持，但确实有些服务器会返回这样的头部

15.如何修改响应消息的头部

(1).修改web服务器的配置文件

比较复杂，有些情况下无法修改，如新浪云服务器

(2).若响应文件是HTML,则可以声明<meta http-eqiv=“响应头部”>

仅适用于HTML文件，且只是“等价物”,并非真正的响应头部

(3).使用动态语方代码来控制响应消息头部

如php:设置一个响应消息头部

header(‘Cache-Control:no-cache’ );

header(‘Content-Type:image/png’);

16.Ajax即异步javascript and xml，该技术由google 推出，最大不同：发送请求和接收数据都由Js完成，以下为Ajax代码固定Js，请求并且接收响应4步:

(1).创建ajax对象

var xhr = new XMLHttpRequest();

(2).绑定事件：监听xhr对象状态

xhr.onreadystatechange = function(){}

(3).连接web服务器php程序

xhr.open(请求方式,请求地址,是否异步);

xhr.open('GET','add_user.php?',true);

(4).发送请求消息

xhr.send(null);

17.Ajax原理

(1).2002年由Google搜索引擎，提出建议

AJAX=HTML/CSS/JS/DOM/XML/HTTP

(2).ajax作用：实现在'无刷新''无提交''无跳转'的情况下完成页面局部更新

(3).ajax应用常见场合：聊天室，在线走势图,搜索建议

(4).ajax的异步相关

①.异步请求:XHR

②.同步请求:(Ajax绝对不能用表单提交,否则为同步)

A.地址栏输入地址回车

B.表单 submit

C.<a href="1.php">

D.<img src="1.jpg">

E.kk = '1.php'

18.Ajax常用对象和属性事件方法

(1).xhr对象：向web服务器发送请求，并接收返回响应消息

var xhr = new XMLHttpRequest();

注意:产品兼容性，老IE8- 不支持xhr

new ActiveXObject("Microsoft.XMLHTTP");

兼容性写法：

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

var str="Microsoft.XMLHTTP"

xhr = new ActiveXObject(str);

}

alert(xhr);

(2).xhr对象常用属性

①.readyState xhr对象当前状态

不能手工赋值，可以取值，其值会随着(请求-响应)过程进行自动改变

A.0 => UNSENT => 请求消息未发送

B.1 = > OPENED => XHR己经打开web服务器连接

C.2 => HEADERS_RECEVIED => xhr己经接收服务器响应消息头部

D.3 => LOADING XHR => 正在加载响应消息主体

E.4 => DONE => XHR接收完成响应消息主体

②.xhr.readyState状态改变

A.0 => UNSEND => xhr.open();

B.1 => OPENED => xhr.send();

C.2 => HREADERS_RECEIVED => 自然(不能控制)

D.3 => LOADING => 自然(不能控制)

E.4 => DONE

(3).status：服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误，当 readyState 为2才有，小于 3 的时候读取这一属性会导致一个异常

(4).statusText:用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"，和 status 属性一样，当 readyState为2才有,小于 3 的时候读取这一属性会导致一个异常

(5).responseText:存储从服务器返回的数据，如果 readyState 小于 3，这个属性就是一个空字符串，当 readyState 为 3，这个属性返回目前已经接收的响应部分，如果 readyState 为 4，这个属性保存了完整的响应体

19.Ajax 原理

在客户端浏览网页的同时，浏览器底层使用XMLHttpRequest对象，向服务器发起HTTP请求，并接收服务器的响应消息—浏览的同时服务器也在工作

(1).创建对象

function getXHr(){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

var str="Microsoft.XMLHTTP"

xhr = new ActiveXObject(str);

}

return xhr;

}

(2).xhr属性

①.xhr.readyState 表示xhr状态

A.0 => 未发送 UNSENT

B.1 => 打开连接 OPENED

C.2 => 己接收服务器返回 HEADERS_RECEIVED

D.3 => 接收服务器数据 LOADING

E.4 => 接收完成 DONE

②.status 表示服务器返回状态码

③.responseText 表示服务器返回文本

④.responseXML 表示服务器返回XML文本

(3).方法

①.open(method,url.isAsyn)：创建请求

Method：请求方式 GET POST

url：请求url地址(程序地址)

isAsyn：请求方式是异步true同步false

②.send(data)发送请求

data：请求消息主体内容

GET => 内容为null

send(null);

POST => 请求数据放在里面

send('id=10&name=tom&age=19');

(4).事件

①.onreadystatechange 发生任何状态变化时的事件控制对象

②.xhr.readyState 表示请求的状态，每次改变时候触发事件0 /1 /2 /3 /4

20.AJAX post 标准语法

(1).创建ajax对象 xhr

(2).绑定事件 xhr.onreadystatechange

(3).打开连接 xhr.open('POST','book_add.php',true);

修改请求头信息(将参数编码)

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

(4).xhr.send(`id=10&name=tom&age=19`);

(5).ajax输出

①.创建php,地址栏输入并回车

http://127.0.0.1/ajaxday06/dangdang/book_add.php?name=1&pic=2.jpg&price=100

②.创建html/js，在js里添加输出

③.打开F12在network中查看

21.后端响应文本输出类型,以PHP为例

(1).text/plain 纯文本

header("Content-Type:text/plain");

html => ajax

xhr.responseText

(2).text/html (默认)

header("Content-Type:text/html;charset=utf-8");

html => ajax

xhr.responseText;

(3).Javascript

header("Content-Type:application/javascript;charset=utf-8");

echo "var msg='hello';alert(msg)";

html => ajax

eval(xhr.responseText);

22.JSON(JavaScript Object Natation)是一种轻量级数据交换格式，易于编写，同时易于程序解析生成，语法基于JS语言，但是目前被各种语句所支持，成为一种系统交互数据，标准格式：

JAVA => {JSON}=>html/js/css

C# => {JSON}=>html/js/css

php => {JSON}=>html/js/css

23.JSON与XML字符串格式概述

(1).XML是字符串数据格式，用于描述数据

有点麻烦，重量级数据格式.

10字节 => XML => 50字节

(2).JSON是字符串数据格式，用于描述数据

更加简单，轻量级数据格式.

10字节 => JSON => 22字节

24.JSON标准语法要求

(1).一个JSON字符串有且只有一个根

①.{}表示一个对象

员工信息： {"name":"tom","age":19}

②.[]表示一个数组

一组整型： [10,20,90,100]

一组员工信息 :

[

{"name":"jerry","age":21},

{"name":"james","age":22},

{"name":"gogo","age":19}

]

(2).JSON中可以表示，数字，bool,null,字符串，注意:字符串必须用双引号

(3).数组中可以包含多个值，使用逗号分隔

(4).对象中可以包含多个键值，使用逗号分隔，不同值，键和值之间用分号分隔 ,键必须是双引号

25.如何处理JSON数据

(1).服务器端PHP

①.header("Content-Type:application/json;charset=utf-8");

②.str = json_encode(arr);

json_encode会将一个数组转换成json字符串，如果是PHP关联数组会转换为JSON:{}，如果是PHP索引数组会转换为JSON:[ ]

③.echo $str;

(2).javascript 接收

①.var obj = JSON.parse(xhr.responseText);将json字符串转换为js对象或数组

②.var str=‘{“ename”:”Tom”,”age”:20}’;

eval(‘(‘+str+’)’)

obj＝>js数组 obj＝>js对象

26.AJAX处理xml数据格式

(1).html:超文本标记语言，所有标签都是预定义好的，用于描述一个网页结构.

(2).xml:可扩展的标签语言，所有的标签都是自定义的， 用于描述一段数据，尤其是批量复合数据.

27.XML语法要求

(1).xml文档声明：<?xml version="1.0" encoding="utf-8"?>

(2).整篇xml字符串有且只能一个根元素

<booklist>

<book></book>

<book></book>

</booklist>

(3).标签名可以自定义，区分大小写，有开始必须有结束：<book></book>

(4).标签可能嵌套不能交叉

<book><name></name></book> ok

<book><name><id></name></id></book>

(5).每个标签都可以自定义属性，属性必须有值，值必须用单/双引号括起来

<book id="1" name="tom"></book>

总结: HTML语法随意，XML语法严格

HTML标签都是预定义好的，XML的标签是自定义的

HTML用于描述网页结构，XML用于描述网页数据

28.面试题：跨域请求和JSONP

Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同

提示：localhost和127.0.0.1也算跨域

浏览器允许跨域请求的情形：IMG、LINK、SCRIPT、IFRAME

浏览器禁止跨域请求的情形：XHR—浏览器处于安全考虑，禁用了XHR的跨域请求（其实服务器给出了响应消息，但浏览器不让使用）,因为跨域有可能对当前页面产生安全风险

29.面试题：我们公司项目很大，页面很多，出于性能考虑，把静态资源(html等)放在http://static.tmooc.cn服务器上了，把动态资源(php)放在http://dynamic.tmooc.cn服务器上了，如何让一个x.html异步请求x.php呢？

(1).修改响应消息头部，添加Access-Control-Allow-Origin头部(必须是动态网页)

(2).使用JSONP——非常巧妙

JSON: JavaScript Object Notation，是一种字符串数据格式

JSONP：JSON with Padding，填充式JSON，与JSON完全两码事，是一种使用JSON数据的方式，意思是在JSON字符串左右添加函数名：doResponse({"ename":"Tom", "age":20} );

JSONP是专用于解决XHR跨域限制一种手段

基本原理：使用动态创建的一个SCRIPT标签代替XHR发起异步请求，要求服务器必须返回application/javascript，立即在客户端执行，要执行的函数本体在客户端浏览器中声明<script src="x.php" async></script>

function createJs(sUrl){

var doc=document;

var oScript = doc.createElement('script');

oScript.type = 'text/javascript';

oScript.src = sUrl;

var head=doc.getElementsByTagName('head')[0];

head.appendChild(oScript);

}

createJs('jsonp.js?callback=box');

(3).document.domain = 'a.com'

(4).服务器代理：XMLHttpRequest代理文件

(5).location.hash

(6).window.name

(7).flash

(8).html5 postMessage

30.cookie

(1).cookie_add.html 保存cookie

document.cookie = '名=值';

document.cookie = 'uid=10';

(2).cookie_read.html 读取cookie

var str = document.cookie;

var str = "name=tom;age=10;sex=F";

var arrStr = str.split(";");

var name = arrStr[0].split("=")[0];

var tom = arrStr[0].split("=")[1];