一、http 协议
(一)、URL
URL完整的结构:
<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>
①scheme:
方案,协议。以哪种方式获取服务器资源。
不区分大小写。常见的协议
②<user>:<pwd>
(已作废,少有人用)
登录这个服务器的用户名和密码
③host
主机名称 127.0.0.1 ip地址
www.baidu.com 域名
标上你要访问的服务器,在网络上的门牌号
④port
端口号
任何一个程序,安装在电脑上,都会自动生成一个端口号
端口号理论最大值 0~65535 不要修改 0 ~ 1024 的端口
⑤path
路径,结构目录,资源放在服务器上存放的位置
⑥params
参数,跟踪状态的参数 session / cookie
⑦query
get 方法提交请求时,问号后面的查询字符串
⑧#<frag>
锚点
(二)、HTTP
HyperText Transfer Protoclo 超文本传输协议
规范了数据是如何打包和传递的(专门用于传递html文件)
HTTP协议的历史
(三)、web 请求的原理
DNS解析
(四)、报文/消息 Message
请求消息 Request Messange(请求起始行,请求头,请求主体)
响应消息Response Message (响应起始行,响应头,响应主体)
(五)、请求消息Request Message
请求消息,客户端发送给服务器的数据块
由三部分组成,请求起始行,请求头,请求主体
1、请求起始行
(1).请求的方法
HTTP 协议规定的请求的方法
get 明文传参,上限2kb,向服务器要参数的时候,无请求主体。
post 隐式传参,无上限,向服务器发送参数的时候,有请求主体 。
put 放置文件到服务器,一般会被禁用
delete 把服务器上某个文件删除,一般会被禁用
Restful 规则中的方法
Restful API 是一种规则,利用 http 已有的四个方法定义了4个行为,使用这4个行为发送请求
get 查数据的时候用(查),无请求主体,后台req.query。
post 创建(增),有请求主体,后台req.body。
put 修改数据(改),有请求主体,后台 req,body。
delete 删除(删),无请求主体, 后台req.query。
(2).协议版本号
(3).请求的URL
2、请求头
①Host:www.tmooc.cn
客户端告诉服务器,我要访问ww.tmooc.cn 这个主机。
②Connection:keep-alive
客户端告诉服务器,请开启持久链接。
③User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
告诉服务器,我这个浏览器的类型和版本号
④Accept-Encoding:gzip
告诉服务器,我这个浏览器可以接收的压缩文件的格式
⑤Accept-Language:zh-CN
告诉服务器,我这个浏览器可以接收的自然语言的类型
⑥Referer:http://www.tmooc.cn
告诉服务器,我的请求来源于哪里
3、请求头
formdata
get /delete 没有请求主体
post/put 有请求主体
(六)、响应消息Response Message
响应消息,服务器发送给客户端的数据块
由三部分组成,响应起始行,响应头,响应主体
1、响应起始行
http/1.1 200 OK
(1) 协议版本号
http/1.1
(2)响应状态码
服务器告诉客户端,服务器的响应状态码是什么
1xx,正在请求,提示信息
2xx,200 响应成功
3xx, 301 永久重定向;
302 临时重定向;
304 请求为改变,命中缓存;
4xx,404 not found 请求资源不存在
403 权限不够
405 请求方法不被允许
5xx 500服务器代码出错
(3) 原因短句
对响应状态码简短的说明
2、响应头
(1) Date:Sat, 07 Dec 2019 06:51:37 GMT
格林威治时间
告诉浏览器,服务器响应的时间
(2)Connection:keep-alive
服务器告诉浏览器,我已经打开了永久链接
(3)Content-Type:text/html
告诉浏览器,响应主体的类型是什么
text/html 响应回来的数据是html文本
text/css 响应回来的数据是css文本
application/javascript js js文本
application/json json文本
application/xml xml文本
image/jpg
image/png
image/gif
3、响应主体
服务器传递给浏览器的数据
(七)、缓存
1、什么是缓存
2、缓存的优点
3、缓存的原理
缓存原理:新鲜度和过期
1.请求–无缓存–谅解服务器–存缓存–客户端渲染
2.请求–有缓存–够新鲜–使用缓存–客户端渲染
3.请求–有缓存–不新鲜–连接服务器确认是否过期–没过期–更新缓存新 鲜度–客户端渲染
4.请求–有缓存–不新鲜–连接服务器确认是否过期–过期–连接服务器–存缓存–客户端渲染
4、缓存的操作(需要前端和后端都写代码)
① 缓存相关的消息头
Cache-Contrlo:max-age=0(单位是s)
从服务器将文档传到客户端之时起
此文档处于新鲜的秒数,是一个相对时间
②修改请求消息头
(八)、HTTP性能优化
HTTP的连接过程
发送请求–>建立连接–>服务器处理请求–>访问资源–>构建响应–>发送响应–>记录日志
1、http连接的性能优化
①减少连接创建的次数(开启持久链接)
②减少请求的次数(代码设计更合理)
③提高服务器运行的速度
④尽可能的减少响应数据的长度
(九)、安全的HTTP协议,HTTPS
HTTPS,是安全版本的http协议
S:SSL为数据通信提供安全支持
二、ajax
function show(){
//1.创建异步对象
var xhr = new XMLHttpRequest();
/*4.绑定监听,接收响应数据
(1).xhr.readyState 属性
用于表示xhr对象的请求状态,一共5个状态
0:请求尚未初始化
1:已经打开服务器连接,正在发送请求
2:接收响应头
3:接收响应主体
4:响应数据接收完毕
(2)xhr.status:响应状态码
*/
xhr.onreadystatechange() = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var result = xhr.responseText;
}
}
/*2.打开连接,创建请求
xhr.open(method,url,isAsync);
method:请求的方法;
url:请求的地址URL;
isAsync:是否要使用异步,Boolean值,true/false
*/
xhr.open("get","http://127.0.0.1:8080/login",true);
//3.发送请求
xhr.send(formadata);
/*注意:get方法,没有formdata请求主体,所以在使用get方法时,
xhr.send()括号中参数可以不填写,或者填null
*/
}
4、代参数的get请求
<div>
用户名: <input type="text" id="uname"/><br>
密 码:<input type="password" id="upwd"/><br>
<input type="submit" onclick="login()"/>
</div>
</body>
<script>
function login() {
var $uname = getElementById("uname").value;
var $upwd = getElementById("upwd").value;
//1、获取异步对象xhr
var xhr = new XMLHttpRequest();
//4、绑定监听事件,获取响应
xhr.onreadystatechange = function (){
if (xhr.readyState == 4 && xhr.status == 200){
var result = xhr.responseText;
console.log(xhr.responseText);
}
};
//2、打开连接,创建氢气
xhr.open("get","/user/login?uname=" + $uname+"&upwd=" + $upwd,true);
//3、发送请求
xhr.send(null);
}
</script>
针对兼容IE8以下的版本
IE8以下获取异步对象:
var xhr = new ActiveXObject("Microsoft.XMLHttp")
三、XML
eXtensible markup language
可扩展的 标记 语言
所有的标签,属性都是自己定义
xml 就是做数据传递的,不用于数据展示
1、语法
①首行做版本声明
<?xml version="1.0" encoding="utf-8"?>
②xml标记,都是自己命名,只有双标记,没有单标记
③xml标记,严格区分大小写,开始标记和结束标记必须一致
④每个xml 文档,有且只有一对根标记
eg:
<?xml version="1.0" encoding="utf-8"?>
<studentList>
<student>
<uid>1001</uid>
<uname>hanmeimei</uname>
<age>20<age>
</student>
<student>
<uid>1002</uid>
<uname>lilei</uname>
<age>22</age>
</student>
</studentList>
2、xml 解析
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
function getXML(){
//1、创建xhr对象
var xhr = new XMLHttpResquest();
//4、绑定监听,获取响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var result = xhr.responseXML;
console.log(result);
//解析xml这个对象
//①找到根元素
var studentList = result.getElementsByTagName("studentlist");
//②用根元素找到第二层元素
var student = studentList[0].getElementsByTagName("student");
//③找到第三层元素
var uname = student[1].getElementByTagName("uname");
//获取元素内内容
var unameData = uname[0].innerHTML;
}
}
//2、打开连接,创建请求
xhr.open("get","stus.xml",true);
//3、发送请求
xhr.send();
}
</script>
</head>
<body>
</body>
</html>