XHR

XHR英文全名XmlHttpRequest，中文可以解释为可扩展超文本传输请求。
Xml可扩展标记语言，Http超文本传输协议，Request请求。
XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。
尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。
XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能，XMLHttpRequest 对象用于在后台与服务器交换数据，所有现代的浏览器都支持 XMLHttpRequest 对象。

功能

1、在不重新加载页面的情况下更新网页
2、在页面已加载后从服务器请求数据
3、在页面已加载后从服务器接收数据
4、在后台向服务器发送数据

  1. <script>
  2.         //创建XMLHttpRequest对象
  3.         var xhr;
  4.         if(window.XMLHttpRequest){
  5.             //IE7+,Firefox，Chrome，Opera,Safari 执行
  6.             xhr = new XMLHttpRequest();
  7.         }else{
  8.             // IE6,IE5 执行
  9.             xhr = new ActiveXObject("Microsoft.XMLHTTP");
  10.         }
  12.         // GET 请求
  13.         xhr.open("GET","url",true);
  14.         xhr.send();
  16.         // POST 请求
  17.         xhr.open("POST","url",true);
  18.         xhr.send();
  20.         //如果需要传参，则需要使用setRequestHeader() 来添加HTTP 头部
  21.         xhr.open("POST","url",true);
  22.         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  23.         xhr.send("name=tome&age=24");
  25.         // 通过 onreadystatechange  事件来监听状态变化，并获取服务器响应
  26.         xhr.onreadystatechange = function(){
  27.             //请求成功时
  28.             if(xhr.readyState == 4 && xhr.status == 200){
  29.                 alert(xhr.responseText);
  30.             }
  31.         }
  34.     </script>

ajax

Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。　异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。

原理

由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

核心对象

XMLHttpRequest

优缺点

优点
1、无刷新更新数据
2、异步与服务器通信
3、前端和后端负载平衡
4、基于标准被广泛支持
5、界面与应用分离
缺点：
1、ajax不能使用Back和history功能，即对浏览器机制的破坏。
2、安全问题 ajax暴露了与服务器交互的细节
3、对收索引擎的支持比较弱
4、破坏程序的异常处理机制
5、违背URL和资源定位的初衷
6、ajax不能很好的支持移动设备
7、太多客户端代码造成开发上的成本

使用场景

适用

<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景

不适用

<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵

  1. $.ajax({
  2.   type: 'POST',
  3.   url: url,
  4.   data: data,
  5.   dataType: dataType,
  6.   success: function () {},
  7.   error: function () {}
  8. });

请求步骤

  1. 创建XMLHttpRequest异步对象
  2. 设置回调函数
  3. 使用open方法与服务器建立连接
  4. 向服务器发送数据
  5. 在回调函数中针对不同的响应状态进行处理

    axios

    Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

    特性

    1、在浏览器中创建 XMLHttpRequests
    2、在node.js则创建http请求
    3、支持Promise API
    4、支持拦截请求和响应
    5、转换请求和响应数据
    6、取消请求
    7、自动转换成JSON数据格式
    8、客户端支持防御XSRF
    1. // 第一种方式  将参数直接写在url中
    2. axios.get('/getMainInfo?id=123').then((res) => {
    3. console.log(res)
    4. }).catch((err) => {
    5. console.log(err)
    6. })
    7. // 第二种方式  将参数直接写在params中
    8. axios.get('/getMainInfo', {
    9. params: {
    10.  id: 123
    11. }
    12. }).then((res) => {
    13. console.log(res)
    14. }).catch((err) => {
    15. console.log(err)
    16. })
    :::info axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结─句话就是axios是ajax,ajax不止axios。

注:传统Ajax指的是XMLHttpRequest (XHR)，axios和jQuer ajax都是对Ajax的封装 :::