Axios和AJAX学习概要_axios和ajax的区别,axios为什么服务端和客户端都能用

一、axios和ajax的区别：

 1. axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装；
 
 2. ajax技术实现了局部数据的刷新，而axios实现对ajax的封装；

axios和ajax的区别及优缺点：

二、关于ajax:

 1.什么是ajax

    ajax是对原生XHR的封装，为了达到我们跨域的目的，增添对JSONP的支持。

    ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高
    用户体验。

 2.ajax的原理？

     由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器做出一系列响应后返回给ajax引擎，
     由ajax引擎决定将这个结果写入客户端的什么位置，实现页面无刷新更新数据。
 
 3.核心对象？
     XMLHttpRequest
     
 4.ajax优缺点？
 
     优点：
    1.无刷新更新数据
    2.异步与服务器通信
    3.前端和后端负载平衡
    4.基于标准被广泛支持
    5.页面与应用分离
    
     缺点：
    1.ajax不能使用Back和history功能，即时对浏览器机制的破坏。
    2.安全问题ajax暴露了与服务器交互的细节
    3.对搜索引擎的支持比较弱
    4.破坏程序的异常处理机制
    5.违背URL和资源定位的初衷
    6.ajax不能很好的支持移动设备
    7.太多客户端代码造成开发商的成本
    
    ajax不适用场景
    1.部分简单的表单
    2.搜索
    3.基本的导航
    4.替换大量文本
    5.对呈现的操作
    
    ajax请求的五个步骤
    1.创建XMLHttpRequest异步对象
    2.设置回调函数
    3.使用open方法与服务器建立连接
    4.向服务器发送数据
    5.在回调函数中针对不同的响应状态进行处理

三、关于axios

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

axios有哪些特性?

1.在浏览器中创建XMLHttpRequests

2.在nodejs则创建http请求

3.支持Promise API

4.支持拦截请求和响应

5.转换请求和响应数据

6.取消请求

7.自动转成JSON数据格式

8.客户端支持防御XSRF

四、AJAX和axios的区别：

axios是通过Promise实现对ajax技术的一种封装，就像querty对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axio不一定有，总结一句话是axios是ajax，aions不值axios。

总结：ajax是web数据交互的一种技术，浏览器提供了XMLHttpRequest构造函数来实现ajax请求，简称xhr,也叫原生ajax,用起来不太方便，而axios是封装了ajax，也是用来发ajax请求的，他提供更方便使用的api和其他功能，比如拦截器。

五、实例对比（代码）

// get请求
    // 1 创建AJAX对象
     let xhr=new XMLHttpRequest();
    // 2 配置（创建--借助koa框架和打开服务器）
     xhr.open('GET','/ajax?username=lll&&age=18')
    // 3 发送请求
    xhr.send()
    // 4 接收请求的结果（服务器回应）
     xhr.onload= function(){
         console.log(xhr.responseText);
     }
// post请求：
     // 1 创建AJAX对象
     let xhr1=new XMLHttpRequest();
    // 2 配置（创建--借助koa框架和打开服务器）
     xhr1.open('POST','/ajax01')
    //  修改content-type
    // xhr1.setRequestHeader('Content-type','12465454');
    // 3 发送请求
    xhr1.send('username=kkk&&age=20');
    // 4 接收请求的结果（服务器回应）
     xhr1.onload= function(){
         console.log(xhr1.responseText);
     }
 

//首先安装axios包
//Using npm:
$ npm install axios
 
//Using bower:
$ bower install axios
 
//Using yarn:
$ yarn add axios
 
//Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
//Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
// 页面中代码如下
const axios = require('axios');
 
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
 
// Performing a POST request
 
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) { 
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });