ajax 함수 / Servlet에서 JSP로 XML, JSON 데이터 보내기

1. 사전 내용

1-1. AJAX

velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

AJAX란 무엇인가?

 

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

1-2. AJAX vs. location.href

 

요청한 데이터를 어느 페이지에서 보여주고 싶은지에 따라 다르다.

 

1번

location.href 의 경우, 성공적으로 응답이 되었을 때 데이터를 새로운 페이지로 보낸다. (페이지 전환이 일어남)

location.href="이동할 페이지"

 

2번

$.ajax의 경우, 데이터를 현재 페이지에서 받는다.

 

AJAX의 구조

• url : 요청을 보낼 주소
• type : 보내는 방식 (GET/POST)
• data : json 방식으로 서블릿에 보낼 데이터. (AJAX는 GET 방식이라도 쿼리 뒤에 "?파라미터이름:파라미터내용"을 써서 보내지 않는다.)
  • Servlet에서 request.getParameter("파라미터")로 받는다. (위의 예시에선 "act")
• dataType : 요청이 성공적으로 마무리 되었을 때 받을 데이터 타입
• success : 요청 성공
• error : 에러 발생

 

1-3. (Java Servlet) foward vs. redirect 

1) foward

데이터를 가지고 오고 싶을 때 사용한다. 경로 변경이 없다.

2) redirect

단순 페이지 이동

 

 

 

2. Servlet에서 ajax로 xml data 받기

요청 JSP 파일

 

xml 로 받아오기

 

ajax에선 dataType을 xml로 설정한다.

 

 

요청을 받을 Servlet

 

doGet 메소드에서 해당 request를 받아 getXmlArticles로 보내준다.

 

getXmlArticles 메소드에서 request를 이용해 DB에서 정보를 받아온다.

정보를 받아 request에 속성으로 넣어주고 (request.setAttribute("articles", list); 부분)

xmllist.jsp를 담아 foward한다.

 

이 때,

ajax는 forward 하지 않는다. (X)

xml을 리턴한다. (O)

이다.

 

 

해당 xmllis.jsp 파일의 내용을 보면,

xml이 담긴 JSP 파일 내용

contentType을 보면 "text/xml"이다. text로 쓰여있지만 xml로 해석해라 라는 뜻..

 

 

이렇게 xml이 담긴 jsp 파일을 foward 메소드 함수를 통해 ajax로 리턴해준다.

성공적으로 리턴이 될 경우, ajax의 success에서 makeXmlList(data); 함수가 호출된다. ( 위 참고 )

 

요청 성공시 실행하게 될 메소드

이렇게 자알 뿌려주면 된다.

 

3. Servlet에서 ajax로 json data 받기

json도 위의 xml과 같은 방식으로 할 수 있지만 더 간단한 방법이 있다.

 

요청 JSP 파일에서의 ajax에서 dataType만 json으로 설정해주면 된다.

 

 

Servlet

Servlet에서는 DB에서 얻어온 data 객체를 ArrayList에 담아둔다.

이 객체가 담긴 List를 for문을 이용해 하나하나 JSONObject에 담고, 이 JSONObject를 JSONArray에 담으면 된다.

= DB에서 받아온 data를 json 객체에 담는다.

 

응답할 때는

1) 한글이 깨지지 않도록 utf-8로 인코딩 (response.setCharacterencoding("utf-8");)

2) JSONArray의 주소가 아닌 json 상태로 응답해야 하므로 변환작업 (jarray.toJSONString();)

3) 해서 response에 출력해주면 된다. (response.getWriter().print(~~~);)