ajax跨域请求(jsonp)
利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQuery
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过
程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。
什么是跨域?
简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕
过同源策略限制,实现不同服务器之间通信的效果。
具体策略限制情况可看下表:
URL
说明
允许通信
http://www.a.com/a.js
http://www.a.com/b.js同一域名下
允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js同一域名下不同文件夹
允许
http://www.a.com:8000/a.js
http://www.a.com/b.js同一域名,不同端口
不允许
http://www.a.com/a.js
https://www.a.com/b.js同一域名,不同协议
不允许
http://www.a.com/a.js
http://127.0.0.100/b.js域名和域名对应ip
不允许
http://www.a.com/a.js
http://script.a.com/b.js主域相同,子域不同
不允许
http://www.a.com/a.js
http://a.com/b.js同一域名,不同二级域名(同上)
不允许
http://www.a.com/a.js
http://www.b.com/b.js不同域名
不允许
什么是JSONP?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模
式”,通过这种模式可以实现数据的跨域获取。
JSONP跨域的原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通
过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正
常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段
可执行的JavaScript代码。
举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
1.{"id":123,"name":张三,"age":17}
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
当然,如果服务端考虑得更加充分,返回的数据可能如下:
这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo:
便可以使用foo函数来调用返回的数据了。
第一种方法是在ajax函数中设置dataType为'jsonp':
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
也可以简单地使用getScript方法:
在jQuery中如何通过JSONP来跨域获取数据
1.
2.
3.
4.
5.
6.
7.
$.ajax({
dataType:'jsonp',
url:'http://www.a.com/user?id=123',success:function(data){
}
});
//处理data数据
1.$.getJSON('http://www.a.com/user?id=123&callback=?',function(data){2.//处理data数据
3.});
//此时也可以在函数外定义foo方法
functionfoo(data){
//处理data数据
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');
JSONP的应用
JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上而不是在
新浪微博的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博
开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。
function GetAjaxData() {
$.ajax({
type: "get",
async: false,
url: "http://localhost:4071/SearchBook.ashx",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,标识jsonp回调函数名(一般为:callback)jsonpCallback: "GetData",//callback的function名称
success: function (data) {
alert(data.BookName + " " + data.Pages);
},
error: function () {
alert('fail');
}
});
}