原生js实现ajax

• jquery和axios用多了有点忘了原生了，最近实习面试…怕被考到，提前理一波

JavaScript

1. AJAX

• 基于 HTTP 请求和 JS 语法的异步刷新技术

原理

• 通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。
• Ajax 的工作原理相当于在用户和服务器之间加了—个中间层(AJAX 引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给 Ajax 引擎自己来做, 只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。
• Ajax 其核心有 JavaScript、XMLHTTPRequest、DOM 对象组成，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 JavaScript 来操作 DOM 而更新页面。

原生实现

• 实现思路

1. 获得 XMLHttpRequest 对象;
2. 注册回调函数 xhr.onreadystatechange=callback;
3. 设置和服务器端的链接信息 xhr.open(请求方式 get/post,url,设置异步或同步方式交互 true/false);
4. 发送数据开始交互。xhr.send(null);
5. 接受服务器端传回来的响应数据

• 实现代码

  var httpRequest; //请求对象
  // 1.创建XMLHttpRequest对象
  function getXMLHttpRequest() {
    if (window.XMLHttpRequest) {
      httpRequest = new XMLHttpRequest();
    } else {
      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      //兼容IE低版本
    }
  }
  function test() {
    getXMLHttpRequest();
    // 2.指定获取数据的方式(常用POST和GET)和路径  true异步 false同步
    httpRequest.open("GET", "data.txt", false);
    // 3.接受服务器端传回来的数据
    httpRequest.onreadystatechange = function() {
      /* 
      XMLHttpRequest的 readyState对象状态值，从0到4发生变化 ： 
      0 = （未初始化）请求未初始化（还没有调用open()方法） 
      1 = （加载）服务器连接已建立，正在加载（已调用send()方法，正在改善请求） 
      2 = （加载完成）请求已接收（send()方法完成，已全部响应内容） 
      3 = （交互）请求处理中（正在解析响应内容） 
      4 = （完成）请求已完成，且响应已就绪（响应内容解析完成） 
      */
      /* status是请求后的状态码 */
      if (httpRequest.readyState == 4 && httpRequest.status == 200) {
        let m = httpRequest.responseText; //获得响应的文本型数据
        console.log(m);
      }
    };
    //4.发送请求
    httpRequest.send();
  }
  

优缺点

• 优点
  1. 无刷新更新数据
     • 不刷新页面与服务器通信维护数据,Web 应用更迅捷响应用户交互
  2. 异步与服务器通信
     • 不需要打断用户的操作，优化了 Browser 和 Server 之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
  3. 前端和后端负载平衡
     • AJAX 把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置能力减轻服务器和带宽的负担,减轻服务器的负担，AJAX 的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
  4. 基于标准被广泛支持
     • 基于标准化的并被广泛支持的技术,不需要下载插件。
  5. 界面与应用分离
     • Ajax 使 WEB 中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的 WEB 应用程序错误,提高效率。
• 缺点
  1. AJAX 的安全问题
     • ajax 技术就如同对数据建立了一个直接通道,使开发者不经意间暴露比以前更多的数据和服务器逻辑。ajax 的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。
  2. 对搜索引擎支持较弱
     • 如果使用不当，AJAX 会增大网络数据的流量，从而降低整个系统的性能。
  3. 因为网络延迟需要给用户提供必要提示
     • Ajax 开发时网络延迟需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHttpRequest 的不恰当处理，都会使用户感到延迟，用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
  4. AJAX 干掉了 Back 和 History 功能，即对浏览器机制的破坏。
     • 在动态更新页面的情况下，用户无法回到前一个页面状态

AJAX 使用场景

- <1>.表单驱动的交互
- <2>.深层次的树的导航
- <3>.快速的用户与用户间的交流响应
- <4>.对数据进行过滤和操纵相关数据的场景