1352717788_6378

前后端分离的大趋势下,前端如果对于HTTP不了解,很难顺利的完成与后端接口的调试,目前还算比较常见的restFul接口更是将API风格完全依赖于HTTP协议,所以这种情况下,一个给力的前端应该对HTTP有一些基本了解.

说起HTTP协议又不得不提到Ajax,这种前端工程师用来和后端交互数据最主要的方式.

那么就从这里谈起吧:

(1) XMLHttpRequest

浏览器在XMLHttpRequest类上定义了相关的HTTP API,该类每一个实例都表示一个独立的请求/响应,同时API还提供了对于请求细节进行制定和提取响应数据的接口.

// 实例化XMLHttpRequest对象
var request = new XMLHttpRequest();

现在可以说一下HTTP的组成,虽然它千变万化,不过大体上是由2个大部分,共7个小部分组成,2个大部分也就是HTTP请求以及HTTP响应.

一个HTTP请求大体上由四部分组成:

HTTP请求方法或"动作" (GET,POST,PUT,DELETE等)

请求的url地址

一个可选的请求头集合,可能包含身份验证信息等

一个可选的请求主体

服务器返回的HTTP响应包含3部分:

一个数字和文字组成的状态码,用来表示请求的成功和失败

一个响应头集合

(2) HTTP请求

在一个XMLHttpRequest对象实例化完成后,就可以通过它调用API发送请求了,通过open()方法指定请求的方法和URL即可.

GET和POST是当前得到支持最广泛的HTTP协议,GET常见于一般请求,通常为了获取资源,对于浏览器没有任何副作用,而且可以缓存.POST一般用于提交数据进而存储到数据库, POST请求需要"Content-Type"头指定请求主体的MIME类型:

request.setRequestHeader("Content-Type","text/plain");

说到Content-Type这个,如果对于HTTP协议不熟悉可能有点晕了开始,没关系我一点点说.这个说白了就是内容的类型,HTTP的请求头和响应中都会存在这个属性.它的值决定了前后端在交互数据的时候分别以怎样的格式才能得到彼此传递的数据.

比较常见的情况有这么种:

提交一个表单通过POST请求到后端,那么Content-Type的值就是application/x-www-form-urlencoded.

通过POST或者PUT发送JSON格式数据,近年来作为Web交互最常见的数据格式,如果要实现就要设置请求头中,Content-Type的值是application/json.

通过Form表单上传文件,使用POST上传<input type='file'>的文件,这个时候Content-Type的值要设置为multipart/form-data.

通过POST发送纯文本,那么Content-Type的值是text/plain;charset=UTF-8.

最后的上传文件这个要说明一点就是,这种情况是同时包括文件和其他元素的状态下,如果仅有文件,可以不设置Content-Type直接通过POST请求完成.除了Content-Type之外还有很多请求头,有些可以自定义,有些必须由浏览器指定. 还是列出一些常见的,附上注释,大家了解一下.

Header	含义	可能的值
Accept	客户端能接受的内容类型	text/plain,text/html
Accept-Encoding	浏览器可以支持的web服务器返回内容压缩编码类型	compress, gzip
Accept-Language	浏览器可接受的语言	en,zh
Connection	是否需要持久连接(HTTP 1.1默认进行持久连接)	close
Cookie	HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送	$Version=1; Skin=new
Content-Type	请求的与实体对应的MIME信息	application/x-www-form-urlencoded

HTTP的请求是有顺序的,请求的方法和URL首先到达,然后是请求头,最后是请求主体.知道这个顺序有什么用?它可以帮助你记忆XMLHttpRequest实现的请求的顺序,也就是send()方法才开始启动网络,setRequestHeader()必须在open()之后send()之前调用.

创建XMLHttpRequest --> request.open("POST"," bcoder.clbug.com"); --> request.setRequestHeader(Content-Type,text/plain) --> request.send(data)

(3) HTTP响应

响应的部分对于前端开发的影响就少了很多,只关注几个紧要点就能满足日常的需求,最重要的应该就是status状态码.在前端处理响应的过程中,还是可能会有一些比较隐蔽的小坑.先大体上说一些响应的步骤,然后再说说坑.

XMLHttpRequest对象发送请求后,send()立刻返回,知道响应返回之前列出的响应方法和属性才有效.这就要监听XMLHttpRequest对象上的readystatechange事件,其中readyState表示HTTP请求的状态.

有时候我们明明发现readyState返回的是4,HTTP的status是200,明明就是OK,但是就收不到返回的数据.因为事件处理程序要保证请求完成,首先它会检查响应状态码,然后查找Content-Type头来验证响应主体是否是期望的类型.

所以如果你的请求响应状态都正确,但始终获取不到正确的数据,检查一下Content-Type吧.

其实还应该有一部内容来说一下关于跨域,HTTP进度和请求超时终止的内容,不过跨域我在另一篇博客中完整说明了,HTTP进度和请求终止超时应用的情景非常有限,所以就不多说了.

前端开发需要掌握的一点HTTP知识

付费节点推荐