JQuery中的ajax和axios的使用及区别

1、jQuery介绍

jQuery是一个Javascript工具库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作。

jQuery和原生js的区别：

• 原生JS和jQuery入口函数的加载模式不同 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行 jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕

• 原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的

  jQuery如果编写了多个入口函数，后面的不会覆盖前面的

jQuery功能：

* 使用CSS选择器进行元素查询
* 事件机制
* Dom操作
* 属性操作
* 工具方法
* Ajax

2、jQuery中ajax的使用

ajax定义

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

jQuery为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。

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

1.底层接口--get无参
    $.ajax({
      url:'http://47.93.206.13:8002/index/findAllCategory',
      method:'GET',
      data:{},
      success:function(res){
        console.log(res)
      }
    })
2.快捷方式--get无参
     $.get('http://47.93.206.13:8002/index/findAllCategory',{},function(res){
       console.log(res);
     })

3.快捷方式-get有一个参数
	1）参数用拼接的方法传递
      var id = 2
      $.get('http://47.93.206.13:8002/index/readArticle?id='+id,function(res){
        console.log(res);
      })
	2）参数用对象的方式传递
      var id = 2
      $.get('http://47.93.206.13:8002/index/readArticle',{id:id},function(res){
        console.log(res);
      })

3、axios请求的使用

Axios 是一个基于 promise (Promise 是异步编程的一种解决方案)的 HTTP 库，可以用在浏览器和 node.js 中

axios与ajax的区别：

axios是通过promise实现对ajax技术的一种封装，就像JQuery实现ajax封装一样。简单来说就是：ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。也就是说，jQuery 将请求技术进行了封装 变成了 ajax , 而通过 promise 又把 ajax 进行封装就成了 axios。axios是ajax,ajax不止axios。

有了ajax,为什么还要使用axios？

　在现在的前端 mvvm 模式下 axios 更适合于数据请求。

它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止CSRF/XSRF

jQuery ajax：

• 本身是针对MVC的编程,不符合现在前端MVVM
• 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
• JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

---

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快捷方法：

/ 引入
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);
  })

//axios#get(url[, config])
axios.get('/index/article/pageQuery',{
    baseURL:'http://47.107.65.238:8888',
    params:{
      page:1,pageSize:10,
    }
  })
  .then(function (response) {
    console.log(response);
  })
  // axios.defaults.baseURL = 'http://47.107.65.238:8888';  baseURL也可以在外部默认全局定义

 使用注意点：axios 会自动将对象转换为json字符串，请求头默认格式为：contentType=“application/json”，而$.ajax()  会自动将对象转换为查询字符串,对jquery的ajax来说 请求头默认为 contentType='application/x-www-form-urlencoded' 。

axios与ajax代码区别及字符格式转化：

 // ajax与axios区别
  // ajax默认为查询字符串
  $.ajax({
     method: "get",
     url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
    data: {
        info: "广州天气"
     },
    // 如果为JSON格式要有以下操作
    // data: JSON.stringify({
    //         info: "广州天气"
    // }),
    // contentType='application/json'
    success:function(res){
          console.log(res)  //直接获取JSON里面data里面的数据（以查询字符串查到的）
    },
  });
// axios请求默认json格式字符串
  axios({
     method: "get",
     url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
    params: {
        info: "广州天气"
       },
     }).then((res)=>{
       console.log(res.data)//通过点data才与上面的ajax打印结果一样(以JSON查到的)
  });

  // post请求 如果要求是查询字符串形式
//   axios({
//      method: "post",
//      url: "",
//     obj={
//         info: "广州天气"
//      },
//       data:Qs.stringify(obj)//转换为查询字符串
//      }).then((res)=>{
//        console.log(res.data)
//   });

axios请求类型params和data的区别

params是添加到url的请求字符串中的，用于get请求。

data是添加到请求体（body）中的， 用于post请求。

 比如对于下面的get请求：

axios({

     method: "get",

     url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",

    params: {

        info: "广州天气"},

     }).then((res)=>{

       console.log(res.data)

  });

如果我们将params修改为data，显然是不能请求成功的，因为get请求中不存在data这个选项。

---

4、js中JSON与QS的异同点

qs是一个url参数转化（parse和stringify）的js库。

qs是node.js的一个模块(Qs使用需要导入)，JSON.stringify是js自带的方法，是将json对象转换为json字符串

JSON是js的一种数据格式而已；定义：{"键名1":"值1"，"键名2":"值2"}；

相同点
        二者可以进行序列化与反序列化；
        二者都有相同的方法：序列化：stringify() 反序列化：parse()
不同点
        JSON.stringify()方法是将对象转化为JSON格式
        qs.stringify()方法是将对象转化为url格式
        JSON.parse()方法是将JSON数据转化为对象
        qs.parse()方法是将字符串转化为对象

var a={"a1": "hello", "a2": "hi"}

qs.stringify(a); 

// 结果是：a1=hello&a2=hi