자바 스크립트의 원격 서버 접근 및 onLoad 이벤트 처리

제레미 키스가 쓴 방탄 Ajax라는 책에서 관련 자료를 가져왔습니다.

원격 서버 접근

보안상의 문제로 자바스크립트에서 다른 도메인의 자바스크립트를 접근하는 것은 기본적으로 안됩니다.

특히 Ajax와 같은 XMLHttpRequest를 통해서 접근하는 것은 불가능하죠..

즉, 다음과 같이 접근할 수는 없다는 겁니다.

request.open("GET", "http://api.search.yahoo.com/", true);

XMLHttpRequest를 사용하는 방법으로는 기본적인 웹 API를 이용할 수 없다고 합니다. 

그런데 script를 이용하면 이런 보안상의 제약을 없앨 수 있다고 합니다. 

다음과 같이 다른 도메인에 있는 자바스크립트 파일을 읽어올 수 있기 때문이죠.

<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>

이런 형태로 요청할 수 있다면, JSON 파일도 요청할 수 있다고 합니다.

Ajax에서 XML, Text와 함께 리턴 타입으로 많이 사용하는 JSON은 기본적으로 javascript 구문이기 때문에 가능하다고 합니다.

그러나 원격 서버에서 JSON으로 결과를 리턴해 주지 않는다면 소용은 없겠죠.. 

어쨌든 이렇게 자바스크립트로 가져오려면 경우에 따라서 동적으로 새로운 script를 생성해야 할 필요도 있을 겁니다.

다음과 같이 처리하면 가능하다고 하네요

function getScript(url) { var scripttag = document.createElement("scirpt"); scripttag.setAttribute("type", "text/javascript"); scripttag.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(scripttag); }

위 소스는 url을 자바스크립트로 head에 추가하는 함수입니다. 

그리 복잡하지는 않죠.. script라는 요소를 만들고, type이나 src와 같은 속성을 넣고, head 하위에 추가하는 겁니다.

하지만, 일반적인 웹서비스는 이런 형태로 구성되어 있지는 않죠... ^^ 

대부분은 자체의 서버에 요청을 하고, 해당 서버에서 원격 서버로 연결하는 프록시 방식을 많이 이용하고 있는 듯 합니다.

어쨌든 위와 같은 방식도 있구나 하고 보시면 될 것 같습니다.

onload 이벤트 처리

웹 프로그래밍을 하면서 이런 경험은 한번 쯤 있을 겁니다.

특정 함수를 head에 있는 자바스크립트에서 실행을 해야 하는데, 

그 함수내에 document.getElementsByTagName("a")과 같은 소스가 들어가 있는 경우, 

아직 페이지가 로드 되지 않아서 제대로 처리가 안되는 때가 있습니다.

로직 상에는 아무 문제가 없는데, 답답해지죠.. -.-

이런 경우, 보통 body 태그에 onload="함수"와 같이 사용하거나, 

html 소스의 맨 하단에 그와 같은 함수를 두어서 해결하기도 합니다. 

그런데 방탄 Ajax란 책에서 보면 body 태그에 넣는 것과 같이 스크립트 코드와 html 코드가 함께 있는 것은 바람직 하지 않다고 합니다.

prepareLinks라는 함수를 호출할 때 다음과 같은 형식으로 사용할 수 있다고 합니다. 

window.onload = prepareLinks; function prepareLinks() { var links = document.getElementsByTagName("a"); for (var i=0; i<links.length; i++) { links[i].onclick = function() { doSomething(); return false; } } }

window.onload에 대해서는 이미 아시는 분들도 많겠지만, body 태그에 onload=""와 같은 것이죠

위 소스는 html 내의 앵커(a) 태그를 찾아서 설정된 href로 이동하지 않고, doSomething 함수를 수행하도록 바꾸는 겁니다.

그런데 이와 같이 사용할 경우, 단 하나의 함수만 지정할 수 있다고 합니다.

여러 개의 함수를 순차적으로 실행할 경우에는 다음과 같이 addLoadEvent 함수를 사용할 수 있다고 하네요..

function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(prepareLinks);

음.. 꽤나 복잡해 보입니다. 익명함수를 많이 사용하는 듯 해요

테스트는 안해 봤지만, 잘 되겠죠..

오랜만에 책 좀 보다가 생각나서 정리해 봤습니다.

반응형

'프로그래밍 > Java' 카테고리의 다른 글

숫자인지 체크하는 자바스크립트.. (이메일 체크하는 자바스크립트도 추가)  (1)	2011.10.13
Javascript에서 사용하는 HTML Parser라고 합니다.  (0)	2011.10.11
자바스크립트에서 form의 데이터를 문자열로 가져오기  (2)	2011.10.10
정규식을 활용해 Java에서 HTML 태그를 제거하는 소스 구현하기~  (0)	2011.10.08
[Java] URLConnection으로 가져올 때 UTF8과 EUC-KR 구분하기  (0)	2011.09.27