T-Ajax基础-day01-HTTP协议、简易DOM操作

一.ajax前瞻知识

1. HTTP协议-url
   1. URL完整结构结构
      url的结构：协议+服务器主机+目录结构+文件名称
      <scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<flag>
   2. url完整结构详解
      <scheme>：方案，协议。设置以哪种方式获取服务器资源，不区分大小写，常见的协议：http协议，file协议，https
      
      <user>:<pwd>：用户名和密码，早期后台管理员登录会使用
      <host>：服务器主机名称，包括：IP地址、域名
      <port>：端口号
      <path>：路径，资源在服务器上存放的具体位置
      <params>：参数，状态跟踪的参数，session/cookie
<query>：查询字符串，gey请求提交放参数用
      <flag>：锚点
2. HTTP协议
   HTTP:HyperText Transfer Protocol：超文本传输协议
   规范了数据是如何打包和传递的（专门用于传输web文件）
   
3. web请求原理的详解
   
4. Message
   1. 请求消息：Request Message：客户端发送给服务器的数据块
   2. 响应消息：Response Message：服务器发送给客户端的数据块
   3. 请求消息和响应消息都有固定的格式
5. 请求消息：Request Message
   1. 请求起始行
      请求方法：GET
      协议版本号：HTTP/1.1
      请求的url：Host: www.baidu.com
      请求方法有两套：

      HTTP原生的请求方法	Restful API的请求（是在http请求的基础做的升级，是一种接口规范）
      get：明文提交，向服务器要数据的时候使用，没有请求主体，req.query	get：所有的查询模块都是用get，没有请求主体，req.params
      post：隐式提交，把数据传递给服务器的时候使用，有请求主体，req.body	post：所有的新增数据都是用post，有请求主体，req.body
      put：把文件放到服务器上的时候使用put，有请求主体	put：所有的修改用put，有请求主体，req.body
      delete：删除服务器资源的时候使用delete，没有请求主体	delete：所有的删除操作都用delete，没有请求主体，req.params
      option：预请求

   2. 请求头
      Host: www.baidu.com：浏览器告诉服务器，请求的是哪一台主机
      Connection: keep-alive：：浏览器告诉服务器，请开启持久连接
      User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64)：浏览器告诉服务器，客户端的信息和浏览器的信息
      Accept-Encoding:gzip：告诉服务器，这个浏览器能够接收的压缩文件格式
      Accept-Language:en,zh-CN：告诉服务器，这个浏览器能够接收的自然语言
      Referer:http://www.baidu.com/：告诉服务器，这个请求是来自于那个页面
   3. 请求主体-formdata
      get，delete没有请求主体；post，put有请求主体
6. 响应消息：Response Message
   1. 响应起始行
      协议版本号：HTTP/1.1
      响应状态码：200
      响应状态码的原因短句：OK

      ---

      响应状态码，服务器告诉浏览器，我的响应状态是什么：
      1xx：正在请求
      2xx：200-成功
      3xx：重定向，301-永久重定向；302-临时重定向；304-使用缓存
      4xx：404-请求资源不存在（查路径）；403-权限不够；405-请求的方法不被允许
      5xx：500-服务器代码错误；
   2. 响应头
      Connection:keep-alive：服务器告诉浏览器，已经开启了持久连接
      Date:Wed, 25 Mar 2020 07:56:51 GMT：告诉浏览器，服务器响应的具体时间
      Content-Type:text/html：告诉浏览器，响应主体的类型：①text/html：响应主体是html文件；②text/plain：响应主体是普通文本；③text/css：响应主体是css文件；④application/javascript:响应主体是js文件；⑤application/json：响应主体是json字符串；⑥application/xml：响应主体是xml字符串
   3. 响应主体：服务器传给浏览器的数据
      
7. 缓存
   客户端浏览器将服务器响应回来的数据，进行自动保存。当再次访问这个数据，使用本地缓存的数据，不进行网络连接。
   
   缓存的优点：①减少冗余的数据传输，节省客户端流量；②节省了服务器端流量；③降低了对服务器资源的消耗和运行的要求；④降低了由于远距离传输而造成的
   缓存的机制：
   
   1. 请求—>无缓存—>连接服务器—>存缓存—>客户端得到
   2. 请求—>有缓存—>够新鲜—>使用缓存—>客户端得到
   3. 请求—>有缓存—>不新鲜—>连接服务器确认是否过期—>没过期—>更新新鲜度—>客户端得到
   4. 请求—>有缓存—>不新鲜—>连接服务器确认是否过期—>已过期—>连接服务器—>存缓存—>客户端得到

   ---

   缓存的头消息
   1. Cache-Control:no-cache：没有缓存
   2. Cache-Control:max-age=30：设置缓存处于最大的新鲜时间，30s
      网页如何添加缓存，需要修改头信息
      <meta http-equif="头信息的名称" content="值">
      例：<meta http-equif="Cache-Control" content="max-age=30">`
8. HTTP的性能优化
   1. http的连接过程
      发送请求—>建立连接—>服务器处理请求—>访问资源—>构建响应—>发送响应—>记录日志
   2. HTTP连接性能优化
      1. 减少连接的创建次数（开启持久连接）
      2. 减少请求的次数（使用缓存）
      3. 提高服务器端的运行速度
      4. 尽量的减少响应的长度
   3. 安全的http协议（https）
      https是安全版本的http协议，s—>ssl为数据通信提供安全支持
      1. 客户端发送请求—>在ssl层进行加密—>服务器接收到加密文件—>在ssl层解密—>得到请求明文
      2. 服务器发送响应—>在ssl层加密—>浏览器收到加密文件—>在ssl层解密—>得到响应明文

二.简易的DOM操作

1. 完整的JavaScript的组成
   1. js核心 ECMAScript
   2. DOM：Document Object Model：文档对象模型—使用js获取标签对象，修改标签的属性值和样式
   3. BOM：Browser Object Model：浏览器对象模型—使用js操作浏览器
2. 为什么学ajax之前，学DOM
   之前提交请求使用的form表单，form表单能够自动的收集整理控件中的数据；使用ajax就不用form，那就失去了自动收集数据的能力，所以，需要使用DOM，手写代码，收集数据。PS.form自动收集数据的前提，必须有name属性，ajax不需要name属性，使用id，当使用单选按钮和多选按钮时，仍需要使用name，为了分组
3. 使用DOM
   两个步骤：
   (使用事件，调用js方法)①得到要操作的元素对象（找元素）；②使用对象，调用方法和属性（对象.方法() 或 对象.属性）
   1. 使用DOM操作input元素
      对象变量=document.getElementById("input的id");
对象变量.value="..."设置值
var msg=对象变量.value;获取值
   2. 使用DOM操作双标签
      对象变量=document.getElementById("双标签的id");
对象变量.innerHTML="..."设置内容
var msg=对象变量.innerHTNL;获取内容