深入浅出理解前端基础HTTP协议 2023-05-16

http协议的本质是客户端与服务器建立通信连接的规范

• 客户端发送请求信息包括：
  请求行（GET、POST等方法 路径 协议HTTP/1.1）
  头信息（Host:主机名字www.baidu.com Content-type:application/x-www-form-urlenconded Content-length:主体信息长度）
  空格
  主体信息

for exp:
##一次请求信息
GET / HTTP/1.1
Host:www.baidu.com #表示使用GET方法获取百度首页的文档信息

#由于GET方法是获取对方的数据，所以主体信息可以为空
-------------------------------------------
POST / HTTP/1.1
Host: local.host
Content-type:application/x-www-form-urlencoded
Content-length:5

hello #表示使用post向本地服务器发送"hello"字符串
#由于需要发送数据，所以必须在头信息中写明数据类型Content-type和数据的长度Content-length

• 在windows系统上使用cmd进入命令行 输入telnet www.baidu.com 80命令可以尝试连接到百度服务器
  telnet.png
  按下回车键进入的页面无任何信息，再按下 ctrl+] 即可
  注意接下来的命令前必须再按一次回车 再输入后续的命令
  telnet.png
• 请求方法：GET POST HEAD PUT TRACE DELETE OPTIONS
• 请求头信息中 referer:xxx 标记是否从站点内部访问本站资源
  cookie:xxx 标记当前的登录用户身份

• 服务器端响应信息包括：
  响应行（协议HTTP/1.1 状态200 状态码ok）
  头信息
  空格
  主体信息
• 响应行状态
  2xx 成功
  3xx 重定向 301/302 永久/临时重定向
  304 Not modified 未修改
  307 重定向中保持原有的数据
  4xx 客户端出错
  5xx 服务器出错 503服务器暂时不可用 500 服务器内部错误
• 基于HTTP协议，Ajax 客户端向服务器请求数据、接收数据、处理数据
  1.创建xmlHttpRequest对象

function createXmlHttpRequest(){
  if(windows.ActiveXObject){
    xmlHttpRequest=new ActiveXObject(Microsoft.XMLHTTP)
  }else{
    xmlHttpRequest=new XMLHttpRequest()
  }
}

2.创建请求xmlHttpRequest.open()
3.创建响应函数，处理接收到的数据
处理数据前判断数据传输是否正确
xmlHttpRequest.readystate==4&&xmlHttpRequest.status==200
readystate的值：0未初始化（创建了xmlHttpRequest对象） 1初始化（.open()） 2发送数据（.send()） 3接收数据 4完成
4.发送请求xmlHttpRequest.send()
5.使用JS/dom等进行渲染