HTTP协议

HTTP协议

请求

客户端发出的请求，主要由三个组成部分：请求行、请求头、请求主体。

1. 请求行
   • 请求方法：GET、POST
   • 请求URL
   • HTTP协议版本
2. 请求头：
   • 常见请求头

   User-Agent：浏览器的具体类型　　如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
   
   Accept：浏览器支持哪些数据类型　　如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;
   
   Accept-Charset：浏览器采用的是哪种编码　　如：Accept-Charset: ISO-8859-1
   
   Accept-Encoding：浏览器支持解码的数据压缩格式　　如：Accept-Encoding: gzip, deflate
   
   Accept-Language：浏览器的语言环境　　如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
   
   Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com
   
   Connection：表示是否需要持久连接。
   属性值可以是Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。
   要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive
   
   Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
   
   Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset='gb2312'
   
   Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip
   
   Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。
   
   Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。
   
   Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
   

3. 请求体：
   指的是提交给服务器的数据。
   需要注意的是，如果往服务器提交数据，需要在请求头中设置Content-Type:application/x-www-from-urlencoded(在ajax中需要手动设置)。

响应

响应报文是服务器返回给客户端的。组成部分由响应响应头、响应主体

1. 状态行：HTTP响应行：主要是设置响应状态等信息
2. 响应头：Cookie、缓存等信息就是在响应头的属性中设置的

   Cache-Control
   
   响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
   
   下面，的设置让客户端对响应内容缓存3600秒，也即在3600秒内，如果客户再次访问该资源，直接从客户端的缓存中返回内容给客户，不要再从服务端获取（当然，这个功能是靠客户端实现的，服务端只是通过这个属性提示客户端“应该这么做”，做不做，还是决定于客户端，如果是自己宣称支持HTTP的客户端，则就应该这样实现）。
   
   Cache-Control: max-age=3600
   
   ETag
   
   一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。
   
   ETag: "737060cd8c284d8af7ad3082f209582d"
   
   Location
   
   我们在Asp.net中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：
   
   Location: http://www.google.com.hk
   
   Set-Cookie
   
   服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的。
   
   Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
   

3. HTTP响应体
   如果请求的是HTML页面，那么返回的就是HTML
   代码。如果是JS就是JS代码

同步任务、异步任务、微任务、宏任务

单线程：在同一时间只做一件事

异步

同步任务和异步任务

• 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
• 异步：不会进入主线程，而进入任务队列(task queue)的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

JS如何实现异步任务

Js实现异步通过事件循环(Event Loop)。

执行栈与任务队列

• JS任务分为同步任务和异步任务
• 同步任务都在JS引擎线程(主线程)上执行，形成一个执行栈。
• 事件触发线程管理一个任务队列
• 异步任务触发条件达成，将回调事件放到任务队列中
• 执行栈中所有同步任务执行完成后，JS引擎线程关闭，系统会读取任务队列，将可运行的异步任务回调事件添加到执行栈中，开始执行。

宏任务与微任务

异步任务也分为，宏任务与微任务被称为task与jobs

• 宏任务：script(整体代码)、settimeOut、setlmmediate、I/O、UI rendering(渲染)
• 微任务：process、Promise、Object、observe(已废弃)、MutationObserver(html5新特性)
  执行栈在执行时，会把宏任务和微任务分别放置在自己的任务队列，当执行栈为空时会先查看微任务队列是否有事件存在，如果不存在才会去看宏任务。取任务时从最前开始。

同源和跨域

同源

同源策略时浏览器的一种安全策略。所谓同源指：域名、协议、端口号完全相同。

跨域问题解决方案

从我的网站访问别人的网站就是跨域

出于安全考虑，浏览器不允许ajax跨域获取数据

• iframe:出于安全考虑，已经禁止
• JSONP：script标签的src属性传递数据

JSONP

JSONP(JSON with Padding)：带补丁的 json，本质是利用了 标签具有可跨域的特性，由服务端返回一个预先定义好的JS函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。