数据通信与数据存储

丫丫语录

如果你交给某人一个程序,你将折磨他一整天;如果你教某人如何编写程序,你将折磨他一辈子。

DAY4任务

1
2
3
1.http协议,http协议中的头信息字段及应用
2.ajax 添加CORS和Frame代理的原理链接 ajax(xhr2,跨域),CORS,jsonp
3.cookie,storage,localStorage、sessionStorage

皓眸大前端开发学习

笔记总结

一、http协议,http协议中的头信息字段的应用。什么是http?http的应用?http状态码等?

(1)、http:超文本传输协议,是基于请求与响应模式的、无状态、应用层协议。常基于TCP的链接方式。HTTP URL格式如下:http://host[":"port][abs_path]
http表示要通过HTTP协议来定位网络资源;host表示合法的internet主机域名或ip地址;port指定一个端口号,为空则使用缺省端口80;abs_path指定请求资源URL;HTTP默认的端口号为80,HTTPS的端口号为443。

(2)、http请求由三部分构成分别是:请求行,消息报头,请求正文。
请求行:以一个方法符号开头,以空格分开,后面紧跟请求url和协议版本,格式如下:Method Request-URI HTTP-Version CRLF。其中Method表示请求方法;Request-URI是一个统一资源标识符;HTTP-Version表示请求的HTTP协议版本;CRLF表示回车和换行。
常见的HTTP请求方法包括:get请求,post请求,put请求,delete请求,trace请求,connect请求,head请求等。GET(请求获取Request-URI所标识的资源),POST(在Request-URI所标识的资源后附加新的数据),HEAD(请求获取由Request-URI所标识的资源的响应消息报头),PUT(请求服务器存储一个资源,并用Request-URI作为其标识),DELETE(请求服务器删除Request-URI所标识的资源),TRACE(请求服务器回送收到的请求信息,主要用于测试或诊断),CONNECT(保留将来使用),OPTIONS(请求查询服务器的性能,或者查询与资源相关的选项和需求)
举个例子:GET方法:在浏览器的地址栏中输入网址的方式访问网页时,浏览器采用GET方法向服务器获取资源,POST方法要求被请求服务器接受附在请求后面的数据,常用于提交表单。

(3)、如何理解幂等性?那些请求是幂等?post请求与get请求的区别?
HTTP方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用。幂等性是分布式系统设计中十分重要的概念,而HTTP的分布式本质也决定了它在HTTP中具有重要地位。GET方法用于获取资源,不应有副作用,所以是幂等的。DELETE方法用于删除资源,有副作用,但它应该满足幂等性。POST所对应的URI并非创建的资源本身,而是资源的接收者。两次相同的POST请求会在服务器端创建两份资源,它们具有不同的URI;所以POST方法不具备幂等性。而PUT所对应的URI是要创建或更新的资源本身。对同一URI进行多次PUT的副作用和一次PUT是相同的;因此PUT方法具有幂等性。post一般用于信息获取,使用URL传递参数,对所发送的信息数量也有限制,一般在2000个字符,post一般用于修改服务器上的资源,对所发送的信息没有限制。get方式需要使用Request.QueryString来取得变量的值,而post方式是通过Request.Form来获取变量的值,也就是说get是通过地址栏传递值,而post是通过提交表单来传值。

(4)、http响应分为三个部分:状态行,消息报头,响应正文。
状态行格式如下:HTTP-Version Status-Code Reason-Phrase CRLF 其中,HTTP-Version表示服务器HTTP协议的版本;Status-Code表示服务器发回的响应状态代码;Reason-Phrase表示状态代码的文本描述。状态码有三位数字组成,第一个数字定义了响应的类别:
1xx:指示信息–表示请求已接收,继续处理。2xx:成功–表示请求已被成功接收
3xx:重定向–要完成请求必须进行更进一步的操作4xx:客户端错误–请求有语法错误或请求无法实现
5xx:服务器端错误–服务器未能实现合法的请求
常见状态码说明:
200 ok //客户端请求成功 400 Bad Request //客户端请求语法错误,不能被服务器所理解
401 Unauthorized // 请求未经授权,这个状态码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求,但是拒绝提供服务 404 Not Found //请求资源不存在
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端请求,一段时间后可能恢复正常

