怎么当网站站长,微信小程序开发费用一览表,广州网站建设商家,酒泉网站建设专家这里是修真院前端小课堂#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能#xff0c;本篇分享的是#xff1a; 【network中的请求信息#xff0c;headers中的每… 这里是修真院前端小课堂每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能本篇分享的是 【network中的请求信息headers中的每一项分别是什么意义?】 【JS-5】network中的请求信息headers中的每一项分别是什么意义? 大家好我是IT修真院深圳分院第12期的学员韩鹏一枚正直纯洁善良的前端程序员今天给大家分享一下修真院官网JS任务5深度思考中的知识点——network中的请求信息headers中的每一项分别是什么意义? 1.背景介绍 作为一个Web开发人员日常中与我们开发相关的就是Chrome的开发者工具。Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用特别是在查看Ajax类请求的时候非常有帮助。今天就是要简要说说Chrome的开发者工具中Network中header部分。 2.知识剖析 Network面板-请求表 Name资源名称点击名称可以查看资源的详情情况包括Headers、Preview、Response、Cookies、Timing。 StatusHTTP状态码。 Type请求的资源MIME类型。 Initiator标记请求是由哪个对象或进程发起的请求源。 Parser 请求由Chrome的HTML解析器时发起的。 Redirect请求是由HTTP页面重定向发起的。 Script请求是由Script脚本发起的。 Other请求是由其他进程发起的比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。 Size从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache) Time请求或下载的时间从发起Request到获取到Response所用的总时间。 Timeline显示所有网络请求的可视化瀑布流(时间状态轴)点击时间轴可以查看该请求的详细信息点击列头则可以根据指定的字段可以排序。 通过点击某个资源的Name可以查看该资源的详细信息根据选择的资源类型显示的信息也不太一样可能包括如下Tab信息 Headers该资源的HTTP头信息。 Preview根据你所选择的资源类型JSON、图片、文本显示相应的预览。 Response显示HTTP的Response信息。 Cookies显示资源HTTP的Request和Response过程中的Cookies信息。 Timing显示资源在整个请求生命周期过程中各部分花费的时间。 查看资源HTTP头信息 在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。 General部分: Request URL:资源的请求url Request Method:HTTP方法 Status Code:响应状态码 200状态码 OK原因短语 301 - 资源网页等被永久转移到其它URL 404 - 请求的资源网页等不存在 500 - 内部服务器错误 Response Headers: Content-Encoding:gzip ——压缩编码类型 Content-Type:text/html ——服务端发送的类型及采用的编码方式 Date:Tue, 14 Feb 2017 03:38:28 GMT ——客户端请求服务端的时间 Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服务端对该资源最后修改的时间GMT是格林尼治标准时间 Server:nginx/1.2.4 ——服务端的Web服务端名 Transfer-Encoding:chunked ——分块传递数据到客户端 Request Headers: Accept:text/html ——客户端能接收的资源类型 Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型 Accept-Language:en-US,en;q0.8 ——客户端接收的语言类型 Cache-Control:no-cache ——服务端禁止客户端缓存页面数据 Connection:keep-alive ——维护客户端和服务端的连接关系 Cookie: ——客户端暂存服务端的信息 Host:www.jnshu.com ——连接的目标主机和端口号 Pragma:no-cache ——服务端禁止客户端缓存页面数据 Referer:http://www.jnshu.com/daily/12345 ——来于哪里 User-Agent: ——客户端版本号的名字 3.常见问题 使用post发送请求时如何设置content-type的值 4.解决方案 常用的Content-Type值 1. application/x-www-form-urlencoded 最常见的POST提交格式使用这个编码格式post的数据会以键值对的方式提交 2. multipart/form-data 通常上传图片等文件会使用这种编码格式提交 3. application/json 提交JSON格式的数据 设置请求头的方法 1、在http服务的在服务端发送请求时也就是调用http()方法时在config对象中设置请求头信息。事例如下 $http.post( url , data , {headers : {My-Header : value;}}).then(function( ){……}); 这种方法的好处就是针对不同路径的请求可以个性化配置请求头部缺点就是不同路径请求都需要单独配置。 2、第二种设置请求头信息的方式就是在$httpProvider.defaults.headers属性上直接配置。事例如下 angular.module(app, []).config(function($httpProvider) {$httpProvider.defaults.headers.common { My-Header : value }}) $httpProvider.defaults.headers有不同的属性如common、get、post、put等。因此可以在不同的http请求上面添加不同的头信息common是指所有的请求方式。 这种方式添加请求头信息的优势就是可以给不同请求方式添加相同的请求头信息缺点就是不能够为某些请求path添加个性化头信息。 5.代码实战 6.拓展思考 HTTP的缺点 通讯使用明文不加密内容可能会被监听 不验证通讯方的身份因此有可能遭遇伪装 无法证明白报文的完整性所以有可能已被篡改 解决方法使用HTTPS HTTP 加密 认证 完整性保护 HTTPS 7.参考文献 参考一HTTP请求头和响应头含义参考二content-type说明 参考三Network面板 参考四$http-设置http请求头 8.更多讨论 1、TIMELINE 时间轴中的不同颜色的线代表什么意思 答Timeline工具里面使用是4种颜色来表示不同类别的事件: 蓝色加载黄色脚本紫色渲染绿色绘制 2、所有请求都有Content-Type吗 答GET 请求不存在请求实体部分键值对参数放置在 URL 尾部浏览器把form数据转换成一个字串name1value1name2value2...然后把这个字串追加到url后面用?分割加载这个新的url。因此请求头不需要设置 Content-Type 字段。 3、除了已讲的两种还有什么方法设置Content-Type吗 答有的。 第三种设置请求头信息的地方是$httpProvider.interceptors。也就是为请求或相应注册一个拦截器。使用这这方式我们首先需要定义一个服务。 myModule.factory(authInterceptor, function($rootScope, $cookies){return {request: function(config){config.headers config.headers || {};if($cookies.get(token)){config.headers.authorization Bearer $cookies.get(token);}return config;},responseError: function(response){// ...}};}) 然后把上面定义的服务注册到$httpProvider.interceptors中。 .config(function($httpProvider){$httpProvider.interceptors.push(authInterceptor);})
