자바 웹/제이쿼리
제이쿼리(Ajax, JSON)
수풀속의고라니
2022. 6. 21. 10:28
728x90
화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리.
여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어서 유용하다.
제이쿼리를 사용하는 방법은 제이쿼리 사이트에서 라이브러리를 다운로드해서 사용하는 것과 네트워크로 CDN 호스트를 설정해서 사용하는 방법이 있는데 여기서는 두 번째 방법을 사용한다.
HTML이나 JSP에 제이쿼리 CDN 호스트를 설정하기 위해서는 아래를 추가해줘야 한다.
<script src="http://code.jquery.com/jquery-latest.min.js></script> - 최신 버전의 제이쿼리 사용
버전을 지정해서 사용할 수도 있음
제이쿼리 여러 기능
제이쿼리는 HTML 객체(DOM)를 탐색하는 방법으로 CSS 선택자를 이용한다.
| 선택자 표현 방법 | 설명 |
| $("*") | 모든 DOM을 선택 |
| ${"#id") | 해당되는 id를 가진 DOM을 선택 |
| $("elementName") | 해당되는 이름을 가지는 DOM을 선택 |
| $(".className") | CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택 |
| $("selector1, selector2, ...") | 해당되는 선택자를 가지는 모든 DOM을 선택 |
먼저 위와 같이 ID 선택자를 이용해서 페이지가 로드되면 선택한 id값에 해당하는 구문이 alert 창으로 출력되도록 할 수 있다.
id 선택자를 이용해 해당 id를 가지는 <p> 엘리먼트에 접근해 동적으로 텍스트를 추가하는 예제다.
버튼을 클릭하면 제이쿼리 메서드가 실행되면서 <p>태그에 제이쿼리에서 설정한 메세지가 출력된다.
클래스 선택자를 이용해서 버튼을 클릭하면 지정한 클래스의 위치에 이미지 파일을 넣는 기능을 함
위의 예제를 이렇게 바꾸면 div 태그에 해당하는 영역에서 이미지가 출력됨
위의 예제는 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 것이다.
제이쿼리의 val() 메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 한다.
제이쿼리 Ajax 기능
웹 사이트에서 회원 가입을 하려면 먼저 ID 중복 여부부터 체크하는 것이 일반적이다. 이때 보통 회원 가입 페이지는 브라우저에 표시된 채 ID 중복 여부를 확인하는 창만 서버에 질의하여 화면에 따로 보여준다.
(중복 체크하는 창을 따로 띄우는 흔한 방식)
이렇게 클라이언트 측에서의 작업과 상관 없이 비동기 적으로 서버와 작업을 수행할 때 Ajax 기능을 사용한다. Ajax는 비동기 자바 스크립트 + XML의 의미로 자바스크립트를 이용해서 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술을 의미한다.
Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있다.
기존 웹 페이지의 처리 방식은 요청 페이지에서 정보를 입력하고 서버에 요청하면 서버에서 결과를 처리한 후 HTML 태그를 클라이언트의 브라우저에 전송해 다른 페이지를 보여주면서 페이지 이동이 발생한다.
반면 Ajax는 요청 페이지의 결과를 서버에서 처리한 후 XML이나 JSON으로 다시 원래 요청 페이지로 전송하면서 페이지 이동이 발생하지 않는다.
제이쿼리 Ajax 사용
제이쿼리에서 Ajax를 사용하려면 $ 기호 다음 ajax라고($.ajax) 명명한 후 속성들에 대한 값을 설정해야 한다.
| 속성 | 설명 |
| type | 통신 타입을 설정(get 혹은 post) |
| url | 요청할 url을 설정 |
| async | 비동기식으로 처리할지의 여부를 설정 |
| data | 서버에 요청할 때 보낼 매개변수 설정 |
| dataType | 응답 받을 데이터 타입 설정(XML, HTML, JSON 등) |
| success | 요청 및 응답에 성공했을 때 처리 구문 설정 |
| error | 요청 및 응답에 실패했을 때 처리구문 설정 |
| complete | 모든 작업을 마친 후 처리 구문 설정 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@WebServlet("/ajaxTest1")
public class AjaxTest1 extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request,response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
//getParameter()메서드를 이용해 ajax로 전송된 매개변수를 가져옴
String param = (String) request.getParameter("param");
System.out.println("param = " + param);
//PrintWriter의 print()메서드를 이용해 브라우저에 응답 메시지를 보냄
PrintWriter writer = response.getWriter();
writer.print("안녕하세요! 서버입니다.");
}
}
|
cs |
위는 클라이언트에서 Ajax로 메시지를 보내면 이를 처리하는 서블릿이다.
브라우저에서 매개변수 이름인 param으로 데이터를 보내면 getParameter()를 이용해 데이터를 가져오고, 서블릿에서는 PrintWriter의 print() 메서드의 인자로 응답 메시지를 브라우저에 보낸다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process() {
$.ajax({
type:"get",//get방식으로 전송
dataType:"text",//응답 데이터를 텍스트로 지정
async:false,//false인 경우 동기식으로 처리
url:"http://localhost:8091/pro16/ajaxTest1",//전송할 서블릿 지정
data:{param:"Hello,jquery"},//서버로 보낼 매개변수와 값을 설정
//전송과 응답이 성공했을 경우의 작업을 설정
success:function(data,textStatus){
//서버 응답 메시지를 <div> 엘리먼트에 표시
$('#message').append(data);
},
//작업 중 오류가 발생했을 경우에 수행할 작업을 설정
error:function(data,textStatus){
alert("에러가 발생했습니다.");
},
//완료 시 수행할 작업을 설정
complete:function(data,textStatus){
alert("작업을 완료했습니다.");
}
});
}
</script>
</head>
<body>
<input type="button" value="전송하기" onclick="fn_process()"><br><br>
<div id="message"></div>
</body>
</html>
|
cs |
ajax1.html은 위와 같이 생성한다.
제이쿼리 Ajax 기능을 이용하여 서블릿에 매개변수 이름을 param으로 "Hello, jquery"를 서버로 전송하면 서버로부터 받은 메시지를 id가 message인 <div> 태그에 표시한다.
전송하기를 클릭하면 설정했던 alert 창이 뜨고 서버에서 ajax로 전송된 데이터가 <div> 엘리먼트에 표시된다.
서버의 서블릿에서는 ajax로 전달된 매개변수 값을 콘솔로 출력한다.
XML 데이터 연동하기
이번에는 Ajax 응답시 정보를 XML로 전달받아 출력하는 예제다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
@WebServlet("/ajaxTest2")
public class AjaxTest2 extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request,response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
String result = "";
PrintWriter writer = response.getWriter();
//정보를 XML로 작성한 후 클라이언트로 전송
result="<main><gorani>"+
"<title><![CDATA[고라니1]]></title>"+
"<writer><![CDATA[고라니 사진1]]></writer>"+
"<image><![CDATA[http://localhost:8093/pro16/image/gorani.png]]></image>"+
"</gorani><gorani>"+
"<title><![CDATA[고라니2]]></title>"+
"<writer><![CDATA[고라니 사진2]]></writer>"+
"<image><![CDATA[http://localhost:8093/pro16/image/gorani2.jpg]]></image>"+
"</gorani></main>";
System.out.println(result);
writer.print(result);
}
}
|
cs |
<title>, <writer>, <image> 태그를 이용해 정보를 XML 형식으로 작성한 후 브라우저로 전송한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process() {
$.ajax({
type:"post",
async:false,
url:"http://localhost:8093/pro16/ajaxTest2",
dataType:"xml", //데이터를 XML 형식으로 받음
success:function (info,textStatus){
//gorani 태그 안의 정보들 조회
$(info).find("gorani").each(function(){
//전송된 XML 데이터에서 엘리먼트 이름으로 데이터를 가져옴
var title=$(this).find("title").text();
var writer=$(this).find("writer").text();
var image=$(this).find("image").text();
//id가 goraniInfo인 <div> 엘리먼트에 정보 표시
$("#goraniInfo").append(
"<p>" + title + "</p>" +
"<p>" + writer + "</p>" +
"<img src="+ image + " />"
);
});
},
error:function(data,textStatus){
alert("에러가 발생했습니다.");
},
complete:function(data,textStatus){
alert("작업을 완료했습니다.");
}
});
}
</script>
</head>
<body>
<div id="goraniInfo"></div>
<input type="button" value="전송하기" onclick="fn_process()"><br><br>
</body>
</html>
|
cs |
브라우저에서는 XML 데이터를 받은 후 제이쿼리의 find() 메서드에 <title>, <writer>, <image> 태그 이름으로 호출하여 각각의 정보를 가져온다.
그럼 이렇게 입력한 정보가 출력된다.
ID 중복 여부 확인하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
@WebServlet("/mem")
public class MemberServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request,response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
String id = request.getParameter("id");
System.out.println("id = "+id);
MemberDAO dao = new MemberDAO();
//ID 중복 여부를 체크
boolean overlappedID = dao.overlappedID(id);
//결과를 메시지로 전송
if (overlappedID == true) {
writer.print("not_useable");
}else {
writer.print("useable");
}
}
}
|
cs |
위와 같이 서블릿 클래스를 작성한다. 클라이언트에서 Ajax로 전송된 ID를 받아서 MemberDAO의 orverlappedID()메서드로 전달한다. 그리고 그 결과를 이용해서 클라이언트에게 다른 메시지를 전달한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
public class MemberDAO {
private static MemberDAO instance = new MemberDAO();
//객체 리턴
public static MemberDAO getInstance() {
return instance;
}
//DBCP객체 리턴
public Connection getConnection() throws Exception {
Context ctx = new InitialContext();
DataSource ds = (DataSource) ctx.lookup("java:/comp/env/jdbc/oracle");
return ds.getConnection();
}
public boolean overlappedID(String id) {
Connection con = null;
PreparedStatement pstmt = null;
//decode 함수를 이요해 ID가 존재하면 true, 그렇지 않으면 false를 문자열로 조회
String query = "select decode(count(*),1,'true','false')as result from t_member where id=?";
ResultSet rs = null;
boolean result = false;
try {
con = getConnection();
System.out.println(query);
pstmt = con.prepareStatement(query);
pstmt.setString(1, id);
rs = pstmt.executeQuery();
if (rs.next()) {
//문자열을 불린 자료형으로 변환
result = Boolean.parseBoolean(rs.getString("result"));
pstmt.close();
}
} catch (Exception e) {
e.printStackTrace();
}
return result;
}
}
|
cs |
MemberDAO를 위와 같이 작성한다. 서블릿에서 전달된 ID를 SQL문의 조건식에 설정한 후 ID에 대한 회원 정보를 조회하여 그 결과를 true 혹은 false로 반환한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process() {
var _id = $("#t_id").val();//텍스트 박스에 입력한 ID를 가져옴
if (_id == '') {
alert("ID를 입력하세요");
return;
}
$.ajax({
type: "post",
async: true,
url: "http://localhost:8094/pro16/mem",
dataType: "text",
data: {id: _id},//ID를 서블릿으로 전송
success: function (data,textStatus) {
//서버에서 전송된 결과에 따라 메시지 표시
if (data == 'useable') {
$('#message').text("사용할 수 있는 ID입니다.");
//사용 가능한 ID면 버튼 비활성화 시킴
$('#btn_duplicate').prop("disabled",true);
}else{
$('#message').text("사용할 수 없는 ID입니다.");
}
},
error: function (data,textStatus) {
alert("에러가 발생했습니다.");
},
complete: function (data,textStatus) {
alert("작업을 완료했습니다.");
}
});
}
</script>
</head>
<body>
<input type="text" id="t_id">
<input type="button" id="btn_duplicate" value="ID 중복체크하기" onclick="fn_process()"><br><br>
<div id="message"></div>
</body>
</html>
|
cs |
ID 중복 체크하기를 클릭하면 텍스트 박스에 입력한 ID를 val() 메서드로 가져와 ajax를 이용하여 서블릿으로 전송한다. 그러면 서블릿에서 결과를 전달받아 화면에 표시한다.
제이쿼리에서 JSON 사용하기
PC 브라우저와 서버, Ajax를 연동할 때는 XML 형식으로 데이터를 주고받는다. 모바일에서도 서버와 Ajax로 연동해 작업을 많이 하지만, 자원이 열악한 모바일 환경은 속도 면에서 불리하다. 따라서 모바일에서는 대부분 XML보다 형식이 단순한 JSON으로 데이터를 주고받는다.
JSON은 name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식이다.
근본은 자바스크립트에서 파생된 것이어서 자바스크립트의 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이어서 쉽게 사용할 수 있다.
JSON의 다른 자료형의 경우 익숙할 것이고, 기억할 것은 객체의 표현이다. JSON 객체는 {}로 둘러싸서 표현하며, 콤마(,)를 사용하여 여러 프로퍼티를 포함할 수 있다.
{"name":홍길동", "age":"27"}
JSON 배열의 예시도 하나 들자면 아래는 배열 이름이 members이고, JSON 객체를 배열 요소로 가지는 배열 예시다.
"members":[
{"name":"홍길동","age":"22"},
{"name":"홍길순","age":"54"},
{"name":"홍길자","age":"78"}
]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
//이름을 저장하는 JSON 배열을 name으로 선언
var jsonStr = '{"name":["홍길동","이순신","임꺽정"]}';
//제이쿼리의 JSON 기능인 parse() 메서드를 이용해 JSON 자료형을 가져옴
var jsonInfo = JSON.parse(jsonStr);
var output = "회원 이름<br>";
output += "=======<br>";
//배열 이름 name으로 배열 요소에 반복 변수를 이용해 차례로 접근하여 값을 가져옴
for (var i in jsonInfo.name) {
output += jsonInfo.name[i] + "<br>";
}
//회원 이름을 출력
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
|
cs |
위는 문자열 자료형을 배열에 저장한 후 웹 페이지에서 출력하는 예제다.
출력을 누르면 입력한 문자열들이 출력되는 것을 확인할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
//정수형 데이터를 가지는 이름이 age인 배열을 선언
var jsonStr = '{"age":[22, 33, 44]}';
//parse()메서드로 배열을 구함
var jsonInfo = JSON.parse(jsonStr);
var output = "회원 이름<br>";
output += "=======<br>";
//배열 요소인 나이를 차례로 출력
for (var i in jsonInfo.age) {
output += jsonInfo.age[i] + "<br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
</html>
|
cs |
위는 정수 자료형을 배열로 저장한 후 화면에 출력하는 예제이다.
위와 같이 출력된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
var jsonStr = '{"name":"홍길돌","age":"25","gender":"남자","nickname":"홍"}';
//parse()메서드로 JSON 데이터 가져옴
var jsonObj = JSON.parse(jsonStr);
var output = "회원 정보<br>";
output += "=======<br>";
//문자열에서 JSON 객체의 속성을 가져옴
output += "이름: "+jsonObj.name+"<br>";
output += "나이: "+jsonObj.age+"<br>";
output += "성별: "+jsonObj.gender+"<br>";
output += "별명: "+jsonObj.nickname+"<br>";
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
</html>
|
cs |
위의 예제는 JSON 객체에 회원 정보를 저장한 후 다시 회원 정보를 출력하는 예제다.
이렇게 출력된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
//members 배열에 회원 정보를 객체의 name/value 쌍으로 저장
var jsonStr =
'{"members":[{"name":"홍길동","age":"25","gender":"남자","nickname":"홍"}'
+ ',{"name":"홍길순","age":"21","gender":"여자","nickname":"홍2"}]}';
//parse()메서드로 JSON 데이터 가져옴
var jsonInfo = JSON.parse(jsonStr);
var output = "회원 정보<br>";
output += "=======<br>";
for(var i in jsonInfo.members){
//문자열에서 JSON 객체의 속성을 가져옴
output += "이름: "+jsonInfo.members[i].name+"<br>";
output += "나이: "+jsonInfo.members[i].age+"<br>";
output += "성별: "+jsonInfo.members[i].gender+"<br>";
output += "별명: "+jsonInfo.members[i].nickname+"<br><br><br>";
}
$("#output").html(output);
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
</html>
|
cs |
위의 예제는 JSON 배열의 요소에 JSON 객체를 저장한 후 다시 배열에 접근하여 JSON 객체의 속성 값을 출력하는 예제다.
출력 결과는 위와 같다.
Ajax를 이용해 서버와 JSON 데이터 주고받기
이번에 알아볼 것은 서버의 서블릿과 JSON 자료를 주고받는 기능으로 서버의 서블릿에서 JSON을 사용하기 위해서는 JSON 라이브러리를 설치해야 한다.
https://code.google.com/archive/p/json-simple/downloads
Google Code Archive - Long-term storage for Google Code Project Hosting.
code.google.com
위의 링크에서 json-simple-1.1.1.jar를 다운받고 lib에 넣는다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
@WebServlet("/json")
public class JsonServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
//문자열로 전송된 JSON 데이터를 getParameter()를 이용해 가져옴
String jsonInfo = request.getParameter("jsonInfo");
try {
//JSON 데이터를 처리하기 위해 JSONParser 객체를 생성
JSONParser jsonParser = new JSONParser();
//전솓왼 JSON 데이터를 파싱
JSONObject jsonObject = (JSONObject) jsonParser.parse(jsonInfo);
System.out.println("* 회원 정보 *");
//JSON 데이터의 name 속성들을 get()에 전달하여 value를 출력
System.out.println(jsonObject.get("name"));
System.out.println(jsonObject.get("age"));
System.out.println(jsonObject.get("gender"));
System.out.println(jsonObject.get("nickname"));
} catch (Exception e) {
e.printStackTrace();
}
}
}
|
cs |
서블릿 클래스를 위와 같이 작성한다.
먼저 Ajax로 전달된 JSON 문자열을 getParameter() 메서드를 통해서 가져오고, JSONParser 클래스의 parse() 메서드를 이용해 JSONObject를 가져오고 JSON 데이터의 name 속성으로 value를 출력한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="${pageContext.request.contextPath}" var="contextPath"/>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
//전송할 회원 정보를 JSON 형식으로 만든다.
var _jsonInfo = '{"name":"홍길동","age":"25","gender":"남자","nickname":"홍"}';
$.ajax({
type: "post",
async: false,
url:" ${contextPath}/json",
//매개변수 이름 jsonInfo로 JSON 데이터를 ajax로 전송
data: {jsonInfo: _jsonInfo},
success: function (data, textStatus) {
},
error: function (data, textStatus) {
alert("에러가 발생했습니다.");
},
complete: function (data, textStatus) {
alert("작업을 완료했습니다.");
}
});//end ajax
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
</html>
|
cs |
자바스크립트에서 회원 정보를 JSON 객체로 만들어 매개변수 이름 jsonInfo로 ajax를 통해 서블릿으로 전송한다.
그럼 웹 페이지에서 출력을 누르면 ajax를 통해서 서블릿으로 전달된 정보가 위와 같이 콘솔 창에 표시된다.
아래의 예제는 서버의 서블릿에서 웹 페이지로 JSON 형식의 회원정보를 전송하는 예제이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
@WebServlet("/json2")
public class JsonServlet2 extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
JSONObject totalObject = new JSONObject();//배열을 저장할 totalObject 선언
JSONArray membersArray = new JSONArray();//memberInfo JON 객체를 저장할 배열을 선언
JSONObject memberInfo = new JSONObject();//회원 한 명의 정보가 들어갈 memberInfo JSON 객체 선언
//회원 정보를 name/value 쌍으로 저장
memberInfo.put("name", "홍길동");
memberInfo.put("age", "25");
memberInfo.put("gender", "남자");
memberInfo.put("nickname", "홍1");
//회원 정보를 배열에 저장
membersArray.add(memberInfo);
memberInfo = new JSONObject();
memberInfo.put("name", "홍길순");
memberInfo.put("age", "22");
memberInfo.put("gender", "여자");
memberInfo.put("nickname", "홍2");
membersArray.add(memberInfo);
//totalObject에 members라는 name으로 memberArray를 value로 저장
totalObject.put("members", membersArray);
String jsonInfo = totalObject.toJSONString();//문자열로 변환
System.out.println(jsonInfo);
writer.print(jsonInfo);//JSON 데이터를 브라우저로 전송
}
}
|
cs |
JSON 배열에 회원 정보를 저장해서 JSP 페이지로 전송하고, JSON 배열에 정보를 저장하는 과정은 위와 같다.
오브젝트 객체를 생성해 정보들을 담고 이들을 다시 배열에 정장한 후 이 배열들을 담을 또 다른 오브젝트 객체를 생성한다. 이 오브젝트 객체의 name에는 자바스크립트에서 접근할 때 사용하는 이름인 members를 주고, value에는 회원 정보 객체가 담긴 배열을 저장한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="${pageContext.request.contextPath}" var="contextPath"/>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
$.ajax({
type: "post",
async: false,
url: "${contextPath}/json2",
success: function (data, textStatus) {
//서버에서 전송한 JSON 데이터 파싱
var jsonInfo = JSON.parse(data);
var memberInfo = "회원정보<br>";
memberInfo += "========<br>";
//배열 이름 members로 각 배열 요소에 접근한 후 name으로 value를 출력
for(var i in jsonInfo.members){
memberInfo += "이름: "+jsonInfo.members[i].name+"<br>";
memberInfo += "나이: "+jsonInfo.members[i].age+"<br>";
memberInfo += "성별: "+jsonInfo.members[i].gender+"<br>";
memberInfo += "닉네임: "+jsonInfo.members[i].nickname+"<br><br><br>";
}
$("#output").html(memberInfo);
},
error: function (data, textStatus) {
alert("에러가 발생했습니다.");
},
complete: function (data, textStatus) {
alert("작업을 완료했습니다.");
}
});//end ajax
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
</html>
|
cs |
JSP 페이지는 위와 같이 작성한다. 버튼을 클릭하면 서블릿에서 만든 JSON 데이터를 전달받아 출력하는 것을 확인할 수 있다.
아래는 마지막 예제로 여러 개의 배열을 JSON으로 전달하는 예제다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
@WebServlet("/json3")
public class JsonServlet3 extends HttpServlet{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter writer = response.getWriter();
JSONObject totalObject = new JSONObject();//배열을 최종적으로 저장할 totalObject 선언
JSONArray membersArray = new JSONArray();
JSONObject memberInfo = new JSONObject();
//회원 정보를 name/value 쌍으로 저장
memberInfo.put("name", "홍길동");
memberInfo.put("age", "25");
memberInfo.put("gender", "남자");
memberInfo.put("nickname", "홍1");
membersArray.add(memberInfo);//회원 정보를 배열에 저장
memberInfo = new JSONObject();
memberInfo.put("name", "홍길순");
memberInfo.put("age", "22");
memberInfo.put("gender", "여자");
memberInfo.put("nickname", "홍2");
membersArray.add(memberInfo);
totalObject.put("members", membersArray);//회원 정보 저장
//고라니 정보들을 담을 객체들 생성
JSONArray goraniArray = new JSONArray();
JSONObject goraniInfo = new JSONObject();
goraniInfo.put("name", "고라니1");
goraniInfo.put("type", "초식동물");
goraniInfo.put("image", "http://localhost:8094/pro16/image/gorani.png");
goraniArray.add(goraniInfo);
goraniInfo = new JSONObject();
goraniInfo.put("name", "고라니2");
goraniInfo.put("type", "초식동물2");
goraniInfo.put("image", "http://localhost:8094/pro16/image/gorani2.jpg");
goraniArray.add(goraniInfo);
totalObject.put("goranis", goraniArray);//고라니 정보 저장
String jsonInfo = totalObject.toJSONString();//문자열로 변환
System.out.println(jsonInfo);
writer.print(jsonInfo);//JSON 데이터를 브라우저로 전송
}
}
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="${pageContext.request.contextPath}" var="contextPath"/>
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function (){
$("#checkJson").click(function (){
$.ajax({
type: "post",
async: false,
url: "${contextPath}/json3",
success: function (data, textStatus) {
//서버에서 전송한 JSON 데이터 파싱
var jsonInfo = JSON.parse(data);
var memberInfo = "회원정보<br>";
memberInfo += "========<br>";
//배열 이름 members로 각 배열 요소에 접근한 후 name으로 value를 출력
for(var i in jsonInfo.members){
memberInfo += "이름: "+jsonInfo.members[i].name+"<br>";
memberInfo += "나이: "+jsonInfo.members[i].age+"<br>";
memberInfo += "성별: "+jsonInfo.members[i].gender+"<br>";
memberInfo += "닉네임: "+jsonInfo.members[i].nickname+"<br><br><br>";
}
var goraniInfo = "<br><br><br>고라니 정보<br>";
goraniInfo += "========<br>";
for(var i in jsonInfo.goranis){
goraniInfo += "이름: "+jsonInfo.goranis[i].name+"<br>";
goraniInfo += "나이: "+jsonInfo.goranis[i].type+"<br>";
//이미지 URL을 구해 <img> 태그의 src 속성에 설정
imageURL = jsonInfo.goranis[i].image;
goraniInfo += "<img src=" + imageURL + " />"+"<br><br><br>";
}
$("#output").html(memberInfo+"<br>"+goraniInfo);
},
error: function (data, textStatus) {
alert("에러가 발생했습니다.");
},
complete: function (data, textStatus) {
alert("작업을 완료했습니다.");
}
});//end ajax
});
});
</script>
</head>
<body>
<a id="checkJson" style="cursor: pointer;">출력</a>
<div id="output"></div>
</body>
</html>
|
cs |
위와 같이 여러 배열들을 받아서 아래와 같이 출력시킬 수 있다.
728x90