• 技术文章 >web前端 >前端问答

    axios和ajax的区别是什么

    藏色散人藏色散人2021-12-17 15:38:00原创16478

    axios和ajax的区别:1、axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装;2、ajax技术实现了局部数据的刷新,而axios实现了对ajax的封装。

    本文操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    axios和ajax的区别是什么?

    axios和ajax的区别及优缺点:

    ajax:

    1、什么是ajax

      Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JSONP的支持。

      异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。

    2、ajax的原理?

      由客户端请求ajax引擎,再由ajax引擎请求服务器,服务器作出一系列响应之后返回给ajax引擎,由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

    3、核心对象?

      XMLHttpReques

    4、ajax优缺点?

      优点 

        1、 无刷新更新数据

        2、异步与服务器通信

        3、前端和后端负载平衡

        4、基于标准被广泛支持

        5、界面与应用分离

      缺点:

        1、ajax不能使用Back和history功能,即对浏览器机制的破坏。

        2、安全问题 ajax暴露了与服务器交互的细节

        3、对收索引擎的支持比较弱

        4、破坏程序的异常处理机制

        5、违背URL和资源定位的初衷

        6、ajax不能很好的支持移动设备

        7、太多客户端代码造成开发上的成本

    5、Ajax适用场景
      <1>.表单驱动的交互
      <2>.深层次的树的导航
      <3>.快速的用户与用户间的交流响应
      <4>.类似投票、yes/no等无关痛痒的场景
      <5>.对数据进行过滤和操纵相关数据的场景
      <6>.普通的文本输入提示和自动完成的场景
    6、Ajax不适用场景
      <1>.部分简单的表单
      <2>.搜索
      <3>.基本的导航
      <4>.替换大量的文本
      <5>.对呈现的操纵

    7、代码

    $.ajax({
      type: 'POST',
      url: url,
      data: data,
      dataType: dataType,
      success: function () {},
      error: function () {}
    });

    8、ajax请求的五个步骤

      1. 创建XMLHttpRequest异步对象

      2. 设置回调函数

      3. 使用open方法与服务器建立连接

      4. 向服务器发送数据

      5. 在回调函数中针对不同的响应状态进行处理

    axios:

    1、axios是什么

    Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。

    2、axios有那些特性?

      1、在浏览器中创建 XMLHttpRequests

      2、在node.js则创建http请求

      3、支持Promise API

      4、支持拦截请求和响应

      5、转换请求和响应数据

      6、取消请求

      7、自动转换成JSON数据格式

      8、客户端支持防御XSRF

    3、执行get请求,有两种方式

    // 第一种方式  将参数直接写在url中axios.get('/getMainInfo?id=123')
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })// 第二种方式  将参数直接写在params中axios.get('/getMainInfo', {  params: {
        id: 123
      }
    })
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })

    4、执行post请求,注意执行post请求的入参,不需要写在params字段中,这个地方要注意与get请求的第二种方式进行区别。

    axios.post('/getMainInfo', {
      id: 123})
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })

    axios和ajax的区别:

    axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios。

    注: 传统Ajax 指的是 XMLHttpRequest(XHR),
      axios和jQuer ajax都是对Ajax的封装

    推荐学习:《ajax视频教程

    以上就是axios和ajax的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:axios ajax
    上一篇:html5用什么标记播放音乐 下一篇:ajax有什么用
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• axios实现跨域分别是哪三种方法• vue+axios+php如何实现上传文件功能?• uniapp使用axios无法请求怎么办• 详解uniapp项目中如何引入axios
    1/1

    PHP中文网