|
최근 대부분의 자바스크립트 라이브러리들이나 프레임워크들은
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 을 써보면 써 볼수록 무척 쉽고도 간편하게 개발할 수 있도록 도와준다는 것을 새삼 깨닫게 됩니다. 아무 것도 모른채로 시작했던 지난 날들이 갑자기 떠오르면서... 뒤늦은 후회에 일자무식 시리니는 그저 웁니다. (엉엉~ ㅠ_ㅠ~~)
|
||||