原生Ajax、JQuery的Ajax以及Axios的区别

原生Ajax、JQuery的Ajax以及Axios的区别
一、原生Ajax
下面展示一些 内联代码片。

 //创建请求对象
 var httpRequest = new XMLHttpRequest();
 //指定请求方式和请求地址
 httpRequest.open('get', 'url');
 //发送请求  send()可以传递参数
 httpRequest.send();
  //在请求头部设置数据格式
  // httpRequest.setRequestHeader("Content-Type", "application/json");
 // httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 //接受响应
 httpRequest.onreadystatechange = function () {
 //http请求完成
 if (httpRequest.readyState === 4 && httpRequest.status === 200) {
 //获取响应数据
  console.log(httpRequest.responseText);
 //console.log(httpRequest.responseXML);
  }
  if (httpRequest.readyState === 4 && httpRequest.status === 500) {
 console.log('错误' + httpRequest.responseText);
          }
     }

区别： 1、发get方式请求，头部不用设置，参数转为查询字符串拼接到url上；
2、发post方式请求，参数在send（）里；
3、发表单格式 ，设置头部为表单格式，数据也是要表单格式；
4、发json 格式，设置头部为json 格式 数据也要是json 格式数据。
二、JQuery的Ajax

下面展示一些 内联代码片。

$.ajax({
   	 url:'',
   	 method:'',
  	 data:{},
     headers:{},
  	 success: function (res) {
          console.log(res);
      },
     error: function (err) {
          console.log(err);
          },
  	})

区别：默认发表单格式，表单数据；
1、发get方式请求，头部不设置，参数对象放到data上 jQuery帮转为查询字符串拼到URL后；
2、发post方式请求，发表单格式，头部不设置，参数对象放到data上，jQuery帮转为表单格式数据放到请求体里；
3、发json格式，头部设置为json， 参数对象转为json字符串放到data上 ， jQuery帮放到请求体里。
三：Axios

下面展示一些 内联代码片。

axios({
      //配置对象
      url: 'url',
      method: '',
      data:'',
      header: { }
        })

区别：默认发json格式
1、发get方式请求，参数带在params:{}；
2、发post方式请求， 参数带在data:{}；
3、发表单格式，发表单格式数据 ，qs转数据；
4、发json 格式，发js对象不用转换 ，axios帮忙转换。