傳統(tǒng)的JSONP跨域方法
JQ的ajax調(diào)用是最常見的調(diào)用方法之一，在自己寫一些小demo過程中，總是會遇到跨域問題，
一般遇到跨域問題時，就會出現(xiàn)類似錯誤情況：
No 'Access-Control-Allow-Origin' header is present on the requested resource......
在這里把自己搜索過和使用過的跨域方法記錄一下，以備查詢。
1.?通過jsonp跨域
通過jsonp方式跨域，實際上是通過script標簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入。所以jsonp是需要服務器端的頁面進行相應的配合的。
在JQ中，我們可以通過一個自動的callback函數(shù)完成這一過程：
例如：
var url ='http://v.juhe.cn/weather/index?callback=?';
$.getJSON(url,?{
? 'cityname':'北京',
? 'dtype':'jsonp',
? 'key':'xxxx',
? },function(data){
? ? console.log(data.);
});
實際上,在我們執(zhí)行這段代碼時,等于向服務器發(fā)出了這樣一個請求:
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的實現(xiàn)：
script標簽本身就可以訪問其它域的資源，不受瀏覽器同源策略的限制，可以通過在頁面動態(tài)創(chuàng)建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); ? ?
? ? };
