Firefox 에서 aax 의 onreadystatechange 지원 현황 분석

1.문제:

 
var xmlHttp; 
function savecarttodata(){ 
createXMLHttpRequest(); 
var rndcode = new Date().getTime(); 
var CartUrl ="a.asp?cache="+rndcode 
xmlHttp.onreadystatechange = function(){ 
..... 

} 
xmlHttp.open ("GET",CartUrl,true); 
xmlHttp.send(null); 
} 

위의 이 코드,xmlHttp.onreadystatechange=function(){.....};FF 에서 실행 할 수 있 지만 xmlHttp.open("GET",Url,false)으로 변경 하면;때 가 되면 안 돼,오늘 이 문제 로 정신 이 없어.원인 분석:첫째,이 때 는 xmlHttp.send()를 사용 할 수 없습니다.내용 이 필요 합 니 다.내용 이 없 으 면 NULL 을 사용 해 야 합 니 다.테스트 를 통 해 onreadystatechange 는 IE 에서 모두 정상 이지 만 FF3 에 서 는 ready State=0 시의 코드 만 실행 할 수 있 습 니 다.ready State=4 코드 를 실행 할 수 없습니다.네트워크 에서 이 유 를 찾 았 습 니 다.ajax 의 XML HttpRequest.onready statechange 방법의 차이:FF 에서 상태 가 1(즉,XML HttpRequest 가 open 으로 호출 되 었 으 나 send 가 호출 되 지 않 았 을 때)이 고 FF 는 onready statechange 뒤의 코드 를 계속 실행 합 니 다.실행 이 끝 난 후에 onready statechange 를 실행 하면 상태 2,3 입 니 다.4 의 코드,IE 는 상태 2 가 도착 하 기 를 기다 리 고 있 습 니 다.onreadystatechange 의 상태 2,3,4 의 코드 를 실행 한 후에 뒤의 코드 를 계속 실행 하면 문제 가 발생 합 니 다.항상 onreadystatechange 의 코드 는 서버 에서 얻 은 데 이 터 를 처리 해 야 합 니 다(이 데 이 터 는 onreadystatechange 의 상태 가 4 일 때 만 얻 을 수 있 습 니 다).그래서 IE 에 서 는 문제 가 없습니다.onreadystatechange 상태 4 가 오 면 onreadystatechange 뒤의 데 이 터 를 실행 합 니 다.그러나 FF 는 onreadystatechange 상태 4 가 오 면 onreadystatechange 뒤의 코드 를 실행 하지 않 기 때문에 뒤의 코드 는 서버 에서 얻 은 데 이 터 를 처리 할 수 없습니다.어떻게 해 야 합 니까?해결 방법:자 바스 크 립 트 의 패 키 지 를 사용 합 니 다.(이 해결 방법 은 GMAP 에서 영감 을 얻 은 것 입 니 다.)우 리 는 함 수 를 onreadystatechange 에 전달 합 니 다.이 함수 에서 서버 에서 돌아 온 데 이 터 를 처리 합 니 다.그러나 onreadystatechange 는 무 참 함수 입 니 다.그러면 어떻게 해 야 합 니까?방법 은 제 앞의 Javascript attachEvent 에서 매개 변 수 를 전달 하 는 방법 을 소개 하 였 습 니 다.여기 서 조금 만 더 소개 하 겠 습 니 다.바로 하나의 매개 변 수 를 onreadystatechange 에 전달 하 는 것 입 니 다.그러나 onreadystatechange 에서 return 무 참 함 수 를 사용 하여 이 무 참 함수 에서 이 전 송 된 매개 변 수 를 사용 할 수 있 습 니 다.이 방법 은 IE 와 FF 에서 모두 정상적으로 운행 할 수 있 기 때문에 이것 은 좋 은 방법 이 라 고 할 수 있다.여기 서 폐쇄 적 인 사용 을 언급 하 는 것 은 매우 복잡 하 다.또한 인터넷 에서 FF 에서 onload 를 사용 하 는 것 도 소 용이 없다.오류 제 거 를 통 해 위 요약 에서 언급 한 원인 이 야 말로 근본 적 인 것 이다.즉,FF 에서 처음으로 onreadystatechange 를 실행 한 후에 send 까지 계속 실 행 했 지만 그 다음 에 onreadystatechange 를 다시 실행 하지 않 고 바보 같이 걸 어 갔다.나 는 직접 다음 과 같이 고 쳤 다.

 
xmlHttp.onreadystatechange = xmlHandle; 
xmlHttp.open ("GET",Url,false); 
xmlHttp.send(null); 
xmlHttp.onreadystatechange = xmlHandle; //       FF，      。 


