ref 擁有 href 屬於 通過 內部 什麽 json數據 內容

什麽是跨域？ 協議 域名 端口號有一個不一樣就是跨域 跨域：跨域訪問，簡單來說就是 A 網站的 javascript 代碼試圖訪問 B 網站，包括提交內容和獲取內容。由於安全原因，跨域訪問是被各大瀏覽器所默認禁止的，XmlHttpRequest也不例外。 如果兩個頁面擁有相同的協議（protocol），端口（如果指定），和主機，那麽這兩個頁面就屬於同一個源（origin），JavaScript 允許這種同源頁面的數據互相通信。 端口和協議，一般生產項目中WEB頁面是「看不見」端口號的，其實是缺省端口

80，目前網絡劫持盛行，因此流行使用安全協議HTTPS來避免劫持 我們使用域名來指定一臺主機，當然你也可以直接使用IP地址，重點在於不要以為jandou.com與www.jandou.com是同一域名，實際上www.jandou.com是一個二級域名，而jandou.com俗稱為裸域，

摘錄另一篇文章《JavaScript跨域總結與解決辦法》如下：URL說明是否允許通信

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	同一域名，不同端口 看不見的端口號是缺省端口80，	不允許
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同協議	不允許
http://www.a.com/a.js http://70.32.92.74/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	同一域名，不同二級域名（同上）	不允許（cookie這種情況下也不允許訪問）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允許

特別註意兩點： 第一，如果是協議和端口造成的跨域問題“前臺”是無能為力的， 第二：在跨域問題上，域僅僅是通過“URL的首部”來識別 而不會去判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。 “URL的首部”指window.location.protocol +window.location.host，也可以理解為“Domains, protocols and ports must match”。

那麽怎麽實現跨域請求呢：通過Jsonp和服務器：

• 為了便於客戶端使用數據，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然後服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了

1_1.通過 jsonp 原始方式跨域請求（方式一）： (不會自動創建回調函數) function getData() {
//jsonp ：通過創建動態script元素訪問服務器，把回調函數名作為查詢參數傳遞給服務器；
//服務器請求到數據以後把數據放入到回調函數中返回
var script = document.createElement(‘script‘) ;
var wyUrl = ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html‘;
script.src =‘http://localhost:9000?myUrl=‘+wyUrl+‘&callback=callBackFun1‘;
document.documentElement.appendChild(script);
}
function callBackFun1(data) {
console.log(JSON.parse(data)); } 1_2.通過 jsonp原始方式跨域請求（方式二）： <script>
var callBackFun2 = function(data) { //必須寫在下面src請求的前面
console.log( JSON.parse(data));
};
</script>
<script src="http://localhost:9000?myUrl=http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html&callback=callBackFun2"></script>


2_1.通過 jQuery的ajax中的 jsonp 方法 跨域請求：（get請求）(會自動創建回調函數) function getData() {
var wyUrl = ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘;
var url = ‘http://localhost:9000?myUrl=‘+wyUrl;
//ajax請求不用寫回調函數，內部自動創建回調函數，名字隨機，每次不一樣
$.ajax({
url: url,
type: ‘get’, //不寫時，默認為get方法
dataType: ‘jsonp‘,
success: function (data) {
console.log(JSON.parse(data));
},
error: function (e) {
console.log(e);
}
})
}

2_2.通過 jQuery的ajax中的 jsonp 方法 跨域請求：（post請求）(會自動創建回調函數) 註意：ajax的post方法不會自動將傳輸的數據轉化為JSON.stringfy格式：所以如果需要，得自己轉換一下再傳輸 JSON.stringify( {wyUrl: ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘} ), //ajax請求不用寫回調函數，內部自動創建回調函數，名字隨機，每次不一樣 $.ajax({
url: ‘http://localhost:9999‘,
method: ‘post‘,
dataType: ‘jsonp‘,
headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘},
data: {myUrl: ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘,randomNum:55},
success: function (data) {
console.log(JSON.parse(data));
},
拓展： 3_1.通過 angular 的 $http() 中 jsonp 方法 跨域請求： (回調函數是固定寫法) 註意：angular裏面的callback 必須為：JSON_CALLBACK 原理： jsonp利用的是script可以訪問外部信息的原理發送請求並且利用jsonp協議進行數據交互 .controller(‘myController‘, [‘$scope‘, ‘$http‘,function ($scope,$http) {
var wyUrl= ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘;
$scope.mine = {
getData: function () {
$http({
method: ‘jsonp‘,
url: ‘http://localhost:9000?myUrl=‘+ wyUrl +‘&callback=JSON_CALLBACK‘
}).then(function success(result) {
console.log(result);
},
function error(e) {
console.log(e);
});
}
};
}])

3_2.通過 angular 的 $http() 中 post 方法 跨域請求： 註意：angular的post方法會自動將傳輸的數據轉化為JSON.stringfy格式： 原理：post設置請求頭跳過預請求來實現跨域 .controller(‘myController‘, function ($scope,$http) {
$scope.mine = {
getData: function () {
$http({
method: ‘post‘,
url: ‘http://localhost:8888‘,
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded‘
},
data: {
wyUrl: ‘http://c.m.163.com/nc/article/headline/T1348647853363/0-10.html‘
}
}).then(function success(e) {
console.log(e);
},function error(e) {
console.log(e);
});
}
}

})




總結：

• 代理實現最麻煩，但使用最廣泛，任何支持AJAX的瀏覽器都可以使用這種方式。

• JSONP相對簡單，但只支持GET方式調用。

• XHR2最簡單，但只支持HTML5，如果你是移動端開發，可以選擇使用XHR2（http://www.jb51.net/article/80881.htm）。

跨越請求詳解