jQuery中的ajax模板，axios和ajax的区别

原创已于 2022-10-09 11:37:07 修改 · 566 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

于 2019-08-19 20:08:58 首次发布

Ajax类专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了Ajax的工作原理，包括其优缺点及适用场景，并对比了Axios这一基于Promise的HTTP库，阐述了两者之间的区别与联系，以及Axios的特性和使用方法。

jQuery中的ajax模板

$.ajax({
    url: 请求的地址,
    data: 传递给后台的数据,
    method: 请求方法(get,post),
    async: 是否异步(同步:必须等待后台返回数据后程序才会继续往下走，异步:发送后不管是否成功都可以继续往下走),
    beforeSend: 发送到后台前执行的函数，可以用作校验或给按钮添加样式，如果用作校验return false;则可以取消本次请求,
    contentType: 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型,
    dataType:"json"(指定服务器返回的数据类型),
    success: function(data) {
        请求成功的函数，data是后台返回的数据，在这里对数据进行操作
    },
    error: function(err) {
        请求失败，err是失败的内容
    },
    complete: function(e) {
        不管成功还是失败都会调用这个函数
    }
})

axios和ajax的区别：

① axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装。

② ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。

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

1、什么是ajax

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

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

2、ajax的原理

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

3、核心对象

核心对象是XMLHttpReques。

4、ajax优缺点

优点：

① 无刷新更新数据。

② 异步与服务器通信。

③ 前端和后端负载平衡。

④ 基于标准被广泛支持。

⑤ 界面与应用分离。

缺点：

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

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

③ 对收索引擎的支持比较弱。

④ 破坏程序的异常处理机制。

⑤ 违背URL和资源定位的初衷。

⑥ ajax不能很好的支持移动设备。

⑦ 太多客户端代码造成开发上的成本。

5、Ajax适用场景

① 表单驱动的交互。

② 深层次的树的导航。

③ 快速的用户与用户间的交流响应。

④ 类似投票、yes/no等无关痛痒的场景。

⑤ 对数据进行过滤和操纵相关数据的场景。

⑥ 普通的文本输入提示和自动完成的场景。

6、Ajax不适用场景

① 部分简单的表单。

② 搜索。

③ 基本的导航。

④ 替换大量的文本。

⑤ 对呈现的操纵。

7、ajax请求的五个步骤

① 创建XMLHttpRequest异步对象。

② 设置回调函数。

③ 使用open方法与服务器建立连接。

④ 向服务器发送数据。

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

1、axios是什么

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

2、axios有那些特性

① 在浏览器中创建 XMLHttpRequests。

② 在node.js则创建http请求。

③ 支持Promise API。

④ 支持拦截请求和响应。

⑤ 转换请求和响应数据。

⑥ 取消请求。

⑦ 自动转换成JSON数据格式。

⑧ 客户端支持防御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);
})