HTTP协议

一.HTTP协议

1.URL

结构:协议+主机名称+目录结构+资源

URL完整结构

://:@:/;?#

①scheme

方案,协议,以哪种方式传递数据,让服·务器和浏览器都能解析,不区分大小写


:

早期,服务器管理登录服务器时填写用户名和密码

主机名称  域名,ip地址

端口号 127.0.0.1:3306

路径,资源在服务器上的目录结构

参数,跟踪状态参数  session/cookie

查询字符串

锚点

2.http协议

HyperText Transfer Protocol 超文本 传输 协议

规范了数据是如何打包和传递

http协议发展历史


3.web请求原理的详解

通过服务器,浏览器,通信协议来完成数据的传输和展示


4.报文、消息

Message 是在客户端和服务器之间传递的数据块

请求消息 Request Message

响应消息 Response Message

5. Request Message

①请求起始行

GET  请求方法

HTTP/1.1  协议版本号

Host: www.tmooc.cn  请求的url

②请求头信息

1.Host: www.tmooc.cn

浏览器告诉服务器,我要访问的主机名称

2. Connection: keep-alive

浏览器告诉服务器,请开启持久连接

3. User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

浏览器告诉服务器,当前的系统和浏览器版本号

4. Accept-Encoding: gzip, deflate

浏览器告诉服务器,当前浏览器能够接收压缩文件类型

5.Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

浏览器告诉服务器,当前浏览器能够接收的自然语言的类型

③请求主体

formdata  post和put方法传递的参数在请求主体中

6. Response Message

①响应起始行

HTTP/1.1协议版本号

200 响应状态码 (404  500)

OK  原因短句


404访问资源找不到,一般是服务器没有启动,或者前后台接口对不上

500 服务器端有语法错误

②响应头信息

1. Date: Wed, 03 Feb 2021 03:40:59 GMT

服务器告诉浏览器,服务器响应的具体时间2

2. Connection: keep-alive

服务器告诉浏览器,持久连接已经开启

3. Content-Type: text/html

服务器告诉浏览器,响应主体的数据类型是什么

   text/html  网页

   text/css    css文件

   application/javascript  js文件

   application/xml        xml数据

   application/json       json数据

   image/png  png图片

③响应主体

服务器真正发送给浏览器的内容


7.缓存


缓存的优点:减少冗(rong)余的数据传输,节省客户端浏览器,提升服务器端效率

8.http性能优化

1.减少连接的创建次数(开启持久连接)

2.减少请求次数(使用缓存)

3.尽可能的减少响应数据的长度

9.安全的http协议https

SSL:为数据通信提供安全支持的加密组件

1.客户端发送请求-->SSL层加密-->服务器接收到加密文件-->ssl层解密--->得到请求明文

2.服务器发送响应-->SSL层加密-->客户端接收到加密文件-->ssl层解密--->得到响应明文

二.简易dom操作

1.完整javascript组成

1.js核心  ECMA Script  es6

2.DOM   Document  Object  Model  文档对象模型

   使用js来操作html中元素

3.BOM   Browser Objecdt Model 浏览器对象模型

   使用js来操作浏览器

2.为什么在ajax之前要学习dom

Ajax负责发送请求,并接收响应

不需要使用form表单了,没有自动收集整理数据的能力(不写name属性)

需要使用dom来操作元素,获取元素中填写的数据(获取数据)

同时接收响应之后,把数据放到元素中显示(显示数据)

3.dom的编写步骤

①编写事件 onclick,编写对应方法

②获取html元素对象 document.getElementById("id值");

③操作元素

1.操作input元素

var obj=document.getElementById("input元素id");

obj.value="字符串" 在页面的文本框中,显示字符串

var r=obj.value; 把页面中文本框中的值,存入r这个变量

2.操作双标签元素

var obj=document.getElementById("双标签元素id");

obj.innerHTML="字符串" 在页面的双标签,显示字符串

var r=obj.innerHTML; 获取双标签的内容区域的数据,存入r中

02_ex.html练习

点击按钮,把用户在文本框输入的数据,显示在div中

提高题:输入两个数值,分别把这两个数值的加减乘除结果显示在div中


4.innerHTML详解:直接在字符串里编写标签,可以改变页面结构

5.事件

ES6规定,可以直接使用元素id充当元素对象来调用属性和方法

但是,保存值的变量名,要和id区分开

var _uname=uname.value;

通过用户在页面上的操作,来激活调用js

onclick  单击事件

onload  页面加载事件,要求是只能写在body标签中

onblur  焦点移除事件

onfocus 获取焦点事件

你可能感兴趣的:(HTTP协议)