传统的JSONP跨域方法
JQ的ajax调用是最常见的调用方法之一,在自己写一些小demo过程中,总是会遇到跨域问题,
一般遇到跨域问题时,就会出现类似错误情况:
No 'Access-Control-Allow-Origin' header is present on the requested resource......
在这里把自己搜索过和使用过的跨域方法记录一下,以备查询。
1. 通过jsonp跨域
通过jsonp方式跨域,实际上是通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
在JQ中,我们可以通过一个自动的callback函数完成这一过程:
例如:
var url ='http://v.juhe.cn/weather/index?callback=?';
$.getJSON(url, {
'cityname':'北京',
'dtype':'jsonp',
'key':'xxxx',
},function(data){
console.log(data.);
});
实际上,在我们执行这段代码时,等于向服务器发出了这样一个请求:
http://v.juhe.cn/weather/index?callback=jsoncallback_randomName
在服务器端,则返回了jsonpcallback_randomName(data)的对象:
<?php
header('Content-Type:text/html;Charset=utf-8');
$data=array(
dosomething
);
echo$_GET['jsoncallback_randomName'] ."(".json_encode($data).")";
这种方式还可以写成$.ajax()和$.get()两种方式:
var url ='http://v.juhe.cn/weather/index?callback=?';
$.get(url, {
'cityname':'澳门',
'dtype':'jsonp',
'key':'xxxx',
},function(data){
console.log(data);
},'json');
或者:
var url ='http://v.juhe.cn/weather/index';
$.ajax(url, {
data: {
'cityname':'襄阳',
'dtype':'jsonp',
'key':'xxxx',
},
dataType:'jsonp',
jsonp:"jsoncallback",
success: function(data) {console.log(data);}
});
相当于$.ajax()中,jsonp的callback名称是手动指定的(jsoncallback),而$.getJSON()则是自动随机生成一个callback名称。
抛开JQ,单纯JS的实现:
script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签:
function () { var script = document.createElement("script");
script.src = "http://v.juhe.cn/weather/index&aspx&.........;
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild);
};