function xmlHandle(){ 
if (xmlHttp.readyState < 4){ 
...... 
}else if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
var cartResult = Number(xmlHttp.responseText); 
if (cartResult == 1){ 
window.location.href='a.asp'; 
}else if (cartResult == 2){ 
......; 
}else{ 
window.location.href='/'; 
} 
} 
} 

그러나 이렇게 해도 안 된다.원래 ff 3 는 xmlHttp.onready statechange=xmlHandle()로 바 뀌 었 다.그러나 괄호 를 넣 으 면 IE 도 안 된다.아,원래 FF 가 닭 가죽 이 라 고 생각 했 는데 지금 은 FF 가'지원 기준'이라는 칭 호 를 달 고 프로그래머 의 시간 을 낭비 하 는 쓰레기 라 고 생각한다.그러나 손 에 있 는 이 프로그램 은 정말 중요 하 다.어 쩔 수 없다.더 간단 한 방법 이 있 는 지 다시 디 버 깅 해 봐 야 한다.다음 과 같다.

 
xmlHttp.open ("GET",Url,false); 
xmlHttp.send(null); 
if(xmlHttp.status==200) 
xmlHandle(); 

이 코드 는 IE 와 FF 에서 통용 할 수 있다.그러나 동기 호출 이기 때문에 ready State<4 시 결 과 를 얻 지 못 하기 전에 알림 이 나타 나 야 합 니 다.이것 은 네트워크 속도 가 느 린 고객 에 게 매우 우호 적 입 니 다.그러나 이 컴퓨터 에서 이러한 대기 반응 을 얻 으 려 면 이 컴퓨터 의 반응 이 빠 르 기 때문에 고객 에 게 힌트 를 주지 못 할 수 있 으 므 로 당분간 이 코드 를 사용 하지 않 고 브 라 우 저 유형 분석 만 추가 해 야 합 니 다.

 
function getOs() 
{ 
var OsObject = ""; 
if(navigator.userAgent.indexOf("MSIE")>0) { 
return "MSIE"; //IE    
} 
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
return "Firefox"; //Firefox    
} 
if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
return "Safari"; //Safan    
} 
if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
return "Camino"; //Camino    
} 
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
return "Gecko"; //Gecko    
} 
} 

그리고 AJAX 코드 를 다음 과 같이 바 꿉 니 다.

 
var rndcode = new Date().getTime(); 
var CartUrl ="a.asp?cache="+rndcode 
var btype=getOs(); 
xmlHttp.onreadystatechange = (btype!="Firefox")?xmlHandle():xmlHandle; 
xmlHttp.open ("GET",CartUrl,false); 
xmlHttp.send(null); 
xmlHttp.onreadystatechange = (btype!="Firefox")?xmlHandle():xmlHandle; 

예 2

 
//        ,   onreadystatechange       
function getOs() 
{ 
var OsObject = ""; 
if(navigator.userAgent.indexOf("MSIE")>0) { 
return "MSIE"; //IE    
} 
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
return "Firefox"; //Firefox    
} 
if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
return "Safari"; //Safan    
} 
if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
return "Camino"; //Camino    
} 
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
return "Gecko"; //Gecko    
} 
} 
var objHttp; 
function searchCommodityByGroupId(groupId) 
{ 
objHttp = getHttpRequest(); 
var tt=new Date(); 
var url="getCommodityListByGroupId.htm?commodityGroupId="+groupId+"&time="+tt; 
var btype=getOs(); 

objHttp.onreadystatechange=(btype=="Firefox")?getCommodity():getCommodity; 
objHttp.open("GET",url,false); 
objHttp.send(null); 
objHttp.onreadystatechange=(btype=="Firefox")?getCommodity():getCommodity; 
} 
function getCommodity(){ 

if(objHttp.readyState==4) 
{ 
if(objHttp.status==200) 
{ 
document.getElementById("commodityDiv").innerHTML=objHttp.responseText; 
} 
} 
} 

function getHttpRequest(){ 
var httpRequest; 
if (window.XMLHttpRequest){ 
httpRequest = new XMLHttpRequest(); 
if (httpRequest.overrideMimeType){ 
httpRequest.overrideMimeType('text/xml'); 
} 
}else if (window.ActiveXObject){ 
try{ 
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
}catch(e){ 
try { 
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
}catch(e){} 
} 
} 
return httpRequest; 
}