What is the difference between axios and ajax in jquery

The difference between axios and ajax in jquery: 1. axios is an encapsulation of ajax technology through promise, while jquery encapsulates the request technology into ajax; 2. axios is a Promise-based HTTP library, and ajax is an encapsulation of native XHR.

The operating environment of this tutorial: windows10 system, jquery3.6.0 version, Dell G3 computer.

What is the difference between axios and ajax in jquery?

The difference between axios and ajax:

axios is a Promise-based HTTP library, while ajax is Encapsulation of native XHR;

ajax technology realizes the refresh of local data, and axios realizes the encapsulation of ajax.

axios is an encapsulation of ajax technology through promise, just like JQuery implements ajax encapsulation.

To put it simply: ajax technology realizes partial data refresh of web pages, and axios realizes the encapsulation of ajax. In other words, jQuery encapsulates the request technology into ajax, and through promise, ajax is encapsulated into axios. Axios is ajax, and ajax is more than just axios.

With ajax, why should we use axios?

In the current front-end mvvm mode, axios is more suitable for data requests.

Extended knowledge:

ajax definition

In short, AJAX does not reload the entire web page Load data through the background and display it on the web page

jQuery encapsulates native ajax for us. Now we only need a simple line of code to implement the AJAX function.

1. Underlying interface

    $.ajax({
      url:'',    //请求地址
      method:'',  //请求方式
      data:{},     //传参  无参可不写
      success:function(res){
        //请求成功的回调函数
      },
      error:function(err){
        //请求失败的回调函数
      }，
    })

2. Shortcut

    $.get(url,data,function(res){})
    $.post(url,data,function(res){})

Usage of axios request

Axios is a promise-based ( Promise is a solution for asynchronous programming) HTTP library, which can be used in browsers and node.js

jQuery ajax:

itself is for MVC programming and does not conform to the current front-end MVVM

is developed based on native XHR. The architecture of XHR itself is not clear. There is already an alternative to fetch

The whole JQuery project is too big. It is very awkward to introduce the entire JQuery just using ajax. Reasonable (adopting a personalized packaging solution and not being able to enjoy CDN services)

Native use of axios:

axios({
      url:'http://47.93.206.13:8002/user/login',
      // baseURL:'http://47.93.206.13:8002',
      method:'post',
      // params:    用于get请求
      data:{    //用于post请求
        username:'admin1',
        password:'123321'   
      }
    }).then((res) => {
      console.log(res);
    })

axios shortcut method:

/ 引入
let axios=require('axios')//到当前node_modules找，找不到再往上找
// 封装写法
axios.get('http://47.107.65.238:8888/index/article/pageQuery?page=1&pageSize=10')
  .then(function (response) {
    console.log(response);
  })

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of What is the difference between axios and ajax in jquery. For more information, please follow other related articles on the PHP Chinese website!