1. http协议及请求报文和响应报文

说明：浏览器和服务器间的数据交互需遵循http协议。
为什么要遵循http协议：浏览器和服务器都遵守同一种格式或规则，然后才能够相互解析实现数据交互。

1.1 http协议内容包括：

(1)http请求方式：get和post等
(2)http请求报文格式：请求报文行、请求报文头和请求报文体(post请求的参数)
(3)http响应报文格式：响应报文行、响应报文头和响应报文体
备注：报文头和报文体之间有一个固定空白行来分割。

请求报文和响应报文.png

1.2 http协议约定了：

(1)当浏览器请求服务器时

浏览器需遵守http请求方式：get和post等
浏览器需遵守http请求报文格式向服务器提交数据

(2)当服务器响应浏览器时

服务器需遵守http响应报文格式来响应浏览器

2. ajax

vue与后台api进行交互通常是利用vue-resource这个第三方包来实现的，本质上vue-resource是通过http来完成ajax请求响应的。

3. vue-resource

3.1 vue-resource资源地址

vue-resource的github地址，重点看vue-resource的http请求api。

vue-resource的http请求api.png

3.2 vue结合vue-resource的使用步骤

(1)直接下载vue-resource.js文件（建议先不用npm进行安装）

下载地址.png

说明：访问图中地址成功后，将代码复制到项目中新建的vue-resource151.js文件中。
(2)在项目的html页面中导入vue-resource151.js

说明：在html页面通过script标签导入vue-resource151.js文件后，就会自动在vue对象实例上初始化$http。
备注：导入vue-resource.js之前要先下载并导入vue.js。
Vue官网
Vue GitHub
Vue1下载地址
Vue1.0 在线文档
Vue2下载地址
Vue2.0 在线文档
(3)使用vue-resource实现ajax请求

在全局Vue对象的写法

// global Vue object
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

在Vue对象中的写法

// in a Vue instance
this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);

备注：[]代表可选参数，body代表请求报文体的参数对象。
this.$http.post('请求url', [可选参数请求报问题对象，使用{}传参], [可选参数对象，使用{}传参]).then(成功回调函数, 失败回调函数);

3.3 vue结合vue-resource实现ajax请求

3.3.1 实现ajax的get请求




    
    Document
    
    
    


    
        
        {{obj | json}}

3.3.2 实现ajax的post请求




    
    Document

3.3.3 实现ajax的jsonp请求

说明：浏览器会阻止ajax的跨域请求，但浏览器具有同源策略的特性。
跨域：假如有两台服务器S1和S2，S1的域名为localhost:8087，S2的域名为vueapi.ittun.com。浏览器从S1中请求到一个index.html页面后返回到浏览器，浏览器获取到响应报文后解析所有数据，index.html有若有一个ajax请求，请求的是S2的api。请求完成后，浏览器判定index.html页面是来源于S1的域名的，但是在这个域名下面通过ajax请求了S2域名的api，浏览器会认为这是一种不安全的请求，从而进行阻止。
同源策略：通过script标签的src来进行请求，不管api中的url域名和当前页面所在域名是否相同，浏览器都是允许请求的。

所有ajax就设计了一种jsonp的形式来封装script脚本的src形式来请求数据后在解析数据。jsonp本质上不是一个真正的ajax请求，也就是说在浏览器监控时，它的type类型并不是xhr(异步对象)，而是一个script脚本。
jsonp请求：主要解决ajax的跨域请求问题，使用jsonp实现跨域首先保证服务器api支持jsonp请求的格式。
说明：若api的服务器端已做了跨域处理，则不需要考虑用jsonp请求。




    
    Document
    
    


    
        
        {{obj | json}}

vue结合vue-resource实现ajax请求