실시간으로 데이터를 처리하는 ajax json 예제 소스를 알아보겠습니다. 일반적으로 인터넷을 사용할 때 다음 페이지 같은 버튼을 누를 때 웹페이지가 깜빡 하면서 페이지 리로딩이 일어나게 됩니다.
페이지가 리로딩 되면 해당 페이지를 다시 불러와야 하기 때문에 속도의 지연이나 데이터 손실이 일어날 수 있습니다. 하지만 ajax를 이용하게 되면 이런 리로딩 없이 실시간으로 데이터를 처리하게 됩니다. 대표적으로 실시간 검색랭킹이 있습니다.
그래서 이번에 ajax와 json 데이터 타입을 이용한 예제를 보여드리겠습니다.
1. Ajax란?
- 비 동기식 방식으로 웹서버의 응답을 기다리지 않고 데이터를 빠르게 처리하는 개발 기법.
- 기존 방식은 웹서버의 응답으로 페이지의 깜빡임(새로고침)이 있고 난 뒤 데이터가 처리 됐지만 Ajax는 페이지 리로딩 없이 데이터를 처리
- 대표적 기능으로 네이버나 구글의 실시간 검색이나 검색어 자동완성 등이 있습니다.
2. 단점
페이지의 리로딩이 없기 때문에 한페이지에서 지속적으로 사용시 리소스가 계속 쌓여 페이지가 느려짐
스크립트로 되어 있기 때문에 에러 발생 시 디버깅에 어려움이 있습니다.
3. 예제 소스
우선 Ajax를 사용하기 위해서는 jquery가 필요합니다. 다음과 같이 jquery 에서 직접 제공하는 주소를 사용하거나 js파일을 구하셔서 import 해야 합니다.
1) 화면단
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script> <html> <head> <title>Home</title> <script type="text/javascript"> function AjaxEx(){ var name = "name="+document.check.name.value; $.ajax({ url : "/check", type : "post", data : name, dataType : "json", success : function(data) { document.getElementById("result").innerHTML = data+"님 반갑습니다."; }, error : function(request) { alert("실패"); } }); } </script> </head> <body> <h3>Ajax 예제 입니다..</h3> <form action="" name="check" method="post"> <input type="text" id="name"> <input type="button" value="클릭" onclick="AjaxEx()"> <div id="result"></div> </form> </body> </html>
스프링 기본 기본 프로젝트를 생성하신 후 실행 시키면 나오는 Home 화면에 다음과 같이 JSP단을 작성해 줍니다.
2) java 단
@RequestMapping(value = "/check", method = RequestMethod.POST) public void check(HttpServletRequest request, HttpServletResponse resp) throws Exception { String name = request.getParameter("name"); JSONObject obj = new JSONObject(); JSONArray ja = new JSONArray(); ja.add(name); PrintWriter out = resp.getWriter(); out.print(ja.toString()); }
그리고 서버단 작업을 위와 같이 해주고 프로젝트를 실행해 봅니다.
실행 후 나타나는 텍스트박스에 이름을 넣은 후, 클릭 버튼을 누릅니다.
그러면 스크립트 펑션을 타고 Ajax를 수행하고 결과를 리턴해 줍니다.
또한, Ajax특성상 컨트롤러(JAVA단)을 거쳐오고도 페이지 리로딩 없이 결과를 화면에 뿌려줍니다.
이렇게 ajax와 json 데이터타입을 이용하여 예제를 구현해 보았는데요.
현재의 페이지를 유지하면서 DB데이터를 확인하는 작업에 사용하면 데이터의 빠른 접근과 사용자의 편의성이 증진되니 최적의 부분에 적절하게 사용하시면 되겠습니다.
QWER
JSON으로 받아오는부분은어디있나요..?
관리자
success : function(data) 요청이 성공적으로 이루어지면 data에 데이터가 저장됩니다.
AJAX
url 주소를 뭐라고 쳐야하나요?
관리자
요청 url을 쓰시면 됩니다. controller에서 받을 수 있는 url입니다.