1. 原生ajax
1.1 ajax是什么?
Ajax的核心是JavaScript对象XmlHttpRequest,XmlHttpRequest使您可以使用
JavaScript向服务器提出请求并处理响应,而不阻塞用户。
通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新
1.2 ajax作用是什么?
(1)通过异步模式,提升了用户体验
(2)Ajax可以实现动态不刷新(局部刷新)就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息
1.3 ajax创建请求步骤
get请求
1. 创建一个对象
2. 设置请求参数
3. 发送请求
4. 监听请求成功后的状态变化
post请求
1. 创建一个对象
2. 设置请求参数
3. 设置请求头
4. 发送请求
5. 监听请求成功后的状态变化
1.4 ajax get和post请求的区别
使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
get请求
post请求
使用Get请求发送数据量小,Post请求发送数据量大
GET请求能够被cache,POST不进行缓存。GET请求能够被保存在浏览器的浏览历史里面(密码等重要数据GET提交,别人查看历史记录,就可以直接看到这些私密数据)
GET产生一个TCP数据包;POST产生两个TCP数据包。
对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);
而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。
2. axios 请求
2.1 axios 是什么?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。前端最流行的 ajax 请求库,
react/vue 官方都推荐使用 axios 发 ajax 请求
在浏览器中利用的是XMLHttpRequest对象发送请求
在nodejs中用的是http对象
2.2 axios 特点
1. 基于 promise 的异步 ajax 请求库,支持promise所有的API
2. 浏览器端/node 端都可以使用,浏览器中创建XMLHttpRequests
3. 可以转换请求数据和响应数据,并对响应回来的内容自动转换成 JSON类型的数据
4. 批量发送多个请求