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