(5)、http消息报头包括普通报头,请求报头,响应报头,实体报头。
每个报头域都是由名字+“:”+空格+值 组成,消息报头域的名字是大小写无关的。
1、普通报头 在普通报头中,有少数报头域用于所有的请求和响应消息,但并不用于被传输的实体,只用于传输的消息。例如:Cache-Control 用于指定缓存指令,缓存指令是单向的(响应中出现的缓存指令在请求中未必会出现),且是独立的(一个消息的缓存指令不会影响另一个消息处理的缓存机制)。

2、请求报头 允许客户端向服务器端传递请求的附加信息以及客户端自身的信息。常用的请求报头 Accept 请求报头域用于指定客户端接受哪些类型的信息。

3、响应报头 允许服务器传递不能放在状态行中的附加响应信息,以及关于服务器的信息和对Request-URI所标识的资源进行下一步访问的信息。常用的响应报头 Location 响应报头域用于重定向接受者到一个新的位置。Location响应报头域常用在更换域名的时候。Server响应报头域包含了服务器用来处理请求的软件信息。与User-Agent请求报头域是相对应的。

4、实体报头 请求和响应消息都可以传送一个实体。一个实体由实体报头域和实体正文组成,但并不是说实体报头域和实体正文要在一起发送,可以只发送实体报头域。实体报头定义了关于实体正文和请求所标识的资源的元信息。常用的实体报头Content-Encoding实体报头域被用作媒体类型的修饰符,它的值指示了已经被应用到实体正文的附加内容的编码,因而要获得Content-Type报头域中所引用的媒体类型,必须采用相应的解码机制。Content-Encoding这样用于记录文档的压缩方法。
http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html
http://www.360doc.com/content/10/0930/17/3668821_57590979.shtml

二、Ajax原理,跨域,jsonp,CORS等知识

(1)、Ajax是异步JavaScript和XML的简写,它能过向服务器请求额外的数据而无须卸载页面,给用户带来更好的体验。Ajax的核心在于使用XMLHttpRequest对象发送异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax的优点:无需刷新页面便可向服务器传输或读写数据;异步与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力;前端和后端负载平衡,原则是“按需取数据”可以很大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能;基于标准被广泛支持,不需要下载浏览器插件;界面与应用分离,ajax使web界面与应用分离,有利于分工合作,提高效率。
Ajax的缺点:Ajax破坏了Back和History功能,即对浏览器机制的破坏。在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。Ajax的安全问题;Ajax对搜索引擎支持较弱,若使用不当会增大网络数据的流量,从而降低整个系统的性能;破环程序的异常处理机制;违背URL和资源定位的初衷;Ajax不能良好支持移动设备。

(2)、跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性。只要协议、域名和端口有任何一个不同,都被当作不同的域就会产生跨域问题。

解决跨域问题:
1、使用jsonp,主要是浏览器script标签不受同源策略限制;动态创建script。
2、document.domain+iframe(只有在主域相同的时候才能使用这种方法)。
3、location.hash+iframe主要用location.hash进行传值。
4、CORS就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
5、web socket是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。只有在支持web socket协议的服务器上才能正常工作。

三、cookie,session,localstorage,sessionstorage

(1)、cookie和session原理和区别
session的数据是存放在服务器端的,session依赖于cookie。它们之间的区别:cookie数据存储在客户端,而session数据存储在服务器端;cookie不是很安全,而session当访问量增多,会占用服务器性能;综上所述将登录信息重要的保存在session中,其他信息可以保存在cookie中。session存储的执行过程:当用户请求servlet,servlet会首先查看客户端cookie中是否有sessionID,如果有则证明是旧的会话,那么就通过cookie将sessionID发送到服务器,服务器就会根据sessionID到服务器的内存中查找session对象(因为每个session都会有一个sessionID来标识session对象),找到之后然后使用。如果cookie中没有sessionID这证明是一个新的会话。服务器就会创建一个新的Session对象,然后将SessionID存放在cookie中,通过cookie把sessionID发送到客户端。客户端下一次访问的时候,就会将SessionID发送到服务器以便再次找到这个session对象,完成会话跟踪所以如果用户将cookie关闭session也将会失效。由于cookie不适合存储大量的数据,速度慢且效率低。

(2)、浏览器本地存储 sessionStorage和localStorage
js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
Web Storage和cookie很相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

谢谢!

转载请注明出处:http://www.haomou.net/2016/09/29/2016_yaya_day4/
有问题请留言。T_T 皓眸大前端开发学习 T_T