跨域的概念是指在同一網(wǎng)站下,從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源。在Web開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要通過(guò)訪問(wèn)其他域名的資源的場(chǎng)景。而在JavaScript中,由于瀏覽器的同源策略限制,直接跨域訪問(wèn)是不被允許的。所以,我們需要使用jQuery提供的方法來(lái)實(shí)現(xiàn)跨域獲取frame。
$.ajax({ url: 'http://other-domain.com/page.html', dataType: 'jsonp', success: function(response) { console.log(response); } });
以上代碼是使用jQuery跨域獲取frame的示例。其中,我們使用了jQuery的ajax方法,并設(shè)置請(qǐng)求的url為其他域名下的頁(yè)面地址。由于瀏覽器對(duì)直接跨域請(qǐng)求是有限制的,所以我們?cè)O(shè)置dataType為jsonp。當(dāng)服務(wù)器接收到j(luò)sonp請(qǐng)求時(shí),會(huì)返回一個(gè)JavaScript函數(shù)調(diào)用,并把數(shù)據(jù)通過(guò)函數(shù)參數(shù)返回給前端。因此,在success回調(diào)函數(shù)中,我們可以通過(guò)response參數(shù)獲取服務(wù)器返回的數(shù)據(jù)。
需要注意的是,在jsonp請(qǐng)求中,我們傳遞的callback參數(shù)需要在服務(wù)器端生成并返回相應(yīng)的JavaScript代碼。這樣,瀏覽器才能正確地解析返回的數(shù)據(jù)。因此,在實(shí)現(xiàn)中需要在后端服務(wù)器代碼中添加一段jsonp處理的代碼。
if(isset($_GET['callback'])){ header('Content-Type: application/javascript'); echo $_GET['callback'].'('.json_encode($data).')'; }else{ header('Content-Type:text/html; charset=utf-8'); echo json_encode($data); }
以上代碼是php中實(shí)現(xiàn)jsonp數(shù)據(jù)返回的示例。在請(qǐng)求中加入callback參數(shù)時(shí),服務(wù)器端通過(guò)構(gòu)造JavaScript代碼并將結(jié)果返回,否則按照普通的Echo方式返回json格式的數(shù)據(jù)。
通過(guò)上述的方式,我們可以通過(guò)使用jQuery跨域獲取frame的方式,成功地訪問(wèn)其他域名下的數(shù)據(jù)。