ajax+axios

最新推荐文章于 2024-08-14 22:54:36 发布

我小哥在学习

最新推荐文章于 2024-08-14 22:54:36 发布

阅读量360

点赞数 1

分类专栏：笔记文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_42060560/article/details/114550339

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax的概念、作用、工作原理以及原生JavaScript实现Ajax的步骤，同时对比了GET和POST请求的区别。此外，文章还探讨了Axios这一流行的HTTP库，阐述了其特性、使用方法以及与原生Ajax相比的优势，展示了Axios在浏览器和服务器环境中的适用性。

摘要由CSDN通过智能技术生成

`ajax`

一、什么是`ajax`？`ajax`作用是什么？

ajax全称是Asynchronous javascript and xml(异步javascript和XML)，是一种异步请求数据的web开发技术；对于改善用户的体验和页面性能很有帮助

特点是在不需要重新刷新页面的情况下，ajax通过异步请求加载后台数据，并在网上呈现出来；目的是提高用户体验，减少网络数据的传输量，由于ajax请求的是数据而不是html文档，节省了网络带宽，让用户浏览体验更顺畅

二、`ajax`的原理是什么？

ajax相当于在用户和服务器之间加了一个中间层，使用户和服务器响应异步化

原理是通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获取数据，然后通过javascript来操作DOM来更新页面

三、原生`javascript` `ajax`请求步骤有几个？

创建异步XmlHttpRequest对象
设置请求参数，包括url和方法等
发送请求(send方法)
注册事件(onreadystatechange)事件，事件状态变更会及时响应监听
在监听里面获取并处理返回数据

四、`ajax`有几种请求方式？优缺点？

get、post

五、`get`和`post`请求数据的区别？

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行 url 编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

GET和POST使用场景： 若符合下列任一情况，则推荐用POST方法：

请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
若使用GET方法，则表单上收集的数据可能让URL过长。
要传送的数据不是采用7位的ASCII编码。

若符合下列任一情况，则推荐用GET方法：

请求是为了查找资源，HTML表单数据仅用来帮助搜索。
请求结果无持续性的副作用。
收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符

AJAX原理（含常见面试题）

`axios`

一、`axios`是什么

axios是一个基于promise的http库，支持promise的所有api，可以用在浏览器和node.js中。前端最流行的ajax请求库，react/vue官方都推荐使用axios发ajax请求

二、`axios`的特点

基于promise的异步ajax请求库，支持promise的所有api
浏览器端/node端都可以使用，浏览器中创建XMLHttpRequest
支持请求、响应拦截器
支持请求取消
可以转换请求数据和响应数据，并对想赢回来的内容自动转换成JSON类型的数据
可以批量发送多个请求
安全性更高，客户端支持防御XSRF，就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中的key的

三、`axios`的常用方法

get请求：axios.get('/user',{params:{id:123}})
post请求：axios.post('/user',{name:'javan',age:18})
向 axios传递相关配置来创建请求：axios(url[,config])
```
axios({
	method:'post',
    url:'/user',
    data:{
        firstName:'long',
        lastName:'ting'
    }
})
```
config配置
- url：请求服务器的url
- method：请求方法，默认是get
- baseURL：自动加在url前面，除非url是一个绝对路径
- data：作为请求主体被发送的数据，只适用于put、post、patch
- timeout：指定请求超时的毫秒数
- headers：被发送的自定义请求头
- withCredentials：表示跨域请求时是否需要使用凭证，默认为false
- responseType：表示服务器响应的数据类型，默认是json，可以是arraybuffer、blob、document、text、stream
- proxy：定义代理服务器的主机名称和端口
```
proxy:{
	host:'127.0.0.1',
	post:9000,
	auth:{
		username:'kaka',
		password:'123'
	}
}
```
请求拦截器：axios.interceptors.request.use(function(config){})

响应拦截器：axios.interceptors.response.use(function(response){})

四、`axios`为什么既能在浏览器环境运行又能在服务器(node)环境运行

axios在浏览器使用XMLHttpRequest对象发送ajax请求，在node环境使用http对象发送ajax请求

var defaults.adapter = getDefaultAdapter()
function getDefaultAdapter(){
    var adapter;
    if(typeof XMLHttpRequest !== 'undefined'){
        adapter = require('./adapter/xhr');
    }else if(typeof process !== 'undefined'){
        adapter = require('./adapter/http')
    }
    retrun adapter
}