jsonp的用法
jsonp
请求主要是用来解决ajax
跨域请求问题,使用jsonp
实现跨域首先要保证服务器api
支持jsonp
请求的格式。
写法格式:
this.$http.jsonp('url',[可选参数,使用{}传参]).then(成功回调函数,失败回调函数);
jsonp跨域原理
由于当前页面所在的域名为http://localhost:63342/
而请求的api
于此域名不同。根据浏览器的协议,不同域名下信息数据的Ajax
请求被认为是不安全的,因而浏览器会阻止这种方式的数据请求操作,故在跨域时,Ajax
请求数据往往会导致失败。
虽然浏览器会阻止Ajax
的跨域请求,但根据浏览器的同源策略,其本身并不会阻止通过src
的方式所进行的数据请求操作,而jsonp
就是利用的此原理。
jsonp
在请求后台数据时,其本身就是在内存中创建一个
<script src="url"></script>
所以Ajax
请求就设计了一种叫做jsonp
的形式来封装script
脚本的src
形式来请求数据后再解析出数据。
jsonp
要求服务器支持一个参数callback=fn
的参数传递,并且服务器需要实现将返回的数据当做这个函数参数响应回来。
正因为如此,jsonp
请求实际上并不是一个真正的Ajax
请求,也就是说其请求的Content-Type
并不是xhr
异步对象,而是一个script
。
示例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</div>
<script src="../../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[]
}
,created(){
this.getData();
}
,methods:{
getData(){
var url = 'http://localhost:3000/people';
this.$http.jsonp(url).then(function(res){
if(!res.ok){
alert('请求出错!');
}
this.list = res.body;
});
}
}
});
</script>
</body>
</html>
运行结果
分析
虽然上面的示例中引用的仍然是本地的http://localhost
,而并非是真实的跨域,但是这不影响这个程序的使用,实际上跨域也是这么写的,写法一模一样。
我们知道,跨域是因为其请求的头部Content-Type
是一个script
,因而当我们看到该信息时,说明其就是能够实现跨域的功能。
如下所示: