JavaEE

【前端】JavaScript —— WebAPI

HTTP —— HTTP 协议中的细节(超详细!!)

目录

• HTTP 响应详解
• • 认识 "状态码"
  • • 状态码小结
  • 认识响应 "报头" header
  • • Content-Type
  • 认识响应 "正文" body
• 构造 HTTP 请求
• • form 表单
  • ajax
  • postman

HTTP 响应详解

认识 “状态码”

是一个数字, 这个数字描述了当前这次请求的 “状态” (成功还是失败, 失败的原因)

HTTP 的状态码是有明确的规定的, 状态码是有很多的, 本篇文章主要介绍常见的状态码.

200

表示访问成功, 日常打开一个网站, 状态码基本都是 200

我们打开 fiddler 可以可以看到, 许多网站此处的状态码都是 200

404

Not found, 学习后端开发经常见到的一个错误.

问题的原因: 请求路径写错了

请求里 -> url -> 路径(表示你要访问的服务器上的资源)

如果你想访问的资源, 服务器上没有, 此时就会返回 404.

比如： 我们打开 bing , 在上方网址后面输入 gujiu.html (我们的服务器是没有 gujiu.html 的)

刷新页面, 我们就会看到如下这样的页面

对应的响应也是 404:

403

Forbidden 访问被拒绝 (没有权限)

比如： 我的 gitee 有私有仓库, 我们登录 gitee 是可以正常访问的

现在我们退出登录, 直接访问该网址

500

Internal Server Error 服务器内部错误 (服务器代码执行过程中, 出异常了)

在现有的网站中, 找一个 “500” 是比较困难的.

500 意味着服务器出 bug 了.

504

Gateway Timeout 访问超时了

一般就是服务器请求量很大的时候, 对于服务器的负荷就比较重.

302

重定向, 访问一个旧的 URL 自动的转移到新的 URL 上.

类似呼叫转移, 当有人给旧的号码打电话, 自动的转接到新号码上

典型场景:

1. 服务器的地址迁移.
2. 搜索引擎中的点击跳转.

状态码小结

小知识

状态码中的彩蛋: 418 I’m a teapot

这个状态码是明确的写在 HTTP 对应的 RFC 标准文档中的.

认识响应 “报头” header

响应报头的基本格式和请求报头的格式基本一致.

类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致.

Content-Type

响应中的 Content-Type 常见取值有以下几种:

• text/html : body 数据格式是 HTML
• text/css : body 数据格式是 CSS
• application/javascript : body 数据格式是 JavaScript
• application/json : body 数据格式是 JSON

认识响应 “正文” body

正文的具体格式取决于 Content-Type.

1) text/html

2) text/css

3) application/javascript

4) application/json

构造 HTTP 请求

1. 浏览器自己构造的 (地址栏里写 URL, 构造出 GET 请求)
   • 点击 a 标签, 会构造 GET 请求
   • img, link, script 也会构造请求
2. form 表单 (只支持 Get 和 Post)
3. ajax 各种 HTTP 方法都能构造

form 表单

form 最关键的作用, 就是给服务器传键值对. (只支持 Get 和 Post)

GET

我们来打开这个 .html , 输入并点击提交

就会跳转到

POST

这时的键值对不在 query string 中了

我们打开 fiddler, 我们看到键值对 在 body 中.

ajax

ajax 各种 HTTP 方法都能构造

form 构造的 HTTP 请求一定会触发, 页面跳转

ajax 默认发起的请求不会引起跳转. 当然, 也可以手动控制跳转

页面跳转, 不是一个好事, 开销大, 时间慢,

使用 ajax 不去触发跳转, 就可以达到 “局部刷新” 这样的效果

ajax 全称 Asynchronous Javascript And XML

使用 ajax 构造 http 请求

ajax API 是属于浏览器原生自带的, 但是原生的 API 不太好用. 因此我们就可以使用第三方库 (jquery), 封装好的 API 代替原生 API.

# 注意事项 #

这样的的代码直接执行是会报错的, 这里涉及到了 “跨域” 的问题

跨域: 一个页面在域名 a 之下, 尝试通过 ajax 访问域名 b 中的资源.

这种情况, 浏览器是默认禁止的. 除非 b 网站返回的响应, 明确告诉浏览器, 允许跨域访问.

市面上看到的大部分网站. 服务器 基本都是不允许跨域的.

最好的解决办法

自己写个服务器, 页面放到自己的服务器上, 页面访问自己的服务器

postman

但凡是某个编程语言, 可以操作网络 (能够进行 socket 编程) 就一定可以构造 HTTP 请求 (往一个 tcp socket 中写一个符合 http 协议格式的字符串).

postman 就是属于专门用来构造 HTTP 请求的第三方工具.

主要用来帮助我们进行 接口测试.

1. 后端写好了服务器之后, 需要提供一些 HTTP 的接口(可以接收一些 HTTP 请求, 返回不同的响应)
2. 程序员就需要验证一下, 接口对不对, 就可以使用前面说的这些办法来发 (浏览器地址栏, a 标签, form, ajax. 但是这些要么比较麻烦, 要么功能有限)
3. postman 就是一个更方便的构造 http 请求的工具

以上就是今天要讲的内容了，希望对大家有所帮助，如果有问题欢迎评论指出，会积极改正！！