ajax在IE中无法正常测试原因的探索及学习

Posted 2020-08-20 森森森0w0

愚蠢的测试

《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();

}