簡單的總結(jié)下ajax和跨域問題。
手寫原生ajax算是比較高頻的面試題了塔鳍，目的就是看你是否明白其原理伯铣。
首先是XMLHttpRequest對象，現(xiàn)代瀏覽器均支持（IE5 和 IE6 使用 ActiveXObject）轮纫。它是一個window對象腔寡。它的reponseText屬性可以獲取返回數(shù)據(jù)。readyState和status屬性可以標(biāo)識返回狀態(tài)掌唾。
onreadystatechange是一個事件放前，或者說一個函數(shù)。
var request = new XMLHttpRequset();
request.onreadystatechange = function () {
if (request.readyState ==4 && request.status == 200) {
alert(requset.reponseText)//成功糯彬，返回reponseText
}else {
alert(requset.status) //失敗凭语，返回錯誤狀態(tài)碼
}
}
requset.get('GET', url, true) ;//默認(rèn)為true，可不寫撩扒。表示異步
requset.send()
- jsonp跨域似扔。
原理：利用script標(biāo)簽可跨域的特性。
<button onclick="getPrice()">點擊刷新</button>
<p id="test"></p>
function refreshPrice(data) {
var p = document.getElementById('test');
p.innerHTML = '當(dāng)前價格：' +
data['0000001'].name +': ' +
data['0000001'].price + '搓谆；' +
data['1399001'].name + ': ' +
data['1399001'].price;
}
function getPrice() {
var script = document.createElement('script');
var head = document.getElementsByTagName('head')[0];
script.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
head.appendChild(script)
}
借用了廖雪峰老師網(wǎng)站里的例子炒辉。
- CORS。
CORS全稱Cross-Origin Resource Sharing泉手，是HTML5規(guī)范定義的如何跨域訪問資源黔寇。設(shè)置服務(wù)端Access-Control-Allow-Origin - 服務(wù)器代理。同源域名下設(shè)置一個代理服務(wù)器來轉(zhuǎn)發(fā)斩萌。
- window.name
- document.domain
- window.postMessage
下面3個網(wǎng)上都有許多介紹缝裤。我反正是不怎么了解屏轰。。倘是。額亭枷。。
這個是借鑒網(wǎng)上一篇博客的總結(jié)搀崭，總之具體問題具體對待吧叨粘。
- jsonp 需要目標(biāo)服務(wù)器配合一個callback函數(shù)。
- window.name+iframe 需要目標(biāo)服務(wù)器響應(yīng)window.name瘤睹。
- window.location.hash+iframe 同樣需要目標(biāo)服務(wù)器作處理升敲。
- html5的 postMessage+ifrme 這個也是需要目標(biāo)服務(wù)器或者說是目標(biāo)頁面寫一個postMessage，主要側(cè)重于前端通訊轰传。
- CORS 需要服務(wù)器設(shè)置header ：Access-Control-Allow-Origin
- nginx反向代理
這個方法一般很少有人提及驴党，但是他可以不用目標(biāo)服務(wù)器配合，不過需要你搭建一個中轉(zhuǎn)nginx服務(wù)器获茬，用于轉(zhuǎn)發(fā)請求港庄。
