ajax和axios的区别及使用场景

363 阅读3分钟

1.XML

可扩展标记语言 用来标记数据、定义数据类型、允许用户对自己标记语言进行定义; XML提供统一的方法描述和交换独立于应用程序或供应商的结构化数据。

2.XHR

即:XMLHttpRequest,是一个XML DOM的对象用于与服务器交互数据,是ajax功能实现所依赖的对象,jquery中ajax就是对xhr的封装; 提供了对HTTP协议的完全访问,包括做出post和head请求,以及get请求能力,可以同步或异步地返回web服务器的响应,能够以文本或一个DOM文档的形式返回内容。

3.什么是ajax

ajax是对原生XHR的封装,为了达到跨域目的,增添了对jsonp的支持。 ajax是多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。

4.ajax的原理

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

5.核心对象

XMLHttpRequest

6.ajax优缺点

  • 优点:
  1. 无刷新更新数据
  2. 异步与服务器通信
  3. 前后端负载平衡
  4. 基于标准被广泛支持
  5. 界面与应用分离
  • 缺点:
  1. ajax不能使用back和history功能
  2. 安全问题ajax暴露了与服务器的交互细节
  3. 对搜索引擎支持比较弱
  4. 破坏了程序的异常处理机制
  5. 违背了URL和资源定位的初衷
  6. ajax对移动设备不友好
  7. 太多的客户端代码会造成开发上的成本

7.Ajax适用场景

  1. 表单驱动交互
  2. 深层次dom树的导航
  3. 用户间交流响应
  4. 对数据进行过滤与操纵相关数据
  5. 普通文本输入提示和自动完成
$.ajax({
type:'POST',
url:url,
data:data,
dataType:dataType,
success:function(){},
error:function(){}
});

8.ajax请求的五个步骤

  1. 创建XMLHttpRequest异步对象
  2. 设置回调函数
  3. 使用open方法与服务器建立连接
  4. 向服务器发送数据
  5. 在回调函数中针对不同的响应状态进行处理

9.axios是什么

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

10.axios的特性

  1. 在浏览器中创建XMLHttpRequest
  2. 在node.js中,则创建http请求
  3. 支持Promise API
  4. 支持拦截请求和响应
  5. 转换请求和相应数据
  6. 取消请求
  7. 自动转换为JSON数据格式
  8. 客户端支持防御XSRF

11.执行get请求有两种方式

  1. 将参数直接写在url中
  2. 将参数直接写在params中

12.执行post请求

参数不需要写在params字段中

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

13.axios和ajax的区别

axios通过Promise实现对ajax技术的封装,像jquery对ajax的封装一样;即:ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,axios有的ajax不一定有。

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