从零开始学 Web之Vue.js（四）Vue的Ajax请求和跨域
大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……
github：https://github.com/Daotin/Web
博客园:http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、Vue发送Ajax请求
之前我们发送Ajax请求的方式，一是原生的方式发送，二是通过jQuery来发送Ajax请求。
但是我们知道，在Vue里面是不推荐使用jQuery的，那么如何使用Vue来发送Ajax请求呢？
在Vue中可以使用第三方插件 来实现Ajax请求的发送。
1、vue-resource 安装
1、通过npm的方式在线安装：
2、在 github 中下载 vue-resource 的 文件 （在 dist 文件夹下有个 vue-resource.js 文件。）
3、使用 CDN。
2、vue-resource 使用
参考链接：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
步骤：
1、在Vue.js之后引入vue-resource.js文件（因为vue-resource.js文件是依赖于Vue的）
2、全局使用：
then后面第一个参数是请求成功的回调函数；第二个参数是请求失败的回调函数。
获取到的结果在回调函数的参数中。
3、局部使用：在methods的事件中，使用 的形式发起请求。
示例：通过三个按钮点击分别获取get，post，jsonp请求。
注意：获取到的数据在成功回调函数参数data的中，data是个对象，具体需要的数据是 data.body。
二、vue-resource 跨域请求数据
1、jsonp的实现原理
jsonp主要是为了解决跨域请求问题的。
我们知道，由于浏览器的安全性限制，不允许AJAX访问协议不同、域名不同、端口号不同的数据接口，浏览器认为这种访问不安全。
但是，script标签src属性中的链接却可以访问跨域的js脚本，于是利用这种特性，我们让服务器不再返回数据，而是返回一段调用某个函数的js代码，然后在script中进行调用，就实现了跨域。
于是，结果就弹出对话框。
我们再改进一下，在script的src中传入的大多是后台文件，这里以php文件为例。
由于我们之前传入 js 文件只是想得到一个函数的调用而已，那么传入php文件怎么获取函数的调用呢？
这里动态的添加了一个script标签，src指向跨域的一个php脚本，并且将上面的js函数名作为callback参数传入，那么我们看下PHP代码怎么写的：
php代码返回的也是一个函数调用，我们需要的数据，就在其参数里面。成功弹出提示框：
最后，jQuery提供了方便使用jsonp的方式：
其中参数 data，即为php代码返回的函数调用的参数，就是我们先要的数据。
2、跨域获取电影信息
这里我使用聚合数据：https://www.juhe.cn 的免费API。
使用方式很简单，注册之后，申请数据后，在个人中心->我的数据,接口名称上方查看key值。
而我们访问的url即为：
我们在name输入框中输入电影名称后，点击查询按钮即可显示相关信息。
由于API要求我们访问的方式为 get请求，所以我们使用 的方式来获取电影信息。
然后打印获取到的数据result，但是却爆出如下错误信息：
错误信息是表示，无法实现跨域。而我们之前知道 jsonp是可以实现跨域问题的。
于是我将get请求改为jsonp请求： 就可以了。
改进：
之前直接把数据接口放在了请求地址里面，如果地址变了，就要在请求地址里面修改，如果不止一个还有其他post，get请求等，那么就要修改多次，所以我们有必要动态的指定数据接口。
使用： 来指定数据接口的根地址。
我们在请求的时候只需要写 就可以了。
注意：后续地址，不要写 / ，否则就不会将根地址和后续地址进行拼接。
当然，对于我们发给服务器的数据，可能会需要
我们也可以进行全局配置：
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180917G080CU00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
