Ajax是一種在網(wǎng)頁(yè)上進(jìn)行異步數(shù)據(jù)交互的技術(shù),通過(guò)Ajax可以實(shí)現(xiàn)頁(yè)面無(wú)刷新更新數(shù)據(jù),提高用戶體驗(yàn)。然而,由于瀏覽器的同源策略,Ajax默認(rèn)只能訪問(wèn)同源(域名、協(xié)議和端口都相同)的數(shù)據(jù)。但是,我們可以通過(guò)一些手段來(lái)實(shí)現(xiàn)跨域訪問(wèn)其他域名的數(shù)據(jù)。
一種常見(jiàn)的跨域訪問(wèn)方式是JSONP(JSON with Padding)。JSONP利用了標(biāo)簽沒(méi)有跨域限制的特點(diǎn),不通過(guò)XHR對(duì)象來(lái)獲取數(shù)據(jù),而是通過(guò)動(dòng)態(tài)創(chuàng)建
標(biāo)簽來(lái)請(qǐng)求數(shù)據(jù)。例如,我們可以通過(guò)以下代碼獲取百度搜索的聯(lián)想詞:
var script = document.createElement('script'); script.src = 'https://www.baidu.com/su?wd=ajax&cb=callback'; document.body.appendChild(script); function callback(data) { console.log(data); }
上述代碼中,我們動(dòng)態(tài)創(chuàng)建一個(gè)標(biāo)簽,將src屬性設(shè)置為包含數(shù)據(jù)查詢和回調(diào)函數(shù)的URL。當(dāng)瀏覽器加載腳本時(shí),URL中的數(shù)據(jù)將被服務(wù)器處理,并通過(guò)回調(diào)函數(shù)返回給我們。這個(gè)回調(diào)函數(shù)需要提前定義好,并作為URL的參數(shù)傳遞給服務(wù)器,服務(wù)器返回的數(shù)據(jù)會(huì)自動(dòng)執(zhí)行這個(gè)回調(diào)函數(shù)。這種方式是一種可以繞過(guò)跨域限制的簡(jiǎn)單方式,但是只支持GET方法。
另一種常見(jiàn)的跨域訪問(wèn)方式是使用CORS(Cross-Origin Resource Sharing,跨域資源共享)。CORS是一種通過(guò)服務(wù)器設(shè)置響應(yīng)頭信息來(lái)實(shí)現(xiàn)跨域訪問(wèn)的方法。對(duì)于簡(jiǎn)單請(qǐng)求(GET和POST方法,Content-Type為application/x-www-form-urlencoded、multipart/form-data、text/plain),服務(wù)器端只需要設(shè)置相應(yīng)的響應(yīng)頭即可允許跨域訪問(wèn)。例如,我們可以通過(guò)以下代碼來(lái)訪問(wèn)其他域名的數(shù)據(jù):
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send();
上述代碼中,我們使用XMLHttpRequest對(duì)象創(chuàng)建一個(gè)GET請(qǐng)求,指定需要訪問(wèn)的URL。當(dāng)服務(wù)器返回?cái)?shù)據(jù)后,xhr對(duì)象的onreadystatechange事件會(huì)被觸發(fā),我們可以通過(guò)xhr.responseText
獲取到返回的數(shù)據(jù)。如果服務(wù)器沒(méi)有進(jìn)行CORS設(shè)置或設(shè)置不允許跨域訪問(wèn),瀏覽器將攔截這個(gè)請(qǐng)求,我們無(wú)法獲取到服務(wù)器返回的數(shù)據(jù)。
此外,還有一些其他的跨域訪問(wèn)方式,比如使用代理服務(wù)器、設(shè)置document.domain、跨文檔消息傳輸(postMessage)等。不同的場(chǎng)景下,我們可以選擇最適合的跨域訪問(wèn)方式。需要注意的是,在實(shí)際使用中,跨域訪問(wèn)可能會(huì)面臨一些安全性問(wèn)題,我們需要確保訪問(wèn)的域名是可信的,并采取相應(yīng)的安全措施。
總之,通過(guò)JSONP或CORS等方式,我們可以在Ajax中訪問(wèn)其他域名的數(shù)據(jù),從而實(shí)現(xiàn)跨域數(shù)據(jù)交互的效果。這些跨域訪問(wèn)方式在應(yīng)對(duì)不同的需求和場(chǎng)景時(shí)都能發(fā)揮重要的作用,為我們提供了更多的選擇。