|
|
JavaEE
【前端】JavaScript —— WebAPI
HTTP —— HTTP 协议中的细节(超详细!!)
目录
- HTTP 响应详解
- 认识 "状态码"
- 状态码小结
- 认识响应 "报头" header
- Content-Type
- 认识响应 "正文" body
- 构造 HTTP 请求
- form 表单
- ajax
- postman
HTTP 响应详解
认识 “状态码”
是一个数字, 这个数字描述了当前这次请求的 “状态” (成功还是失败, 失败的原因)
HTTP 的状态码是有明确的规定的, 状态码是有很多的, 本篇文章主要介绍常见的状态码.
| 状态码 | 状态 |
|---|---|
| 200 | 表示访问成功 |
| 404 | Not found (问题的原因: 请求路径写错了) |
| 403 | Forbidden 访问被拒绝 (没有权限) |
| 500 | internal Server Error 服务器内部错误 |
| 504 | Gateway Timeout 访问超时 |
| 302 | 重定向, 访问一个旧的 URL 自动的转移到新的 URL 上. |
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 上.
类似呼叫转移, 当有人给旧的号码打电话, 自动的转接到新号码上
典型场景:
- 服务器的地址迁移.
- 搜索引擎中的点击跳转.
状态码小结
| 类别 | 原因短语 | |
|---|---|---|
| 1xx | Informational (信息性状态码) | 接收的请求正在处理 |
| 2xx | Success (成功状态码) | 请求正常处理完毕 |
| 3xx | Redirection (重定向状态码) | 需要进行附加操作以完成请求 |
| 4xx | Client Error (客户端错误代码) | 服务器无法处理请求 |
| 5xx | Server Error (服务器错误状态码) | 服务器处理请求出错 |
小知识
状态码中的彩蛋: 418 I’m a teapot
这个状态码是明确的写在 HTTP 对应的 RFC 标准文档中的.
认识响应 “报头” header
响应报头的基本格式和请求报头的格式基本一致.
类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致.
Content-Type
响应中的 Content-Type 常见取值有以下几种:
text/html: body 数据格式是 HTMLtext/css: body 数据格式是 CSSapplication/javascript: body 数据格式是 JavaScriptapplication/json: body 数据格式是 JSON
认识响应 “正文” body
正文的具体格式取决于 Content-Type.
1) text/html
2) text/css
3) application/javascript
4) application/json
构造 HTTP 请求
- 浏览器自己构造的 (地址栏里写
URL, 构造出 GET 请求)- 点击 a 标签, 会构造 GET 请求
- img, link, script 也会构造请求
form表单 (只支持 Get 和 Post)ajax各种 HTTP 方法都能构造
form 表单
form 最关键的作用, 就是给服务器传键值对. (只支持 Get 和 Post)
GET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<form action="https://blog.csdn.net/m0_58592142?spm=1000.2115.3001.5343" method="get">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" value="提交">
</form>
</body>
</html>
我们来打开这个 .html , 输入并点击提交
就会跳转到
POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<form action="https://blog.csdn.net/m0_58592142?spm=1000.2115.3001.5343" method="post">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" value="提交">
</form>
</body>
</html>
这时的键值对不在 query string 中了
我们打开 fiddler, 我们看到键值对 在 body 中.
ajax
ajax 各种 HTTP 方法都能构造
form 构造的 HTTP 请求一定会触发, 页面跳转
ajax 默认发起的请求不会引起跳转. 当然, 也可以手动控制跳转
页面跳转, 不是一个好事, 开销大, 时间慢,
使用 ajax 不去触发跳转, 就可以达到 “局部刷新” 这样的效果
ajax 全称 Asynchronous Javascript And XML
使用 ajax 构造 http 请求
ajax API 是属于浏览器原生自带的, 但是原生的 API 不太好用. 因此我们就可以使用第三方库 (jquery), 封装好的 API 代替原生 API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$.ajax({
type: 'post',
url: 'https://blog.csdn.net/m0_58592142?spm=1000.2115.3001.5343',
data: 'http 请求的 body',
contentType: 'x-www-form-urlencoded',
success: function(body) {
console.log("ok");
},
error: function() {
console.log("error");
}
})
</script>
</body>
</html>
# 注意事项 #
这样的的代码直接执行是会报错的, 这里涉及到了 “跨域” 的问题
跨域: 一个页面在域名 a 之下, 尝试通过 ajax 访问域名 b 中的资源.
这种情况, 浏览器是默认禁止的. 除非 b 网站返回的响应, 明确告诉浏览器, 允许跨域访问.
市面上看到的大部分网站. 服务器 基本都是不允许跨域的.
最好的解决办法
自己写个服务器, 页面放到自己的服务器上, 页面访问自己的服务器
postman
但凡是某个编程语言, 可以操作网络 (能够进行 socket 编程) 就一定可以构造 HTTP 请求 (往一个 tcp socket 中写一个符合 http 协议格式的字符串).
postman 就是属于专门用来构造 HTTP 请求的第三方工具.
主要用来帮助我们进行 接口测试.
- 后端写好了服务器之后, 需要提供一些 HTTP 的接口(可以接收一些 HTTP 请求, 返回不同的响应)
- 程序员就需要验证一下, 接口对不对, 就可以使用前面说的这些办法来发 (浏览器地址栏, a 标签, form, ajax. 但是这些要么比较麻烦, 要么功能有限)
- postman 就是一个更方便的构造 http 请求的工具
|
|
以上就是今天要讲的内容了，希望对大家有所帮助，如果有问题欢迎评论指出，会积极改正！！
