HTTP详解

143 阅读3分钟

HTTP Request Header

content-type 本次请求携带的数据类型

在执行send方法前,需要使用setRequestHeader("Content-type", XX)进行设置

  • application/x-www-form-urlencoded:表示数据被编码成以&分割的键值对,同时以=分割键和值 如:a=b&c=d
  • application/json:表示是一个JSON类型
  • text/plain:表示是文本类型
  • application/xml: 表示是xml类型
  • multipart/form-data:表示是上传文件

content-length

文件的大小长度

kepp-alive

  • http是基于TCP协议的,通常在进行一次请求和响应结束后会立刻中断;
  • http1.0中 如果想要继续保连接:
    • 浏览器需要在请求头添加connection:keep-alive;
    • 服务器需要在响应头中添加connection:keep-alive;
    • 当客户端再次发起请求时,就会使用同一个连接
  • http1.1中 所有连接默认是connection:keep-alive的; 不同的服务器会有不同的保持时间,node中默认是5S

accept-encoding

告知服务器,客户端支持的文件压缩格式,比如JS文件可以使用gzip编码,对应.gz文件

accept

告知服务器,客户端可接受文件的格式类型

user-agent

客户端相关信息

HTTP Response Header

http状态码

HTTP状态码状态描述信息说明
200OK客户端请求成功
201createdpost请求,创建新的资源
301moved permanertly请求资源的URL已经修改,响应中会给出新的URL
400bad request客户端的错误,服务器无法或不进行处理
401unauthorized未授权的错误,必须携带身份信息
403forbidden服务器找不到请求的资源
404not found服务器找不到请求的资源
500internal servel error服务器遇到了不知道如何处理的情况
503service unavailable服务器不可用,可能处理维护或者重载,暂时无法访问

如何发送http请求

  • 创建网络请求AJAX对象(XMLHttpRequest)
  • 监听XMLHttpRequest对象状态的变化,或者监听onload事件(请求完成时触发)
  • 配置网络请求(open方法)
  • 发送send网络请求
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
    if(xhr.readyState !== XMLHttpRequest.DONE) return
    // 将字符串转成JSON对象
    const resJSON = JSON.parse(xhr.response)
}
xhr.open('get', "http://url", true)
xhr.send()

xhr.readyState

状态描述
0代理被创建,但尚未调用open方法
1openedopen方法已经被调用
2headers receivedsend方法已经被调用,并且头部和状态已经可获得
3loading下载中,responseText属性已经包含部分数据
4done下载操作已完成

xhr.responseType

描述
arraybuffer是一个包含二进制数据的 JavaScript ArrayBuffer
bolb是一个包含二进制数据的 Blob 对象
document一个 HTML Document 或 XML XMLDocument,根据接收到的数据的 MIME 类型而定
json通过将接收到的数据内容解析为 JSON 而创建的 JavaScript 对象
text是 DOMString 对象中的文本

其他事件

  • loadstart:请求开始
  • progress: 一个响应数据包到达,此时整个response body都在response中
  • abort:调用xhr.abort()取消请求
  • error:发生连接错误,例如域错误;不会发生诸如 404这类的HTTP错误
  • load: 请求成功完成
  • timeout:由于请求超时而取消了该请求(仅发生在设置了timeout的情况下)
  • loadend:在load,error,timeout或abort之后触发