ajax+axios

ajax

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

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

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

二、ajax的原理是什么？

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

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

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

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

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

get、post

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

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

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

三、axios的常用方法

1. get请求：axios.get('/user',{params:{id:123}})

2. post请求：axios.post('/user',{name:'javan',age:18})

3. 向 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
}

从上面可以看出，XMLHttpRequest是一个api，它为客户端提供了客户端和服务器之间传输数据的功能

process对象是一个global全局变量，提供有关信息，控制当前node.js进程

通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境，从而在不同的环境中提供不同的http请求模块，实现客户端和服务端程序的兼容

五、axios相比原生ajax的优点

ajax相对缺点

1. ajax是针对MVC编程的，不符合现在前端的MVVM浪潮，但axios符合
2. 基于原生的xhr开发，xhr本身的架构不清晰
3. jQuery整个项目太大，单纯使用ajax却要引入整个jQuery非常不合理
4. 不符合关注分离原则
5. 配置和调用非常混乱，而且基于事件的异步模型不友好

Axios是什么？用在什么场景？如何使用？