JSONP
github
JOSNP是服務(wù)器與客戶端跨源通信的常用方法。最大特點(diǎn)就是簡單適用
網(wǎng)頁通過添加一個(gè)script標(biāo)簽线召，向服務(wù)器請求json數(shù)據(jù)铺韧，這樣不受同源策略的限制，服務(wù)端返回一個(gè)包含數(shù)據(jù)的回調(diào)函數(shù)
btn.addEventListener('click',function(){
var script = document.createElement('script')
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml'
document.head.appendChild(script)
document.head.removeChild(script)
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
首先缓淹，網(wǎng)頁動(dòng)態(tài)插入<script>標(biāo)簽哈打，由它向跨源網(wǎng)址發(fā)請求塔逃，該請求有個(gè)callback參數(shù)，用來指定回調(diào)函數(shù)的名字料仗，這對(duì)于JSON服務(wù)器收到這個(gè)請求湾盗，把數(shù)據(jù)放在回調(diào)函數(shù)參數(shù)的位置返回
script元素請求的腳本，直接作為代碼運(yùn)行立轧，這時(shí)只要瀏覽器定義了appendHtml函數(shù)就立即會(huì)被調(diào)用格粪，removeChild使頁面變得干凈，作為參數(shù)的json數(shù)據(jù)被視為JavaScript對(duì)象氛改，而不是字符串帐萎，避免了使用JOSN.parse
服務(wù)器
res.setHeader('Content-Type','text/json; charset = utf-8')
if(pathObj.query.callback){
res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
}else{
res.end(JSON.stringify(news))
}
CORS
github
CORS全稱是跨資源共享，是一種ajax跨域請求資源
支持現(xiàn)代瀏覽器平窘，IE支持10以上吓肋。 實(shí)現(xiàn)方式很簡單凳怨，當(dāng)你使用 XMLHttpRequest 發(fā)送請求時(shí)瑰艘，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會(huì)給該請求加一個(gè)請求頭：Origin肤舞，后臺(tái)進(jìn)行一系列處理紫新，如果確定接受請求則在返回結(jié)果中加入一個(gè)響應(yīng)頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應(yīng)頭中是否包含 Origin 的值，如果有則瀏覽器會(huì)處理響應(yīng)李剖，我們就可以拿到響應(yīng)數(shù)據(jù)芒率，如果不包含瀏覽器直接駁回，這時(shí)我們無法拿到響應(yīng)數(shù)據(jù)篙顺。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別偶芍，代碼完全一樣
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')//給予請求來源頁的url權(quán)限
//res.setHeader('Access-Control-Allow-Origin','*')表示匹配任意源網(wǎng)址
postMessage()和降域
