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;
}

좋은 웹페이지 즐겨찾기