首页 > 代码库 > ajax在IE中无法正常测试原因的探索及学习
ajax在IE中无法正常测试原因的探索及学习
愚蠢的测试
《JavaScript DOM编程艺术》P116,
问了一下别人,IE需要配置服务器 localhost:8080才能对这个网页有响应。。。需要配置tomcat和Java JDK。配了一晚上!终于搞定了。这里我讨论4种情况。(可以把无服务器的IE当成错误的结果)
1.无服务器测试AJAX时,IE11中无法得出结果,只有空白的页面。(错误原因:
request.open( "GET","example.txt",true );拒绝访问)
服务器中,IE中"Response Received"先于"function Done",响应快。页面正常。
无论是否在服务器中,火狐中的"function Done"都先于"Response Received"。说明响应慢。页面正常。
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
2.改成如下,无服务器,IE只弹出”1”,仍然是空白页面。(错误原因:
request.open( "GET","example.txt",true );拒绝访问)
服务器中,IE中弹出顺序为”1”,"Response Received","function Done"。响应快。页面正常。
无论是否在服务器中,火狐的弹出顺序都为”1”,"function Done","Response Received"。响应慢。页面正常。
function getHTTPObject(){
alert("1"); //说明一定会运行到这里
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
或者
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
alert("1"); //也能说明一定能运行这里。
return new XMLHttpRequest();
} //(无错误)
3.改成如下,放在if之后,IE中"Response Received"先于"function Done",说明响应快了。没有弹2,页面正常。
火狐空白页面。
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
alert("2"); //为什么前面无服务器IE无法正常显示这里却可以了??简直就像开了服务器
//一样。
//只要IE的这里没有alert();就没有反应,有就有反应。
//只要火狐这里没有alert();就有反应,和IE相反。这里是关键点。
//认真考虑了一下这句话,好像把if语句终结了,所以下面是个全新的函数,
不会调用是理所当然。另一方面,不会弹出“2”说明了typeof XMLHttpRequest 不等于"undefined"在两个浏览器都是成立的,说明了两个浏览器都支持XMLHttpRequest()函数!
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
4.改成如下,两个浏览器都是空白的,没反应。
只要放在catch(e){}之前:
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
alert("4"); //错误原因是缺少 ‘catch‘,不能分开的。
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
或者
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}alert("5"); //如果alert写在下一行,那么就是第2点的结果,为什么???
//因为分行符就是等于自动添加分号;。所以正确写法应该是};alert("5");
return new XMLHttpRequest();
}
5.改成如下,或者放在其他上述没提到的地方。回到了第1点的结果。说明了什么?
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
alert("5"); //说明这里有没有没差别,可能根本没运行这里。结合上面,这个函数typeof XMLHttpRequest == "undefined"是一直不等的,所以这里肯定不运行,直接return newXMLHttpRequest();说明了一个问题IE中typeof XMLHttpRequest 不等于"undefined",但是系统的 XMLHttpRequest();也无法直接运行,需要服务器环境。
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
7.从测试结果来看,火狐默认拥有自身的服务器,不需要另外搭建
8.IE中"Response Received"一直先于"function Done",响应比函数快。火狐则相反。
(测试中发现响应速度与F12文档模式有关,说明IE默认的edge响应比一般的8快)
所以可以忽略上面的先后顺序。
9.改成如下,IE中弹出”1”,"Response Received","function Done",页面正常
火狐只弹1,空白页面。
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
alert("2");
XMLHttpRequest = function(){
alert("1"); //说明了当上面有alert函数时这里一定会被运行到。
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
return false;
}
return new XMLHttpRequest();
}
10.如下,IE只弹出"Response Received","function Done",页面正常。
但是火狐只弹1,空白页面
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
alert("2");
XMLHttpRequest = function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
alert("1"); //说明火狐会运行到这里,IE不会。
return false;
}
return new XMLHttpRequest();
}
11.总结性的测试。IE中弹出1,5,3,"Response Received","function Done",页面正常。
火狐中弹出1,5,3,4,空白页面。
function getHTTPObject(){
alert("1");
if(typeof XMLHttpRequest == "undefined")
alert("2");
XMLHttpRequest = function(){
alert("3");
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e){}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){}
alert("4"); //结合上面,一切都明了了,if语句被终结,两个浏览器都支持XMLHttpRequest(),所以进行最后一步return new XMLHttpRequest();,调用自定义的函数(注意这里的是自定义的XMLHttpRequest()函数,不是系统的,所以IE也能运行了),弹出“3”,然后IE中也支持Msxml2.XMLHTTP.6.0或者其中的一个,所以IE不会进行到弹出“4”这一步,就可以正常地显示页面了。火狐不支持Msxml2.XMLHTTP.6.0或者ActiveXObject(),所以会进行到底,而且没有正确地显示页面。
return false;
}
alert("5");
return new XMLHttpRequest();
}
ajax在IE中无法正常测试原因的探索及学习