前后端交互之XMLHttpRequst()、Jquery.ajax、axios

这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战

嗨，大家好，我是Starqin，今天我们来聊一聊前后端交互中的一些技术

XMLHttpRequst()对象

使用XMLHttpRequst()发送请求是最原生的js语法形式。其他的交互技术都是基于这个封装得来，所以我说他是前后端交互的老祖宗并不过分吧。

使用XMLHttpRequst()发送请求

第一步：实例化一个XMLHttpRequest()对象 const xhr = new XMLHttpRequest();

//第一步，实例化一个XMLHttpRequest()对象
const xhr =  new XMLHttpRequest();
复制代码

第二步：打开连接请求 xhr.open('type','url',true|false)

这里我们需要使用该实例对象上的open方法，该方法有三个参数，第一个参数代表请求 方式(请求方式最为常见的有post,get)，第二个参数表示请求的服务器地址+参数，第三个参数是可选的，当值为true时，表示异步操作，为false 时为同步操作，默认是true

//第一步，实例化一个XMLHttpRequest()对象
const xhr =  new XMLHttpRequest();
/*第二步，打开连接请求,*/
xhr.open('type','url',true|false)
复制代码

第三步：发送请求 xhr.send() xhr.onload = ()=> xhr.response

//第一步，实例化一个XMLHttpRequest()对象
const xhr =  new XMLHttpRequest();
/*第二步，打开连接请求,*/
xhr.open('type','url',true|false)
//第三步：发送请求
xhr.send()
复制代码

第四步，接收响应参数 xhr.onload = ()=> xhr.response

//第一步，实例化一个XMLHttpRequest()对象
const xhr =  new XMLHttpRequest();
/*第二步，打开连接请求,*/
xhr.open('type','url',true|false)
//第三步：发送请求
xhr.send()
//第四步，接收响应参数
xhr.onload = ()=> xhr.response
复制代码

注意这一步涉及到回调函数，所以这里是一个异步操作哦

ok 完成以上四步，我们可以发送一个简单的请求啦

注意事项：在发送post类型请求的时候，请求步骤会多出一步配置项， xhr.setRequestHeader("Content-Type","请求头格式")，当我们发送post请求还携带参数时，需要将参数整合成一个变量，然后放入xhr.send()中发送

Jquery.ajax

Jquery.ajax是对XMLHttpRequst()的封装，使用之前我们需要引入jquery。 使用方式：

$.ajax({
    type:"请求类型",
    url:"请求地址",
    data:"请求数据",
    success:(res)=>{ //请求成功回调函数
        //res是返回的数据
    }
})
复制代码

更多关于Jquery.ajax知识，您可以访问jquery官网查看API,不过，我们有了上面的那段代码，就可以应对很多请求了

axios

axios 同样也是对XMLHttpRequst()的封装，而且Axios 是一个基于 promise 的网络请求库
使用axios的第一步，就是将axios下载到项目

$ npm install axios
复制代码

接着就是发送get和post请求啦
发送get请求

//  用GET请求
axios({
  method: 'get',
  url: '请求地址/参数',
})
  .then(function (response) {
    成功回调函数
  });

复制代码

发送post请求

//  用POST请求
axios({
  method: 'post',
  url: '请求地址/参数',
})
  .then(function (response) {
    成功回调函数
  });

复制代码