1. 概述

之前的实现这些请求用的是 Ajax，但是 Ajax 要么用原生js写，要么用 jQuery 写
这两中方法都需要操作DOM，所以在Vue中不提倡

2. Vue 中实现 Ajax 请求的两种方法

Vue 中有两种方法可以实现这些请求：第三方包 vue-resource 和 axios

3. vue-resource 实现 Ajax 请求

1. vue-resource的请求方式有 get、post、jsonp
2. 首先要引进 Vue 包和 vue-resource 第三方包，而且 Vue 包必须在 vue-resource 之前，因为
   vue-resource 依赖了 Vue 包

发起 get 请求：

    // 当发起 get 请求之后，通过 .then 来设置请求成功后的回调函数，// 通过 res.body 拿到服务器返回的成功数据，先判断当 res.status=0 就成功了 this.$http.get('请求地址').then ( function (res) {if(res.status == 0){console.log(res.body) }else{console.log('404')}  })

发起 post 请求：

   //手动发起post请求，默认没有表单格式，所以有的服务器处理不了。//通过 post 方法的第三个参数 {emulateJSON:true} 设置提交的内容类型为普通表单数据格式this.$http.post('请求地址', {'提交给服务器的数据'},{ emulateJSON : true }).then(function (res) {console.log(res.body)}) 

发起 jsonp 请求：

 this.$http.jsonp('请求地址').then(function (res) {console.log(res.body)})

4. jsonp的实现原理

1. 跨域限制：由于浏览器的安全性限制，不允许 Ajax 访问 协议不同、域名不同、端口号不同的数据接口，
   浏览器认为这种访问不安全
2. 解决跨域限制：可以通过动态创建 script 标签的的形式，把 script 标签的 src 属性，指向数据接口地址，因
   为 script 标签不存在跨域限制，这种数据获取方式，称作 jsonp
3. 根据 jsonp 的实现原理，知晓 jsonp 只支持 get 请求
4. 具体实现过程：
   a). 先在客户端定义一个回调方法，预定义对数据的操作
   b). 再把这个回调方法的名称，通过 url 传参的形式，提交到服务器的数据接口
   c). 服务器数据接口组织好要发送给客户端的数据，然后拿着客户端传递过来的回调函数名称，
        拼接出一个调用这个方法的字符串，发送给客户端去解析执行
   d). 客户端拿到服务器返回的字符串之后，当做 Script 脚本去解析执行，这样就能够拿到 jsonp
        的数据了