-
댓글에 대한 처리는 하나의 페이지내에서 모든 작업이 이루어진다.
-
나의 프로젝트 경우엔 get.jsp에서 댓글을 쓰고,댓글을 확인하며, 댓글을 지우고, 댓글을 수정한다.
-
때문에 Javascript를 모듈화 해서 사용하는데 ajax방식을 이용할 것이다.
-
우선 나의 프로젝트 webapp 내 resources 폴더에 js 폴더 내에 reply.js 파일을 작성한다.
-
후 reply.js 파일은 게시물의 조회 페이지에서 사용하기 위해 작성된 것이므로 views/baord/get.jsp에 추가한다.
reply.js 등록 처리
모듈 패턴은 즉시 실행하는 함수 내부에서 필요한 메서드를 구성해서 객체를 구성하는 방식이다.
reply.js 내에 add 함수는 Ajax를 이용해서 POST 방식으로 호출하는 코드를 작성한다.
function add (reply, callback, error) {
console.log("add reply..............");
$.ajax({
type : 'post',
url : '/replies/new',
data : JSON.stringify(reply),
contentType : "application/json; charset=utf-8",
success : function(result, status, xhr) {
if (callback){
callback(result);
}
},
error : function(xhr, status, er) {
if (error){
error(er);} }
})
}제이쿼리는 Ajax와 관련된 다양한 메소드를 제공한다 .
그 중에서도 오늘 쓰이는 $.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드이다.
$.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다,
이것이 $.ajax() 메소드의 원형이다.
$.ajax(URL주소[,옵션])
URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이며,
옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합이다.
다음은 $.ajax() 메소드에서 사용할 수 있는 대표적인 옵션들과 그 예시이다.
$.ajax({
url: '/examples/media/request_ajax.php', // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터
method: 'GET', // HTTP 요청 방식(GET, POST)
dataType: 'json' // 서버에서 보내줄 데이터의 타입
contentType: 'applicatoin/json; charset=utf-8' // 전송할 데이터 타입
error: '에러 발생시 수행할 함수',
success: '성공시 수행할 함수'
})나도 이와 같이 reply.js 내에 add 함수를 Ajax를 이용하여 POST방식으로 호출 하는 코드를 작성했다.
-
여기서 주의 깊게 봐야 하는 부분은 데이터 전송 타입이 'application/json; charset=utf-8' 방식으로 전송한다는 점과 파라미터로 callback과 error를 함수로 받을 것이라는 것.
-
만일 Ajax 호출이 성공하고, callback값으로 적절한 함수가 존재한다면 해당 함수를 호출해서 결과를 반영하는 방식이다,
-
Javascript는 특이하게도 함수의 파라미터 개수를 일치시킬 필요가 없기에 callback이나 error와 같은 파라미터는 필요에 따라 작성할 수 있다,
reply.js를 이용하는 get.jsp에서는 테스트를 위해 replyService.add()를 해본다.
get.jsp 내부에서는 Ajax 호출은 replyService라는 이름의 객체에 감춰져 있으므로 필요한 파라미터들만 전달하는 형태로 간결해진다. replyService의 add()에 던져야 하는 파타미터는 Javascrript의 객체 타입으로 만들어서 전송해주고, Ajax 전송결과를 처리하는 함수를 파라미터로 같이 전달한다.
프로젝트를 Tomcat에서 실행하고 결과를 확인해 보면 데이터베이스에는 정상적으로 댓글이 추가되어야 하며, 브라우저에서는 경고창이 보여야 한다.
브라우저에서는 JSON 형태로 데이터가 전송되고 있는 것을 확인할 수 있어야 하고, 전송되는 데이터 역시 JSON 형태로 전송되는지 확인해야 한다
서버에서는 JSON 데이터가 ReplyVO 타입으로 변환되는 걸 확인할 수 있다.
