[송규남의 IT다이어리] 제이쿼리(jQuery) 열번째 이야기
노용철
view : 682
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 10
안녕하세요! 중앙HTA 송규남 강사입니다.
지난 시간에는 jQuery를 이용해서 Ajax 통신을 사용하는 방법에 대해서 알아보았는데요~
이번 시간에는 Ajax에서 json으로 응답을 받아서 처리하는 예제를 만들어 보겠습니다.
json을 사용하려면 json이 먼저 무엇인지 알아야 합니다.
json은 서로 다른 프로그래밍 언어간의 데이터 통신을 위한 표기법입니다.
xml보다 읽고 쓰기가 쉬우며 경량의 데이터를 교환하는 방식으로 인터넷에서 데이터를 주고 받을 때 표현하는 방법입니다.
실제로 데이터가 많다면 xml로 데이터를 전송 받을 때보다 json으로 전송 받을 때가 속도면에서 더 빠릅니다.
json은 아래와 같은 name/value가 한쌍으로 표현됩니다.
var json={'id':'song','pwd':1234'};
json의 값을 꺼내오려먼 json.id 또는 json.pwd 이런식으로 사용하면 됩니다.
먼저 json을 사용한 간단한 예제를 사용해 보겠습니다.
프로젝트 하나 생성 후 json으로 응답하는 json1.jsp 파일을 하나 만듭니다.
jsp 파일에는 아래처럼 json 형태의 데이터를 입력합니다.
<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>
{"id":"song","pwd":"1234","email":song@daum.net"}
json으로 ajax 통신을 하려면 jQuery에서 아래와 같은 방법으로 작성합니다.
$.ajax({
dataType: "json", ==> 응답형태가 json임을 의미합니다.
url: "json1.jsp", ==> 요청할 서버주소를 지정합니다.
type : "get", ==> 요청방식을 지정합니다.(get, post)
success:function(data){ ==> 서버로부터 응답이 성공되면 function을 수행합니다.
$.each(data,function(key,value){
수행할 코드 ↘ json객체가 data에 저장되며 key와 value에 name과 value속성이 차례로 담겨져 each구문을 반복합니다.
});
}
});
위의 형식을 이용하여 ajax로 json1.jsp에 데이터를 요청하는 html을 작성해보겠습니다.
같은 Webcontent 폴더안에 json1.html 파일을 하나 추가 후 아래처럼 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charst="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javacript">
$(document).ready(function(){
$(document).ready(function(){
$("#btn1").click(function(){
%.ajax({
dataType: "json",
url: "json1.jsp",
success:function(data){
$.each(data,function(key,value){
$("#result").append("key" + key +",value:" + value +"<br/>");
});
}
});
});
});</script>
</head>
<body>
<input type="button" value="서버에서 json으로 응답받기" id="btn1">
<div id="result">
</div>
<body>
</html>
위의 코드는 json1.jsp에서 json으로 응답되는 결과를 jquery에서 ajax방식으로 요청한 것입니다.
버튼을 누르면 아래처럼 ajax를 이용해서 json으로 응답된 결과를 얻어와 화면에 출력되는 것을 볼 수 있습니다.
$("#btn1").click(function(){
$.ajax({
dataType: "json",
url: "json1.jsp",
success:function(data)
==> 버튼을 누르면 ajax로 json1.jsp 데이터를 요청하고 응답된 데이터가 function의 매개변수가 data변수에 저장됩니다.
json객체로 data변수에 자동 저장되며 key와 value에 각각 name과 value가 분리되어 저장되므로 div에 append 메소드로 추가해 보았습니다.
$.each(data,function(key,value){
//div에 key와 value값 추가해보기
$("#result").append("key:" + key +",value" + value +"<br/>")
});
json으로 응답받는 get방식으로 요청시 아래처럼 작성해도 됩니다.
//json을 get방식으로 요청하기
$.getJSON("json1.jsp",function(data){
//json객체의 key와 value가 자동 분리되어 저장
$.each(data,function(key,value){
$("#result").append("key:" + key +",value:" + value +"<br/>");
});
});
jquery를 이용한 json 응답방식은 jquery 사이트에서 좀 더 자세한 설명을 볼 수 있습니다.
API Document 메뉴에서 Ajax 선택 후 오른쪽 메뉴를 살펴보면 getJSON()메소드에 사항을 살펴볼 수 있습니다.
jsp에서 응답을 JSON형태로 하려면 문자열로 JSON형태로 만들어 줘야하는데 이는 매우 불편합니다.
json.org 사이트에서 관련 라이브러리를 다운받으면 jsp에서 좀 더 수월하게 json형태로 응답할 수 있습니다.
json.org 사이트에 접속 후 메뉴중 json-simple이 있습니다.
해당메뉴를 선택해서 링크경로로 이동 후 왼쪽 다운로드 파일중 json-simple-1.1.1.jar 파일을 다운받습니다.
해당파일을 클래스패스 위치에 넣습니다.
jsp에서 아래와 같은 형태로 json객체를 생성하여 응답할 수 있습니다.
<%
//결과를 json형태로 담기위한 객체
JSONObject obj=new JSONObject();
obj.put("title","jQuery Ajax");
obj.put("pricte",10000);
//json으로 응답하기
response.setContentType("text/plain;charset=utf-8");
response.getWriter().write(obj.toString());
%>
응답화면이 아래와 같습니다.
이번 강좌에서는 jquery ajax에서 json통신에 대한 부분을 알아봤습니다.
그럼 이번 강좌는 여기서 마무리하겠습니다 ^^
저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
