2019-05-16 IE8/IE9对ajax的兼容

如题，ie弄死我就像碾死一直蚂蚁一样

项目做完各种ie上测，测试表示perfect，但是客户手里的IE8不高兴了。就是出不来东西，远程一下吧，嗯，都是ie8.怎么开发者工具的画风都不一样，什么鬼。
对于IE开发来说，我TM还是个孩子啊！
好了，问题就产生在IE8/9对ajax不兼容。
实际上 IE 7、8、9、10 对于跨域ajax 是默认不支持的。

image

解决方法一

解决方法如下：点击IE浏览器的的“工具->Internet 选项->安全->自定义级别”将“其他”选项中的“通过域访问数据源”选中为“启用”或者“提示”，点击确定就可以了。

这个不靠谱，任何逼迫客户做出应对的方法都是反革命,抬走，下一个。

解决办法——XDomainRequest

通过使用 Internet Explorer 8 中的跨域请求（缩写为“XDR”），开发人员可以创建跨网站数据聚合方案。 这个名为XDomainRequest 的请求与 XMLHttpRequest 对象类似，但编程模型更加简单，它可以提供一种最简单的方式来向支持 XDR 的第三方站点发出匿名请求，并选择使这些站点的数据可跨域使用。 只需三行代码即可生成基本的跨站点请求。 这将确保针对公共站点（例如，博客或其他社交网络应用程序）的数据聚合简单、安全和快速。

image

巴拉巴拉~自己去查，不多废话。
引入一段js：

/*!
 * jQuery-ajaxTransport-XDomainRequest - v1.0.3 - 2014-06-06
 * https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
 * Copyright (c) 2014 Jason Moon (@JSONMOON)
 * Licensed MIT (/blob/master/LICENSE.txt)
 */
(function(a){if(typeof define==='function'&&define.amd){define(['jquery'],a)}else if(typeof exports==='object'){module.exports=a(require('jquery'))}else{a(jQuery)}}(function($){if($.support.cors||!$.ajaxTransport||!window.XDomainRequest){return}var n=/^https?:\/\//i;var o=/^get|post$/i;var p=new RegExp('^'+location.protocol,'i');$.ajaxTransport('* text html xml json',function(j,k,l){if(!j.crossDomain||!j.async||!o.test(j.type)||!n.test(j.url)||!p.test(j.url)){return}var m=null;return{send:function(f,g){var h='';var i=(k.dataType||'').toLowerCase();m=new XDomainRequest();if(/^\d+$/.test(k.timeout)){m.timeout=k.timeout}m.ontimeout=function(){g(500,'timeout')};m.onload=function(){var a='Content-Length: '+m.responseText.length+'\r\nContent-Type: '+m.contentType;var b={code:200,message:'success'};var c={text:m.responseText};try{if(i==='html'||/text\/html/i.test(m.contentType)){c.html=m.responseText}else if(i==='json'||(i!=='text'&&/\/json/i.test(m.contentType))){try{c.json=$.parseJSON(m.responseText)}catch(e){b.code=500;b.message='parseerror'}}else if(i==='xml'||(i!=='text'&&/\/xml/i.test(m.contentType))){var d=new ActiveXObject('Microsoft.XMLDOM');d.async=false;try{d.loadXML(m.responseText)}catch(e){d=undefined}if(!d||!d.documentElement||d.getElementsByTagName('parsererror').length){b.code=500;b.message='parseerror';throw'Invalid XML: '+m.responseText;}c.xml=d}}catch(parseMessage){throw parseMessage;}finally{g(b.code,b.message,c,a)}};m.onprogress=function(){};m.onerror=function(){g(500,'error',{text:m.responseText})};if(k.data){h=($.type(k.data)==='string')?k.data:$.param(k.data)}m.open(j.type,j.url);m.send(h)},abort:function(){if(m){m.abort()}}}})}));

好的下面的接口就可以正常访问了！

// GET
$.getJSON('http://jsonmoon.jsapp.us/').done(function(data) {
  console.log(data.name.first);
});

// POST
$.ajax({
  url: 'http://frozen-woodland-5503.herokuapp.com/cors.json',
  data: 'this is data being posted to the server',
  contentType: 'text/plain',
  type: 'POST',
  dataType: 'json'
}).done(function(data) {
  console.log(data.name.last);
});

嗯，快去尝试吧，不过要注意啊，IE8对于datatype是非常严格的，楼主在一顿操作之后发现还是不行，结果是datatype的问题，要注意鸭。