ajax
ajax
  1.前后端交互流程
    1.了解服务器 : 提供某种服务器的机器(计算机)
      qq音乐
        音频服务器
      迅雷
        文件服务器
      qq邮箱
        邮件服务器
      爱奇艺
        视频服务器
      谷歌
        web服务器
    2. 了解前端 访问 服务器的几种方式
      1. 直接在地址栏输入网址
      2. a标签的href属性
      3. location.href = 'url'
      4. AJAX
        网页不会跳转
      网页会跳转( 全局刷新 )
    3. 了解什么是ajax
      (1) ajax技术 : 在网页不跳转的情况下 向服务器请求数据
      （2）ajax应用场景： 局部刷新
    4. 前后端交互三个流程
      1. 请求 (前端)
      2.处理 (后端)
      3.响应(后端)
  2.ajax工作原理
    1.ajax工作流程
      (1)创建xhr对象
        let xhr = new XMLHttpRequest()
      (2)设置请求方法和地址
        xhr.open('请求方法','请求地址')
      (3)发送请求
        xhr.send()
      (4)注册响应事件
        xhr.onload = function(){}
    2. xhr对象的请求状态码
      0: 请求未初始化 (open之前)
      1: 服务器连接已建立 (open之后)
      2: 请求已接收 ( 服务器已经收到你的请求 )
      3: 请求处理中 ( 服务器正在处理你的请求 )
      4: 请求已完成，且响应已就绪 ( 服务器完成响应, onload事件就是在这里执行 )
    3.ajax组成部分
      Ajax(阿贾克斯)：全称 Asynchronous Javascript And XML(异步的js与xml)
        说人话： 用js发送异步的网络请求
      A : Asynchronous 异步
        同步 ： 指的是代码按照从上往下顺序执行
        异步 ： 代码不会立即执行,而是要等一会儿执行
          目前我们学过的ECMAScript只有两个语法是异步的： 定时器 与 ajax
          DOM事件也是属于异步的，但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的时候，主要以js为主，DOM一般不讨论。
      J：Javascript
      A ：And
      X : XML 与 XMLHttpRequest
        XML ： 解决跨平台数据传输。
        在JSON没有出来以前, 网络传输主要以XML格式数据为主。 后来JSON问世，逐渐取代XML。
  3.HTTP工作原理(本阶段常见面试点)
    1. get与post区别
      a.传参方式不同
        get请求直接在url传参
          'url?key=value'
        post在请求体传参
          xhr.send('key=value')
          xhr.setReauestHeader('Content-type','application/x-www-form-urlencoded')
      2. 数据大小不同
        * get有大小限制, 一般 2-5 MB
        * post没有大小限制 (文件上传)
      3. 传输速度不同
        * get传输速度快
        * post传输速度慢
      4. 安全性不同
        * get安全性低
        * post安全性高 (登录、注册必须是post请求)
    2. put与patch区别
      全局更新： put
      局部更新： patch
    3.HTTP原理 : 网络传输协议
      发送请求 ： 请求报文
        请求行
          请求地址 + 请求方法
        请求头
          浏览器告诉服务器，发给你的数据是什么格式
          Content-type: application/x-www-form-urlencoded
        请求体
          请求参数
      响应请求： 响应报文
        响应行
          响应状态码
            2xx : 成功
              200成功
            3xx : 重定向
              302 重定向
            4xx : 前端问题
              400参数错误 403没有权限 404 路径错误 413文件超过最大限制
            5xx : 服务器问题
              500服务器内部错误
          服务器ip地址
        响应头
          服务器告诉浏览器，发给你的数据是什么格式
          Content-Type: application/json; charset=utf-8
        响应体
          响应数据
    4. 发送ajax原理：： 发送请求报文
    5. 网页从输入url到渲染的流程
      1. DNS解析
        域名解析成ip
      2. TCP三次握手
        保证数据传输的 安全 + 可靠
      3.HTTP连接
        请求
        处理
        响应
      4.渲染引擎渲染返回的HTML文件
    6.函数防抖和节流
      防抖
        单位时间内，频繁触发事件。 以最后一次为准
        应用： 输入框输入事件
        流程 ：
      节流
        单位时间内，频繁触发事件。只触发一次
        应用：解决高频事件（ 滚动条事件 ）
        流程 ：
  4.实战案例
    1. 新闻列表
      后台给的img网址有可能会省略前面的域名， 需要自己加上
    2.水果详情 ： url跳转传参
      原理： 一个完整的url跳转由路径决定，参数不影响跳转
        http://域名/detail.html? id = 1
        http://域名/detail.html? id = 2
        这两个url虽然不一样，但是路径是一致的，只是参数不同。所以还是跳转同一个页面
    3.网络请求loading实现思路
    4.文件上传
      （1）创建FormData对象，将文件添加到FormData对象
        let fd = new FormData()
        fd.append('参数名', 文件 )
      （2）ajax发送请求
        请求体就是 fd
          (1)自动设置请求头 为 文件请求头
          （2）自动将文件转为二进制
    5.文件预览