最近在开发项目中,遇到了一个奇怪的现象,使用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会将请求以