站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

axios和ajax的区别是什么

时间:2021-12-19 [网络编程]作者:fabuyuan 浏览:8 次

axios和ajax的区别:1、axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装;2、ajax技术实现了局部数据的刷新,而axios实现了对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的区别是什么的详细内容,更多请关注站长家园其它相关文章!

本文标签:  axiosajax

转载请注明来源:axios和ajax的区别是什么

本文永久链接地址:https://www.adminjie.com/post/6658.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • centos7 终端中文乱码怎么办

      centos7 终端中文乱码怎么办

      centos7终端中文乱码的解决办法:1、查看服务器编码;2、查看终端xshell编码;3、设置“exportLANG="zh_CN.UTF-8"”;4、重启...

    • html5标签head和header有什么区别

      html5标签head和header有什么区别

      区别:1、head标签用于定义文档头部,它是所有头部元素的容器,而header标签用于定义文档的页眉(介绍信息);2、浏览器都支持head标签,而旧版本浏览器均...

    • docker可以装在虚拟机上吗

      docker可以装在虚拟机上吗

      docker可以装在虚拟机上;docker容器运行在虚拟机或者物理机上都可以,无论是虚拟机还是物理机,都是硬件和基础设施的一种交付方式,而docker容器主要就...

    • centos是linux系统吗

      centos是linux系统吗

      centos是linux操作系统的一个版本,centos主要分为两个版本:1、CentOSLinux版,该Linux版每两年发行一次;2、CentOSStr...

    • 搜索引擎对html5友好吗

      搜索引擎对html5友好吗

      搜索引擎对html5友好,搜索引擎蜘蛛能够更加轻易的抓取和索引使用Html5标准网站的内容。html5有利于搜索引擎抓取和收录网站更多的内容,对SEO很友好,可...

  • 买服务器送会员
  • 热门文章
  • 买服务器送会员