總結(jié)： ? ?jsonp / iframe / window.name / cors / img.src
jsonp? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
利用在頁(yè)面中創(chuàng)建script節(jié)點(diǎn)的方法向不同域提交http請(qǐng)求的方法稱(chēng)為jsonp，首先在客戶端注冊(cè)一個(gè)callback驱还，然后把callback的名字傳給服務(wù)器，此時(shí)即寒，服務(wù)器先生成json數(shù)據(jù)惰帽，然后以js語(yǔ)法的方式憨降，生成一個(gè)function，function的名字就是傳遞上來(lái)的參數(shù)jsonp该酗，最后將json數(shù)據(jù)直接以入?yún)⒌姆绞绞谝胖玫絝unction中，生成了一段js語(yǔ)法的文檔呜魄，返回給客戶端悔叽，客戶端瀏覽器，解析script標(biāo)簽爵嗅，并執(zhí)行返回的js文檔娇澎，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)定義好的callback函數(shù)里睹晒。
var url = "http://localhost:8080/html5/jsonp_data.js";
// 創(chuàng)建script標(biāo)簽趟庄，設(shè)置其屬性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script標(biāo)簽加入head，此時(shí)調(diào)用開(kāi)始
document.getElementsByTagName('head')[0].appendChild(script);
function callbackFun(data)
{
console.log(data.age);
console.log(data.name);
}
服務(wù)器數(shù)據(jù)：callbackFun({"age":100,"name":"yuanfang"})
優(yōu)點(diǎn)：兼容性更好伪很，比XML輕了很多戚啥，可讀性比較好
缺點(diǎn)：只支持get請(qǐng)求而不支持post請(qǐng)求等其他類(lèi)型的http請(qǐng)求。只支持跨域http請(qǐng)求這種情況是掰，不能解決不同域兩個(gè)頁(yè)面之間如何進(jìn)行js調(diào)用的問(wèn)題虑鼎。
用法：在ajax請(qǐng)求中辱匿，設(shè)置dataType參數(shù)的值為jsonp
iframe? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
iframe標(biāo)簽是框架的一種形式键痛，ifram一般用來(lái)包含別的頁(yè)面，作用就是讓頁(yè)面變得美觀匾七。iframe不推薦大量使用絮短，但是某時(shí)候還是必要的，比如模擬窗口昨忆，或者h(yuǎn)tml在線編輯器等
用法：和普通的標(biāo)簽相同
屬性：
align：left丁频、right、top邑贴、middle席里、bottom。用于規(guī)定如何根據(jù)周?chē)脑貋?lái)對(duì)齊此框架拢驾。不贊成使用奖磁。請(qǐng)使用樣式代替。
frameborder：1繁疤、0咖为。用于規(guī)定是否顯示框架周?chē)倪吙颉?/p>
height：pixels秕狰、%。用于規(guī)定iframe的高度躁染。
longdesc：URL鸣哀。規(guī)定一個(gè)頁(yè)面，該頁(yè)面包含了有關(guān)iframe的較長(zhǎng)描述吞彤。
marginheight：pixels我衬。定義iframe的頂部和底部的邊距。
marginwidth：pixels饰恕。定義iframe的左側(cè)和右側(cè)的邊距低飒。
name：frame_name。規(guī)定iframe的名稱(chēng)懂盐。
scrolling：yes褥赊、no、auto莉恼。規(guī)定是否在iframe中顯示滾動(dòng)條拌喉。
src：URL。規(guī)定在iframe中顯示的文檔的URL俐银。
width：pixels尿背。%。定義iframe的寬度捶惜。
優(yōu)點(diǎn)：隔離上下文網(wǎng)頁(yè)田藐，便于更改，模塊分離
缺點(diǎn)：影響網(wǎng)頁(yè)加載速度
window.name
window對(duì)象有個(gè)name屬性吱七，該屬性有個(gè)特征汽久，在一個(gè)窗口的生命周期內(nèi)，窗口在載入的所有的頁(yè)面都是共享一個(gè)window.name的踊餐，每個(gè)頁(yè)面對(duì)window.name都有讀寫(xiě)的權(quán)限景醇，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的，并不會(huì)因新頁(yè)面的載入而進(jìn)行重置吝岭。
用法：
在一個(gè)頁(yè)面中設(shè)置window.name=“”三痰；在另一個(gè)頁(yè)面就可以獲取window.name的值
window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征窜管，在一個(gè)窗口的生命周期內(nèi)散劫，窗口在載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫(xiě)的權(quán)限幕帆，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的获搏，并不會(huì)因新頁(yè)面的載入而進(jìn)行重置。
cors
跨域資源共享蜓肆，是一種網(wǎng)絡(luò)瀏覽器的技術(shù)規(guī)范颜凯，他為web服務(wù)器定義了一種方式谋币，允許網(wǎng)頁(yè)從不同的域訪問(wèn)其資源，系統(tǒng)定義了一種瀏覽器和服務(wù)器交互的方式來(lái)確定是否允許跨域請(qǐng)求症概，有更大的靈活性蕾额，也更加安全。
優(yōu)點(diǎn)：
cors支持所有類(lèi)型的http請(qǐng)求
可以使用普通的XMLHTTPRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)彼城，比jsonp有更好的錯(cuò)誤處理
jsonp只要被老的瀏覽器支持诅蝶，它們不支持cors，但是大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了cors募壕。
用法：
注意要配置服務(wù)器端對(duì)于cors的支持调炬，只要是通過(guò)設(shè)置Access-Control-Allow-Origion來(lái)進(jìn)行的，http://www.cnblogs.com/yuzhongwusan/p/3677955.html
function?createCORSRequest(method,?url)?{
var?xhr?=?new?XMLHttpRequest();
if?("withCredentials"?in?xhr)?{
//?此時(shí)即支持CORS的情況
//?檢查XMLHttpRequest對(duì)象是否有“withCredentials”屬性
//?“withCredentials”僅存在于XMLHTTPRequest2對(duì)象里
xhr.open(method,?url,?true);
}?else?if?(typeof!=?"undefined")?{
//?否則檢查是否支持XDomainRequest舱馅，IE8和IE9支持
//?XDomainRequest僅存在于IE中缰泡，是IE用于支持CORS請(qǐng)求的方式
xhr?=?new?XDomainRequest();
xhr.open(method,?url);
}?else?{
//?否則，瀏覽器不支持CORS
xhr?=?null;
}
return?xhr;
}
var?xhr?=?createCORSRequest('GET',?url);
if?(!xhr)?{
throw?new?Error('CORS?not?supported');
}
img.src
所有具有src屬性的html標(biāo)簽都是可以跨域的代嗤，包括img和script棘钞，img在更改src屬性時(shí)就會(huì)發(fā)送請(qǐng)求，而script只有在添加到DOM樹(shù)之后才會(huì)發(fā)送http請(qǐng)求
缺點(diǎn)：需要?jiǎng)?chuàng)建一個(gè)DOM對(duì)象干毅，只能用于GET方法宜猜，只適合統(tǒng)計(jì)等用途，不能用于觸發(fā)發(fā)表評(píng)論硝逢，刪除文件等操作姨拥。
優(yōu)點(diǎn)：方便收集信息，不阻塞頁(yè)面加載渠鸽，出錯(cuò)也不影響頁(yè)面顯示叫乌。
