JSP를 만드는데 페이지를 새로고침 하지 않고
페이지의 정보를 바꾸고 싶을때 Ajax를 사용한다.
예를들어 네이버의 실시간 검색순위를 보면 일정 시간마다 리스트가 계속 바뀐다. 새로고침은 하지 않고
또 회원가입 시 아이디 중복체크를 누르면 페이지는 그대로 있고 중복인지 아닌지 메세지가 뜬다.
이러한 기능들은 Ajax를 통해 구현된다.
JSP 문서에서 Jquery 문에 Ajax를 사용하고
Servlet에 데이터를 전달받아서 Servlet에서 데이터를 처리 후
Json을 사용하여 데이터를 포장하여 JSP 문서로 전달하게 된다.
하지만 보안 작업에는 적합하지 않으므로 작업에 따라 적절히 사용하자.
Ajax 장단점
- 장점 -
비동기식 방식으로 웹서버 응답을 기다리지 않고 데이터를 빠르게 처리한다.
예로 실시간 검색순위나 자동 완성이 있다.
- 단점 -
새로고침 하지 않고 계속 사용한다면 리소스가 계속 쌓여 페이지가 느려짐
JQ 오류와 같이 오류를 찾기 힘듦
비 동기식 처리모델 : 페이지가 로딩 될 때 먼저 서버에서 연산작업을 요청하고 계속 로딩한다. 작업에 대한 답은 기다리지 않고 처리된다.
동기식 처리모델 : 페이지가 로딩 될 때 서버의 연산을 모두 기다리고 페이지의 연산 처리가 끝나면 나머지 부분을 로드한다.
사용법으로는 먼저 API 사용에 필요한 라이브러리 파일을 받자
파일은 JSON
GSON 파일이 있다.
- JSON -
www.java2s.com/Code/Jar/j/Downloadjsonsimple11jar.htm
해당 파일을 lib 폴더에 추가하면 된다.
위 링크로 들어가 Gson을 고르고 다음 캡쳐와 같이 진행
해당 파일을 받아 lib에 추가한다.
이와 같이 라이브러리에 추가가 끝나면 JSON, GSON을 사용하는데 문제가 없을 것이다.
Ajax는 Jsp 파일에서 스크립트 단에서 사용하며
특정 동작이 있을 때 페이지를 변경(새로고침)하지 않고 Servlet에 통신 후 데이터를 받아와 변경
$(function(){ // 페이지 시작 시
$.ajax({
url:"서블릿 맵핑 주소",
data:{보낼 데이터 Key : "보낼 데이터 Value"},
type:"get",
success: function(data) {
// success는 서버에서 통신 성공 시 받을 자료를 받는다(data)
// 통신만 성공해도 success로 넘어간다는 것을 주의하자.
console.log("서버 전송 성공" + data);
},
error:function(data){ // 데이터 통신에 실패한 것
console.log("서버 전송 실패");
},
complete:function(data){
console.log("무조건 호출되는 함수");
}
});
});
이와같이 Ajax는 Jquery를 이용해 서블릿 통신을 하고 그 결과를 통해서 JQuery를 작성하여 여러가지 기능을 쓸 수 있다.
다음은 서블릿에서 다시 Ajax 구문에 data를 전송하는 부분
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<User> userList = new ArrayList<User>();
User user1 = new User(1, "호이1", "외계");
User user2 = new User(2, "호이2", "외계");
User user3 = new User(3, "호이3", "외계");
User user4 = new User(4, "호이4", "외계");
User user5 = new User(5, "호이5", "외계");
User user6 = new User(6, "호이6", "외계");
User user7 = new User(7, "호이7", "외계");
User user8 = new User(8, "호이8", "외계");
User user9 = new User(9, "호이9", "외계");
User user10 = new User(10, "호이10", "외계");
userList.add(user1);
userList.add(user2);
userList.add(user3);
userList.add(user4);
userList.add(user5);
userList.add(user6);
userList.add(user7);
userList.add(user8);
userList.add(user9);
userList.add(user10);
int userIndex = Integer.parseInt(request.getParameter("받은 데이터 Key 값"));
User user = userList.get(userIndex - 1);
// 자바에서 자바 스크립트에 알아먹을 수 있게 객체를 바꿔주는 기능(key, value 형식)이 JSON
// 라이브러리 json simple이 필요
JSONObject result = new JSONObject();
// 값을 그냥 전달 할 수 없다. 한글이 있으므로 UTF-8 처리를 해야한다.
result.put("userNo", user.getUserNo());
result.put("userName", URLEncoder.encode(user.getUserName(), "UTF-8"));
result.put("userNation", URLEncoder.encode(user.getUserNation(), "UTF-8"));
response.setContentType("application/json");
PrintWriter out = response.getWriter();
out.print(result.toJSONString());
// <textarea>value</textarea> HTML 형태는 textarea가 key가 된다.
// <key>value</key> xml형태는 key를 html보다 제한적이지 않고 자유롭게 사용 할 수 있다.
// {key:value} JSON 형태는 xml html보다 쓰기 쉽고 짧아서 바뀌는 추세이다.
out.flush();
out.close();
}
위와 같이 서블릿에서 따로 데이터를 JSON으로 처리를 해야한다.
처리하고 나서 데이터를 전송하는데 과정이 까다롭기 때문에 Gson이라는 오픈소스를 사용하면 편하다.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, User> userMap = new HashMap<String, User>();
User user1 = new User(1, "호이1", "외계");
User user2 = new User(2, "호이2", "외계");
User user3 = new User(3, "호이3", "외계");
User user4 = new User(4, "호이4", "외계");
User user5 = new User(5, "호이5", "외계");
User user6 = new User(6, "호이6", "외계");
User user7 = new User(7, "호이7", "외계");
User user8 = new User(8, "호이8", "외계");
User user9 = new User(9, "호이9", "외계");
User user10 = new User(10, "호이10", "외계");
userMap.put(user1.getUserName(), user1);
userMap.put(user2.getUserName(), user2);
userMap.put(user3.getUserName(), user3);
userMap.put(user4.getUserName(), user4);
userMap.put(user5.getUserName(), user5);
userMap.put(user6.getUserName(), user6);
userMap.put(user7.getUserName(), user7);
userMap.put(user8.getUserName(), user8);
userMap.put(user9.getUserName(), user9);
userMap.put(user10.getUserName(), user10);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
new Gson().toJson(userMap, response.getWriter());
}
위와같이 긴 코드가 3줄로 변하는것을 확인 할 수 있다.
직접 사용해보면 Ajax는 실시간이라기 보다는
개발자가 어떤 버튼, 동작에 상호작용하여 어떤 서버와의 통신이 필요할 때 사용할 작업을 설정하는 것이다.
이와 달리 실시간으로 계속 통신을 하고 싶다면 JSP Socket 통신을 이용하면 된다.
'JDBC, Servlet, JSP, Ajax, Json, Gson > 03.Ajax, Json, Gson 사용법' 카테고리의 다른 글
| [Socker]03-02. JSP Socket 통신 (0) | 2019.01.16 |
|---|