一.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 获取焦点事件