一、简述
1、vue.js默认没有ajax功能。
2、取而代之的即axios来实现与后端服务器的数据交互。
3、axios本质上就是ajax，所以会被同源策略所限制。
二、axios的请求方式
1、axios.get：向服务器请求获取数据。
2、axios.delete：向服务器请求删除数据，格式和参数与get一致。
3、axios.put：向服务器请求更新整行数据。
4、axios.patch：向服务器请求更新某个字段数据，格式与参数与put一致。
5、axios.post：向服务器请求上传数据。
6、其中axios.get与axios.post为常用方法。
7、实例，以axios.get为例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="axios.js"></script> </head> <body> <div id="id_1"> <div>{{r_data}}</div> </div> <!------------------------------------------------------------> <script> let vueObj = new Vue({ el: '#id_1', data: { r_data: null }, beforeMount: function () { // get里面的第一个参数为数据接口的url // get里面的第二个参数可不填或选填多个，如请求参数，请求头内容，json对象等，是用来提交给数据接口的参数 axios.get('http://wthrcdn.etouch.cn/weather_mini', { params: { city: '南京' // 相当于在url后面写 ?city=南京 }, headers: {} // 书写选项名和选项值的键值对 } ).then( // 定制请求成功以后的回调函数 response => { this.r_data = response.data } ).catch( // 定制请求失败以后的回调函数 error => { console.log(error) } ) } }) </script> </body> </html>
三、json
1、简述：json是JavaScript Object Notation的首字母缩写，单词的意思是javascript对象表示法，也就是说json指的是类似于javascript对象的一种数据格式。
2、作用：用于不同系统平台或不同编程语言之间传递数据。
3、特征：
①在js中，json对象格式化之后就是json数据，json数据反序列化之后即json对象。
②json数据可以保存在.json后缀的文件中，一般一个文件只有一个json数据。
③json数据的属性不能是方法或者undefined，只能是，数值(整数，小数，布尔值) / 字符串 / 数组 以及 json数据，而原生的json对象可以包含方法和undefined。
④json数据内需要使用引号的部分必须都说是双引号，每个属性成员之间以逗号隔开，最后一个成员后面一定不能加逗号。
4、json对象与json数据之间的转换：
①JSON.stringify(json对象) ===> json数据。
②JSON.parse(json数据) ===> json对象。
四、ajax
1、简述：ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。
2、作用：ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据或者无刷新更新数据，所以ajax在web开发中是十分常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。
3、本质：ajax的原理就是通过实例化XMLHttpRequest对象，再用该对象内置的方法实现与后端的数据通信，所以无论是ajax还是axios，本质上都是对XMLHttpRequest对象操作的封装。
五、数据接口
1、简述：也叫api接口，即服务端将数据操作的功能提供给客户端使用的url。
2、流程：客户端通过向服务端提供的url发起请求来申请操作数据，实际工作中，大部分数据接口无需手写，可以通过框架生成。
六、同源策略
1、简述：同源策略是浏览器为了保护用户信息安全的一种安全机制。
2、原理：所谓的同源就是指，把通信的两个地址(如，服务端接口地址与客户端浏览器页面地址)之间进行比较，协议、域名(IP)和端口是否相同。不同源的客户端js在没有得到服务端的明确授权的情况下，浏览器会拦截服务端提供给客户端的响应。
3、ajax和axios本质上都是js，所以都会受到同源策略的影响。
4、同源策略拦截的关键字：Access-Control-Allow-Origin，一般如果请求后反馈这种异常，就是访问受限，被同源策略所拦截了。
七、跨域方案之CORS
1、简述：CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了ajax只能同源使用的限制，主要是依靠后端服务器在响应的数据中设置响应头再返回来实现的，所以CORS也可以称为服务端授权。
2、其他跨域策略：jsonp和服务端代理。
①jsonp：核心是依靠script本身加载外部js文件来实现的，要想实现jsonp，同时也需要服务端的配合。
②服务端代理：越过浏览器，通过自己的服务端来请求目标服务端接口，因为自己的客户端与服务端处于同源，再直接请求数据即可。
3、定向授权与开放授权，在响应行信息内设置如下内容，Access-Control-Allow-Origin: ajax所在的域名地址。
①若域名地址为指定的地址，那表示只允许该地址客户端的ajax跨域访问。
②若域名地址为*，则表示任意源的客户端ajax都可以跨域访问。