초고급) XDomainRequest(), XMLHttpRequest(), cross domain request.

일본 생활기/푸른지성의 IT이야기

2014.09.06 03:44


Type : Javascript 

Level : 9 / 10


블로트 서비스를 오픈하면서 티스토리와는 별개의 외부 사이트와 AJAX로 연동하여 블로트 게시판의 게시글 갯수 값이나 게시글들을 가져오는데

스크립트 오류가 나며 연결이 되지 않았던 문제점은 Internet Explorer 시리즈(이하 IE)의 http request 프로토콜 방식이 개떡-_-같아서 벌어진 일.


기존의 XMLHttpRequest()는 같은 서버내의 같은 도메인내에서만 소켓통신이 되었지만,

다른 도메인일 경우에도 Access-Control-Allow-Origin: * 가 서버단 헤더에 존재할 경우 통용이 되었다. (현재도 IE를 제외한 브라우져는 XMLHttpRequest)

하지만 IE만은 유독 역시나 비표준을 달리는 입장이라... XDomainRequest()라는 추가 타입의 프로토콜을 내놓았다.

XDomainRequest()는 IE 8, 9, 10 버젼에서 돌아가며 문법이 아주 약간씩 차이가 나서 이 프로토콜 전용 스크립트를 추가했다.

IE 6, 7 은 포기 ㅠ.ㅠ (티스토리 내부에서 clone 파일을 돌릴수가 없으므로...)


다행히 전송/수신은 성공했지만 데이타 받는 방식도 약간 다르고 체크하는 부분도 달라서, 블로트 페이지 전면 AJAX 통신부분을 재수정해야만 했다.

이부분 해결하니 깔끔하게 IE 10에서 뜨네요 ^0^//


나 이외에 헤메고 있을 개발자를 위한 소스 팁  - getXMLHttpRequest 선언부문 - 제작 푸른지성

function getXMLHttpRequest(){
	if(window.XDomainRequest){ //이거 쓰는게 IE 8, 9, 10밖에 없으니 처음부터 체크해봅시다 -_-
		try{
			return new XDomainRequest();
		}catch(e){
			try{   //어? 아닌가? 아니였어??
				return new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					return new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e1) {
					return null;
				}
			}
		}		
	}else if(window.ActiveXObject){  // IE 5, 6, 7
		try{
			return new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e1) {
				return null;
			}
		}		
	}else if(window.XMLHttpRequest){  // Other
		return new XMLHttpRequest();
	}else{
		return null;
	}
}




Request 부분 차이


if(!window.XDomainRequest){
	httpRequests[ida].open(httpMethod, httpUrl, true);
	httpRequests[ida].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	httpRequests[ida].onreadystatechange = function(){callback(ida);};
	httpRequests[ida].send(httpMethod == 'POST' ? httpParams : null);
}else{
	//XDomainRequest 에는 헤더전송이 불가능함.
	//또한 받을때도 _POST로 받지 못하고  _HTTP_RAW_POST_DATA로 받은것 알아서 쪼개서 써야합니다.
	if(httpMethod=='POST'){ httpMethod='post'; }else{ httpMethod='get'; }
	httpRequests[ida].open(httpMethod, httpUrl);
	httpRequests[ida].onload = function(){callback(ida);};
	httpRequests[ida].send(httpParams);
}
사용하고 싶으면 사용하실 때마다 "푸른지성님 멋있어요!"를 외치고 사용하셔야 합니다.


IE사용중인 방문자님들! 이제 블로트로 오실시간입니다. 히히 ^0^//




저작자 표시 비영리 변경 금지
신고
Posted by 푸른지성
댓글을 달아 주세요
  1. 뻐래리주인
    2014.09.06 11:44 신고

    아~ 네이버로 블로트 로그인 중에 에러발생~ 뭔가~디버깅이 필요한듯~ㅎㅎ
    크롬에서 테스트 하였습니다~ 에러 내용은 아래에~~(아~~붙여넣기가 되지 않으니...나두..간만에 코딩질 하는 것 같넹~ㅠㅠ)\
    Fatal error:Call to undefined function RAWPOST_EXISTS() in /home/kishe.com/kishe.com.2014/I/associate_company/blote/
    naverCallback.xhtml on line 6.....(헉~헉~ 이거 치는것두 눈 돌아간다...ㅜㅜ;)
    • 2014.09.06 12:35 신고

      아아.. 네이버콜백에는 관련파일을 로드하지 않았었네요 +_+
      감사합니다. ㅋㅋㅋㅋ
  2. 2016.07.29 11:57

    비밀댓글입니다
    • 2016.07.29 15:54 신고

      음 row포멧으로 받아서 직접 쪼개서 쓰는 방법 외엔 없는 것으로 알아요.
      물론 요즘 기술이 더 좋아져서 뭔가 다른 방법이 나오지 않았을까, 추측해봅니다. ^^;

댓글 작성


티스토리 툴바