[AJAX ] 웹페이지 소스 보기

프로젝트를 진행하다 보면 원격 또는 로컬의 웹페이지 소스를 보면서 

여러 가지 정보를 참고해야 할 때가 있다.

그럴때 유용하게 써 먹어 보자.

AJAX 를 이용한 순수한 HTML 페이지이다.

소스를 카피해서 HTML 로 저장한 후에 더블클릭하거나 브라우저에 던지거나 해서 실행해 보자.

단, AJAX 가 가진 크로스 도메인 문제로 현재 사용하는 도메인이 아닌 경우 권한 오류가 나타난다는 아픔이...

따라서 위에 이야기한 데로 HTML 파일을 탐색기에서 더블클릭하거나 브라우저에 던져 넣어서 

실행해야만 크로스 도메인 문제를 극복(?)할 수 있다는 거... ^^;

아래 브라우저의 주소창을 본다면 무슨 뜻이지 이해되리라는 거...

백문이 불여일견!!!








소스: (아래 부분을 클릭하고 Ctrl + A 를 누르면 깔끔하게 선택 완료)

<SCRIPT LANGUAGE="JavaScript"> <!-- var request; // URL 요청에 대한 응답을 받아올 객체 /* 요청 객체 생성을 위한 랩퍼 함수 매개변수: regType: HTTP 요청 유형. GET 또는 POST url: 서버 프로그램의 URL asynch: 동기 또는 비동기 모드 선택 */ function httpRequest(reqType, url, asynch) { if(window.XMLHttpRequest) // 모질라 기반 브라우저(네스케이프, 파이어폭스) { request = new XMLHttpRequest(); } else if(window.ActiveXObject) // IE 기반 브라우저 { request = new ActiveXObject("MSXML2.XMLHTTP"); // IE 6 이만 if(!request) { request = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6 이상 } } if(request) { initReq(reqType, url, asynch); } else { alert("이 브라우저는 Ajax 를 지원하지 않습니다."); } } /* 생성된 요청 객체의 초기화 매개변수: regType: HTTP 요청 유형. GET 또는 POST url: 서버 프로그램의 URL asynch: 동기 또는 비동기 모드 선택. true 또는 false */ function initReq(reqType, url, asynch) { request.onreadystatechange = handleRespone; // CallBack 함수 지정 request.open(reqType, url, asynch); request.send(null); } /* Ajax 실행 후 CallBack 함수 */ function handleRespone() { if(request.readyState == 4) { // 문서 다운로드가 완료되었는가? if(request.status == 200) { // 문서가 정상적으로 로드되었는가? result = request.responseText; tdSourceView.innerText = result; } else { alert("해당 URL 에 정상적으로 접근하지 못 했습니다."); } } } /* 시작 포인트 함수 */ function fnViewSource(arg) { var url = arg; //txtSourceView.value = ""; tdSourceView.innerText = ""; if(url.length > 0) { if(url.substring(0, 7).toLowerCase() != "http://") { url = "http://" + url; } httpRequest("GET", url, true); } else { alert("소스보기 URL 을 입력하세요"); txtURL.focus(); } } //--> </SCRIPT> <TABLE width="100%"> <TR height="23px"> <TD> <TABLE width="100%" height="100%"> <TR> <TD width="140px">소스보기 URL</TD> <TD><INPUT TYPE="text" NAME="txtURL" style="width: 100%;" onFocus="this.select();"></TD> <TD width="40px"><INPUT TYPE="button" VALUE="소스 보기" ONCLICK="fnViewSource(txtURL.value)"></TD> </TR> </TABLE> </TD> </TR> <TR> <TD> <TABLE width="100%" height="100%" border="1"> <TR> <TD id="tdSourceView" width="100%" height="100%"></TD> </TR> </TABLE> </TD> </TR> </TABLE>