因?yàn)榫W(wǎng)頁(yè)上要添加跨站通信的功能捻激。于是蛾娶,一翻搜索和試驗(yàn)括勺,得到了想要的結(jié)果缆八。寫下來(lái)當(dāng)作總結(jié)。
JQuery
JQuery 提供了幾種跨站通信的方法
JSONP
$.getJSON('http://server/path/someaction?callback=?', 'JSON data', function(data) {
? ?// Handle the JSON data
});
callback=? 算是一個(gè)固定格式疾捍,JQuery在這個(gè)HTTP Request發(fā)送出去后奈辰,會(huì)將 '?' 替換成一個(gè)隨機(jī)生成Function Name,HTTP Server得到這個(gè)Function Name (假設(shè)為JSONP1234)后乱豆,在返回?cái)?shù)據(jù)時(shí)可以寫入如
JSONP1234('response JSON data')
這樣的字符串奖恰。實(shí)際上就是在返回時(shí),JQuery會(huì)執(zhí)行次Script宛裕,將數(shù)據(jù)傳如回調(diào)的處理函數(shù)中瑟啃。
AJAX POST
$.ajax({
? ? type:'POST',
? ? url: 'http://server/path'
? ? crossDomain: true,
? ? data: 'data'
? ? dataType: 'data type'
? ? success: function(data, status, qXHR) {
? ? }
? ? error: function(data, status, error) {
? ? }
});
這個(gè)沒有什么太多需要強(qiáng)調(diào)的了,不過(guò)揩尸,需要注意的是蛹屿,Server端在HTTP RESPONSE時(shí)要加入
Access-Control-Allow-Origin: *\r\n
否則在FireFox中會(huì)表現(xiàn)為通信失敗,這個(gè) '*' 也可以寫成其它制定的域名岩榆,并不僅限于 '*'
IE
IE有些特別错负,在Cross Domain Post中是用了自己提供的API,如果在IE中調(diào)用上面Ajax的方法勇边,會(huì)有錯(cuò)誤發(fā)生犹撒。
IE 8+以上的版本都支持,XDomainRequest
if ('XDomainRequest' in window) {
? ? var xdr = new XDomainRequest();
? ? xdr.onload = function() {
? ? ? ? // Handle Response Data
? ? }
? ? xdr.open('POST', 'http://server/path');
? ? xdr.send('data');
}
需要注意的是粥诫,在使用前先判斷一下是否可以用 XDomainRequest.
HTTPS
現(xiàn)在很多網(wǎng)站為了安全都使用了HTTPS的通信方法油航,這里需要注意的是,如果發(fā)起跨站通信的網(wǎng)頁(yè)時(shí)HTTPS的怀浆,那么將要通信的那端也必須是HTTPS的(并且網(wǎng)站的證書需要受信)否則通信將會(huì)失敗(如Chrome)