最近在開發(fā)項目中,遇到了一個奇怪的現(xiàn)象,使用jquery的ajax發(fā)送請求在其他瀏覽器中正常工作,但在IE瀏覽器中卻無效。經(jīng)過一番排查,終于解決了這個問題。以下是解決過程和原因分析。
$.ajax({ type: 'GET', url: 'example.com', dataType: 'json', success: function (data) { console.log(data); }, error: function (xhr, status, error) { console.log(error); } });
我們先來看看上述代碼,這是一段簡單的ajax請求代碼,實現(xiàn)了對example.com的GET請求,并將返回的數(shù)據(jù)打印到控制臺。在大多數(shù)情況下,這個代碼片段應該能正常工作。
但是,如果在IE瀏覽器中嘗試運行這段代碼,就會發(fā)現(xiàn)無法獲取到返回的數(shù)據(jù),而且error回調(diào)函數(shù)也沒有被觸發(fā),整個ajax請求如同沒有發(fā)出一樣。
$.ajax({ type: 'GET', url: 'example.com', dataType: 'jsonp', success: function (data) { console.log(data); }, error: function (xhr, status, error) { console.log(error); } });
我們可以將dataType改為jsonp,這個時候ajax請求就能在IE瀏覽器中正常工作,返回數(shù)據(jù)也能被正確處理。這是為什么呢?
原來,IE瀏覽器對ajax請求的Cross-Domain(跨域)支持與其他瀏覽器有所不同。如果請求目標不在同一域名下,IE瀏覽器默認不會發(fā)送請求,而是拋出安全性異常。而在jquery中,dataType默認是json,如果IE瀏覽器遇到這種情況,就會直接忽略這個請求。
但是,如果我們將dataType改成jsonp,jquery會將請求以