[javascript] Ajax.request 사용하기 & 타 도메인에 대해서 작동하지 않는 문제
코덕질/해탈내역들 2009/01/18 10:22
먼저 Ajax는, 자바스크립트 Prototype 라이브러리의 대표적인 기능 중 하나로서, 웹페이지를 다시 로드(reload)하지 않고도 새로운 컨텐츠를 읽어올 수 있다는 데에 그 의의가 있습니다.
오늘 한 삽질의 성과 겸, Ajax 명령어를 사용법도 정리해 볼 겸 해서 한번 사용법에 대하여 언급해 보도록 하겠습니다.
먼저 Ajax를 사용하기 전에
로 prototype.js를 로드해 주시는 것은 기본!
Ajax 명령어는 다음과 같이 사용할 수 있습니다 :
- method : Ajax.Request를 처리하는 방법을 지정합니다. GET과 POST 방법이 있는데, 이것이 의미하는 바는 여기를 참조해 주세요.
- parameters : 보낼 파라미터에 대한 값 설정입니다. 예를 하나 들자면, url을 test.php로 하고 파라미터 값을 {'test', '1'}로 놓으면 주소창에 test.php?test=1이라는 결과와 같게 되지요 :)
- onLoading : url로부터 값을 로딩하고 있을때 발생하는 이벤트입니다.
- onSuccess : url로부터 성공적으로 로딩하였을때 발생하는 이벤트입니다.
- onFailure : url로부터 로딩에 실패하였을때 발생하는 이벤트입니다.
- onComplete : [언급하진 않았지만] url 로딩과 상관없이 작업 완료 후 발생하는 이벤트입니다.
onSuccess에서는 변수로 주어지는 returnValue에서 결과값을 얻어올 수 있습니다.
또 이렇게 응용하면 XML을 파싱하는 RSS리더로도 응용이 가능합니다.
다른 분이 만드신 샘플도 있더라고요.
물론, 이벤트 메서드에 이와 같이 사용자 정의 함수를 설정해 줄 수도 있습니다.
＊종종 파이어폭스 등에서 url값에 url을 넣었지만 스크립트 에러도 없고 아무런 반응이 없는 경우가 있는데, 이 때는 혹시 자신이 입력한 URL이 타 도메인(Cross Domain)이 아닌지 확인해 주세요. 이번에 패치가 되면서 타 도메인에서의 Ajax.Request호출이 금지되었다고 합니다. 해결방법이 없는 건 아니지만, 아무래도 사용하기가 까다로워 진 건 사실입니다 -_-;..
구글에서 Cross Domain AJAX를 검색해 보시면 더 많은 방법들을 찾으실 수 있습니다.
오늘 한 삽질의 성과 겸, Ajax 명령어를 사용법도 정리해 볼 겸 해서 한번 사용법에 대하여 언급해 보도록 하겠습니다.
먼저 Ajax를 사용하기 전에
<script src="prototype.js"></script>
로 prototype.js를 로드해 주시는 것은 기본!
Ajax 명령어는 다음과 같이 사용할 수 있습니다 :
new Ajax.Request(str_url,
{
method : 'get',
parameters : {'항목명' : '값', ... },
onLoad : function() { ... },
onSuccess : function(returnValue) { ... },
onFailure : function() { ... }
});
{
method : 'get',
parameters : {'항목명' : '값', ... },
onLoad : function() { ... },
onSuccess : function(returnValue) { ... },
onFailure : function() { ... }
});
- method : Ajax.Request를 처리하는 방법을 지정합니다. GET과 POST 방법이 있는데, 이것이 의미하는 바는 여기를 참조해 주세요.
- parameters : 보낼 파라미터에 대한 값 설정입니다. 예를 하나 들자면, url을 test.php로 하고 파라미터 값을 {'test', '1'}로 놓으면 주소창에 test.php?test=1이라는 결과와 같게 되지요 :)
- onLoading : url로부터 값을 로딩하고 있을때 발생하는 이벤트입니다.
- onSuccess : url로부터 성공적으로 로딩하였을때 발생하는 이벤트입니다.
- onFailure : url로부터 로딩에 실패하였을때 발생하는 이벤트입니다.
- onComplete : [언급하진 않았지만] url 로딩과 상관없이 작업 완료 후 발생하는 이벤트입니다.
onSuccess에서는 변수로 주어지는 returnValue에서 결과값을 얻어올 수 있습니다.
onSuccess : function(returnValue) { alert(returnValue.responseText); }
또 이렇게 응용하면 XML을 파싱하는 RSS리더로도 응용이 가능합니다.
var xml = new rssParser(request.responseXML);
다른 분이 만드신 샘플도 있더라고요.
물론, 이벤트 메서드에 이와 같이 사용자 정의 함수를 설정해 줄 수도 있습니다.
... onLoad : func_whileLoad() ...
function func_whileLoad()
{ ... }
function func_whileLoad()
{ ... }
＊종종 파이어폭스 등에서 url값에 url을 넣었지만 스크립트 에러도 없고 아무런 반응이 없는 경우가 있는데, 이 때는 혹시 자신이 입력한 URL이 타 도메인(Cross Domain)이 아닌지 확인해 주세요. 이번에 패치가 되면서 타 도메인에서의 Ajax.Request호출이 금지되었다고 합니다. 해결방법이 없는 건 아니지만, 아무래도 사용하기가 까다로워 진 건 사실입니다 -_-;..
구글에서 Cross Domain AJAX를 검색해 보시면 더 많은 방법들을 찾으실 수 있습니다.
댓글을 달아 주세요
ㄷㄷㄷㄷ
ㄷ
이렇게 어려운거는 몬함 ㅠㅠ
[몰컴]
ㅋㅋㅋ
쿠나님은 엘리트 출신?
아니면 컴퓨터 손질 잘하시는 동네 아저씨?
동네아저씨에 풉ㅋㅋ (퍽)
동네아저씨 왠지 붐업감이네요ㅋㅋㅋㅋㅋㅋㅋ
(어이!!)
무슨 말인지 모르겠습니..ㅠ.ㅠ
모르시는게 맞을 겁니다.. 저도 아직 어려운 부분입.. [퍽!]
비밀댓글입니다