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

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^//