prototype 을 이용한 Ajax 통신 : 초간단 왕허접 1원팁
최근 대부분의 자바스크립트 라이브러리들이나 프레임워크들은
prototype 으로 대동단결하고 있는 추세에 있습니다.

왕무식 시리니의 경우도 몇몇 애용하고 있는 프레임워크들이 있어서
요녀석을 만나기는 좀 만나봤는데... 아직까지 그 속(?)을 들여다보지
못했지 뭡니까. (어허 통제라...)

그래서, 이참에 확 베껴버릴려고(?) 했는데 요 녀석이 한 번에
넘어오지를 않는 겁니다. 그래서(...뭐가 그래서?) 오늘은 간단하게
살짝 베껴본 것을 바탕으로 나름 부정확한 지식에 근거해서
간단히 Ajax 통신을 쉽게 하는 것을 소개해 보고자 합니다.
(언제나 그렇지만, 제 블로그는 항상 뜬금없이 시작하고 끝납니다. -ㅗ-;)

일단, Ajax 가 뭔지를 알아야 겠죠?
모르시는 분들을 위해 정말 간단히 설명 올리자면, 웹페이지를 새로 고침하지 않고
페이지의 내용을 동적으로 바꾸는 일련의 기술들을 말합니다.

송수신할 때 XML 을 이용하기도 하고, 최근에는 JSON 이라고 해서
{속성:값} 형식으로 데이터를 주고 받기도 합니다. 제 개인적인 선호는 JSON이지만
실제로 쓰는 것은 어째 XML로 데이터를 주고 받는 게 많습니다.(;;;;)

서버에 데이터를 보내고, 다시 그 걸 받았을 때 처리하는 일련의 작업들이
prototype 에서는 미리 정의되어 있습니다. 즉 작업의 틀을 제공해 줍니다.
최근 1.6.0 에서는 JSON도 완벽하게 지원하고 해서 뭐 Ajax 관련해서는
이만한 라이브러리가 따로 없을 것 같습니다.
오늘 보여드릴 초간단 왕허접 소스코드는 일단 아래와 같습니다.

// 영어울렁증 때문에... 오타난 게 있을 수 있습니다. (prototype.js 파일 참조필수)
var request = new Ajax.Request('/your/url', {
    parameters: '&name=sirini&position=seoul',
    onLoading: function() {
        alert('로딩중입니다......');
    },
    onSuccess: function() {
        alert('전송후 결과를 받았습니다.');
        var result = request.responseXML.어쩌구저쩌구에헤라디야;
    },
    onFailure: function() {
        alert('전송에 실패하였습니다.');
    }
});

더 필요한 건 없냐구요?
(기본적으로는)없습니다! (다행히도)

prototype 을 이용해서 Ajax 통신을 하면 엄청 쉽고 간편하게 해당 부분을
처리할 수 있습니다. prototype 에서 제공하는 틀에 맞춰 코드를 작성하시면 됩니다.
parameters 에 GET 방식으로 데이터를 보낼 때처럼 쿼리문을 써 주시고
/your/url/ 에 데이터를 보낼 곳을 써 주시면 됩니다.

responseXML 말고도 Text 도 있고 JSON 으로 리턴받는 부분도 있습니다.
자세한 것들은 다른 유용한 포스트들을 참고해 보시면 되겠습니다. (무책임)
(아니면, prototype.js 파일에서 'Ajax' 로 소스코드를 검색해 보아요.)

Ajax 모듈에는 Request 말고도 Response 나 Update 등 여러개의 모듈이 있습니다.
대표적인 모듈 Request 만 간단히 소개해 드렸는데 prototype 을 써보면 써 볼수록
무척 쉽고도 간편하게 개발할 수 있도록 도와준다는 것을 새삼 깨닫게 됩니다.
아무 것도 모른채로 시작했던 지난 날들이 갑자기 떠오르면서... 뒤늦은 후회에
일자무식 시리니는 그저 웁니다. (엉엉~ ㅠ_ㅠ~~)
by S2nNAMU | 2008/11/04 08:43 | PROGRAMING | 트랙백 | 덧글(0)
트랙백 주소 : http://littletrue.egloos.com/tb/3967070
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

:         :

:

비공개 덧글

< 이전페이지 다음페이지 >