likes
comments
collection

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

作者站长头像
站长
· 阅读数 9

「这是我参与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) {
    成功回调函数
  });