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

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);
})