在使用jQuery的過程中,$.get方法是常用的一種方法。通過使用該方法,我們可以向遠程服務(wù)器發(fā)送一個HTTP請求,獲取需要的數(shù)據(jù),實現(xiàn)局部刷新頁面的效果。但是,有時候我們會發(fā)現(xiàn)無論怎么使用$.get方法,都無法從遠程服務(wù)器獲取到數(shù)據(jù)。這是怎么回事呢?
首先,我們需要明確一點,$.get方法是基于XMLHttpRequest的封裝。如果該方法無法獲取到數(shù)據(jù),有可能是因為瀏覽器本身的限制導(dǎo)致。在部分瀏覽器中,如果請求的地址和當前頁面的地址不在同一域下,就可能會被瀏覽器攔截,無法獲取到數(shù)據(jù)。
$.get('http://www.example.com/data.php', function(data){ console.log(data); })
以上代碼會在瀏覽器控制臺輸出空值。原因就是當前頁面和http://www.example.com不在同一域下。瀏覽器觸發(fā)了跨域訪問的安全機制,攔截了請求。
當然,在開發(fā)過程中我們也可以使用JSONP來實現(xiàn)跨域請求。實際上,JSONP也是一種腳本跨域訪問方式的變種。通過向服務(wù)器請求callback函數(shù),在服務(wù)器端將數(shù)據(jù)放置于函數(shù)的參數(shù)中,最終返回至客戶端并當做js腳本執(zhí)行,以此完成客戶端與服務(wù)器的數(shù)據(jù)交互。
$.get('http://www.example.com/data.php?callback=?', function(data){ console.log(data); }, 'json');
以上代碼使用了JSONP方式來實現(xiàn)跨域請求。在請求地址中添加callback=?,jQuery會自動為我們生成一個唯一的回調(diào)函數(shù),并將該回調(diào)函數(shù)的名稱作為參數(shù)傳遞至服務(wù)器端。服務(wù)器端通過該參數(shù)將數(shù)據(jù)放置于回調(diào)函數(shù)的參數(shù)中,最終返回至客戶端執(zhí)行。
綜上所述,當我們使用$.get方法無法獲取到數(shù)據(jù)時,需要先確認請求地址和當前頁面的域是否相同。如果不同,可以使用JSONP方式來實現(xiàn)跨域請求。