AJAX day01

一、HTTP协议
  1.请求（request）消息
    (1)请求起始行
       ①请求方法
        get：无请求主体            2kb限制
         向服务器要数据时使用
    post：有请求主体           没有限制
         向服务器传递数据时使用
    put：表示客户端向放置文件到服务器（一般禁用）
    delete：表示客户端要删除服务器上的数据（一般禁用）
    head：表示客户端只获取指定的响应头
    connect：测试连接
    trace：追踪请求路径
    options：选项，保留以后使用
       ②请求url
       ③协议版本：HTTP/1.1
    (2)请求头
      1.Host:localhost
        作用：告诉服务器请求的是哪个主机
      2.connection:keep-alive
        作用：告诉服务器要进行持久连接
      3.User-Agent：
        作用：告诉服务器自己（浏览器）的类型
      4.Accept-Language:zh-cn
        作用：告诉服务器自己能接收的自然语言
      5.Accpet-Encoding:gzip
        作用：告诉服务器自己能接收的数据压缩类型是什么
      6.Referer: http://localhost/01.login.html
        作用：告诉服务器请求是来自哪个页面
    (3)请求主体
      如果是get方法无请求主体，如果是post方法即查看Form Data
  2.响应(Response)消息
    (1)响应起始行
        1.协议版本：HTTP/1.1
    2.响应状态码
      作用：告诉浏览器，服务器的响应状态是什么
      1xx:100-199 提示信息
      2xx：200:成功响应
      3xx：需要进行重定向
           301:永久重定向
           302:临时重定向
           304:Not Modified 请求未被修改，则缓存
      4xx：客户端请求错误
           404:Not Found 请求资源不存在(文件路径不对)
           403:Forbiden 权限不够
           405:Method Not Allowed 请求方法不被允许
      5xx：服务器运行错误
    3.原因短句 对状态码的解释说明
    (2)响应头
        1.Date:Thu, 30 Aug 2018 03:11:45 GMT(格林尼治时间)
    2.Connection:
      作用：告诉浏览器已经启动持久连接
    3.Content-type：
      作用：响应主体类型是什么，告诉浏览器该用什么方式解析响应主体
      text/html:响应回来的是html文本
      text/plain:响应回来的是普通文本
      text/css:响应回来的是css样式
      application/javascript:响应回来的是js脚本
      applocation/xml:响应回来的数据是xml格式的字符串
      application/json:响应回来的数据是json格式的字符串
    (3)响应主体
二、缓存
  1.什么是缓存
    客户端将服务器响应回来的数据进行自动保存，当再次访问时，直接使用保存的数据
  2.缓存的优点
    1)减少冗余数据的传递，节省客户端流量
    2)降低了对服务器资源的消耗和运行要求
    3)降低了由于远距离造成的延时加载
  3.与缓存相关的消息头
    1)Cache-Control消息头
    作用：从服务器将文档传到客户端之时起，此文档处于新鲜的秒数。
    语法：Cache-Control:max-age=处于新鲜的秒数
    ex:Cache-Control--->max-age=3600;
    2)Expires消息头
    作用：指定缓存过期的确切时间（格林尼治时间）
    语法：Expires---Thu,30 Aug 2018 03:08:30
  4.在网页中设置缓存消息头
    <meta http-equiv="消息头" content="值">
    ex:
    <meta http-equiv="Cache-Control" content="max-age=3600">
三、网站优化
  1.Cookie
    利用Cookie来辨认使用者，以方便响应当前使用者需要的内容

  2.HTTP优化
    1.HTTP性能优化
      发起请求-->建立连接-->处理请求-->构建响应-->发送响应-->记录日志
    2.HTTP连接性能优化
      ①减少连接创建次数---使用Keep-alive
      ②减少请求的次数---合理设置缓存
      ③提高服务器端运行速度
      ④尽量减少响应数据的长度---启用压缩
    3.安全HTTP协议
      HTTPS协议：安全版本的HTTP协议
      客户端发送请求消息，在SSL层加密，服务器接收到密文，
      在SSL层解密，得到请求明文，对请求进行处理
      （SSL:为数据通讯提供安全支出）

      服务器发送响应消息时，在SSL层加密，客户端接收到密文，
      在SSL进行解密，得到响应明文，解析响应内容。
四、DOM操作
  1.完整的js的组成
    1.js核心:ECMAScript
    2.DOM:Document Object Model
      文档对象模型：让js动态地操作页面的元素
    3.BOM:Browser Object Model
      浏览器对象模型：让js动态地操作浏览器
  2.使用js获取页面上的某个元素
    1.为元素增加id属性
      <div id="d1">文本内容</div>
    2.在js中，允许通过元素的id来获取元素
      document.getElementById("元素的id");
  3.获取/设置某元素中的内容
    DOM对象的一个属性：innerHTML
    表示的就是标签中的所有内容
    练习：
      ①在页面中添加一个div元素，内容随意
      ②在页面中添加一个按钮，点击时，获取div中的文本，并打印在控制台
      ③再添加一个按钮，点击时，将div中的文本内容更改为“这是我的第一个DOM练习”
  4.获取/设置表单控件的内容
    在DOM，表单控件们是通过DOM对象的value属性来获取/设置值的
    步骤：
    ①通过id获取表单控件元素
    ②通过DOM对象的value属性获取/设置值
    练习：
      ①页面中创建一个文本输入框
    (id="uname"),div(id="d1"),一个按钮
      ②单击按钮时，将文本输入框中的数据，显示在div中
  5.简化document.getElementById()
    根据指定的“id值”获取对应的“HTML元素”
    参数：要获取的元素的id
    返回值：获取的对应的HTML元素
    function $(id){
    return document.getElementById(id);
    }
  6.HTML元素的事件
    1.什么是事件
      允许通过用户的行为来激发的操作就是事件。
      常用事件：onclick 鼠标单击事件
    2.其他事件
      1.文本框/密码框获取焦点事件
      onfocus:获取焦点事件
      2.文本框/密码框失去焦点事件
      onblur:失去焦点事件