16.1 HTML5 주요 개념
16.2 HTML5 시맨틱 웹을 위한 구성 요소
16.3 제이쿼리 주요 개념
16.4 제이쿼리의 여러 가지 기능
16.5 제이쿼리 Ajax 기능
16.6 제이쿼리에서 JSON 사용하기
16.1 HTML5 주요 개념
622p
웹 브라우저는 html, css, 자바스크립트로 이루어진 구문만 인식하여 화면에 나타냄,
jsp는 html을 좀 더 동적으로 구현하기 위해 도입된 기능임
html 기능도 꾸준이 업그레이드 되었고, 최신 버전은 html5임
16장에서는 jsp에서 사용되는 html5의 기능과 자바스크립트 기반의 제이쿼리(jQuery)에 대해 살펴보자.
html5는 기존 html4에서는 지원하지 않았던 동영상, 오디오 기능, 지리 위치 정보 등을 지원,
플러그인 별도 설치 없이도 화려한 그래픽 효과 구현, 운영체제에 상관없이 스마트폰, 모바일 환경에서도 기능 구현 가능
▼HTML5의 여러 가지 기능
| 기능 | 설명 |
| Web Form | 입력 형태를 보다 다양하게 제공함 |
| Video | 동영상 재생을 위한 API를 제공함 |
| Audio | 음성 재생을 위한 API를 제공함 |
| Offline Web | 인터넷 연결이 되지 않은 상태에서도 정상적인 기능을 지원하는 API를 제공함 |
| Web Database | 표준 SQL을 사용해 데이터를 저장할 수 있는 기능을 제공함 |
| Web Strorage | 웹 애플리케이션에서 데이터를 저장할 수 있는 기능을 제공함 |
| Canvas | 2차원 그래픽 그리기 및 객체에 대한 각종 효과를 주는 기능을 제공함 |
| SVG | XML 기반 2차원 벡터 그래픽을 표현하기 위한 SVG 언어를 지원함 |
| Geolocation | 디바이스의 지리적 위치 정보를 가져오는 기능을 제공함 |
| Web Worker | 웹 애플리케이션을 위한 스레드 기능을 제공함 |
| Web Socket | 웹 애플리케이션과 서버 간의 양방향 통신 기능을 제공함 |
| CSS3 | 웹 애플리케이션의 다양한 스타일 및 효과를 나타내기 위한 CSS3를 제공함 |
문서구조도 html4에 비해 간단해짐
16.2 HTML5 시맨틱 웹을 위한 구성 요소
624p
시맨틱 웹(Semantic Web)
: 기계가 이해할 수 있고 처리할 수 있는 웹 컨텐츠를 만드는 것, www의 창시자인 팀 버너스 리에 의해 개발되고 정의된 개념임.
HTML5에 추가된 웹 페이지 구조 관련 태그
html4 - 웹 페이지 구조에 해당하는 머리말, 메뉴, 본문, 하단부를 만들 때 <div> 태그에 css를 적용하는 방식으로 작업
-> <div> 태그만 봐서는 의미를 잘 알수 없다는 문제가 있었음
html5 - 이 문제를 보안하기 위해 의미 있는 구조를 나타낼 수 있는 태그들을 추가하여 가독성을 높였음
▼ HTML5에 추가된 여러 가지 태그
| 태그 | 설명 |
| <header> | 머릿말을 나타내는 태그 |
| <hgroup> | 제목과 부제목을 묶는 태그 |
| <nav> | 메뉴 부분을 나타내는 태그 (navigator) |
| <section> | 제목별로 나눌 수 있는 태그 (화면 내 소제목) |
| <article> | 개별 컨텐츠를 나타내는 태그 (소제목 내 단락 하나하나) |
| <aside> | 왼쪽 또는 오른쪽에 위치하는 사이드바를 나타내는 태그 |
| <footer> | 하단에 정보를 표시하는 태그 |
<div class="header" > -> <header> 등
[ section1.html ]
<body>
<section> <!-- 큰 단락 -->
<h1>기사 제목1</h1>
<p>첫번째 기사 내용입니다.</p>
</section>
<section> <!-- 큰 단락 -->
<h1>기사 제목2</h1>
<p>두번째 기사 내용입니다.</p>
</section>
</body><section> 태그를 이용하여 컨텐츠를 주제별로 큰 단락으로 나눌 수 있음
[ section2.html ]
<body>
<section> <!-- 큰 단락 -->
<article> <!-- 작은 단락 -->
<h1>기사 제목1</h1>
<p>첫번째 기사 내용입니다.</p>
</article>
<article> <!-- 작은 단락 -->
<h1>기사 제목2</h1>
<p>두번째 기사 내용입니다.</p>
</article>
</section>
</body><section> 태그 안에 <article> 태그를 사용하여 <section> 태그 내 컨텐츠를 구분하여 나눌 수 있음
[ section3.html ]
<body>
<header> // 로고나 메뉴를 표시함
<h1>HTML5 강좌를 시작합니다</h1>
</header>
<nav> // 상단의 내비게이션 메뉴를 표시함
<ul>
<li>1. 개념 익히기</li>
<li>2. 문법 익히기</li>
<li>3. 실전 응용하기</li>
</ul>
</nav>
<aside> // 사이드 메뉴를 표시함
사이드 메뉴
</aside>
<section> // 본문을 표시함
<article>
<h1>첫번째 강좌 제목</h1>
<p>첫번째 강좌 내용</p>
</article>
<article>
<h1>두번째 강좌 제목</h1>
<p>두번째 강좌 내용</p>
</article>
</section>
<aside> // 퀵 메뉴를 표시함
퀵메뉴
</aside>
<footer> // 하단 정보를 표시함
프로그래밍 강의 Copyright All right reserved.
</footer>
</body><header> : 로고나 메뉴를 표시함
<nav> : 상단의 내비게이션 메뉴를 표시함
<aside> : 사이드메뉴 or 퀵 메뉴를 표시함
<section> : 본문을 표시함
<footer> : 하단 정보를 표시함
=> 레이아웃이 적용되지 않았음
[ section4.html ]
<head>에서 <style> 태그를 이용해 각 html 태그에 css 속성을 적용하여 레이아웃을 구성함
16.3 제이쿼리 주요 개념
631p
제이쿼리란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리임. 제이쿼리는 여러 가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용함.
제이쿼리의 주요 특징
- CSS 선택자(태그 선택자(태그이름), 클래스 선택자( . ), id 선택자(#) 등)를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하고 읽기 쉽게 표현됨
- 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 불필요한 코드의 반복을 피할 수 있음
- 풍부한 플러그인을 제공함
- 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행함
제이쿼리 사용하는 방법
1. www.jquery.com 에서 라이브러리를 다운로드하여 여 사용
2. 네트워크로 CDN 호스트를 설정해서 사용
* 컨텐츠 전송 네트워크(Contents Delivery Network, CDN)
지리적으로 각 위치에 분산되어있는 서버들이 그룹을 이루어 인터넷 상의 컨텐츠를 빠르게 전송하는 기능을 수행하는 것을 말함. 이런 CDN 서비스는 HTML 페이지, 자바스크립트 파일, CSS 스타일 시트, 이미지, 비디오 등 인터넷 컨텐츠를 신속하게 전송할 수 있으므로 대부분의 웹 서비스 회사들이 자신들의 웹 트래픽을 CDN으로 전송하고 있음.
CDN은 캐싱(caching)의 원리를 활용하여 기존 웹 호스팅 사의 인터넷 트래픽을 절감하고 서비스 중단을 방지하는 동시에 보안도 증진시키는 최적의 솔루션임.
출처 https://blog.naver.com/dhkwak1015/221202560669
HTML이나 JSP에서 제이쿼리 CDN 호스트를 설정하는 방법
jquery-2.2.1.min.js"></script>
: 지정한 버전의 제이쿼리를 사용함
jquery-latest.min.js"></script>
: 가장 최신 버전의 제이쿼리를 사용함
16.4 제이쿼리의 여러 가지 기능
632p
제이쿼리는 CSS 선택자를 이용해 HTML 객체(DOM)을 탐색함
제이쿼리의 선택자 종류와 이를 표현하는 방법을 알아보자.
▼제이쿼리의 여러 가지 선택자
| 선택자 종류 | 선택자 표현 방법 | 설명 |
| All selector | $(" * ") | 전체 선택자, 모든 DOM을 선택함 |
| ID selector | $("#id") | ID 선택자, 해당되는 id를 갖는 DOM을 선택함 |
| Element selector | $("elementName") | 태그 선택자, 해당되는 이름을 갖는 DOM을 선택함 |
| class selector | $(".className") | 클래스 선택자, CSS 중 해당되는 클래스 이름을 갖는 DOM을 선택함 |
| Multiple selector | $("selector1, selector2,..., selectorN") | 다중 선택자, 해당되는 선택자를 갖는 모든 DOM을 선택함 |
보통 $("선택자").동작함수(); 형태로 사용함
$() 함수
$() 함수는 선택된 html 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해줌
인수로 html 태그이름, css 선택자 등을 사용할 수 있으며 $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 함
출처 https://choseongho93.tistory.com/213
제이쿼리 선택자 사용 실습
[ jQuery1.html ]
페이지 로드 시, $("#unique2") -> id가 unique2인 태그를 웹페이지에서 검색하여 id에 해당하는 태그(객체)를 얻은 후, 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻음
...
<script src="html://code.jquery.com/jquery-latest.min.js"></script> <!-- 제이쿼리 사용 위해 필수로 설정해야함-->
<script type="text/javascript">
$(document).ready(function () {
alert($("#unique2").html());
});
</script>
...
<div class="class1">안녕하세요</div>
<div id="unique2">제이쿼리입니다</div> <!--id가 unique2 -->
<div id="unique3">
<p>제이쿼리는 아주 쉽습니다</p>
</div>=>
화면에 div 태그 내용 세개가 다 표시되고,
이후 id가 unique2인 div의 내용이 html() 메서드에 의해 가져와져서 alert() 의 내용으로 들어감
*** $(document).ready(function() { // jQuery 메서드 }) = $(function(){ })
: 자바스크립트의 DOM 트리가 준비되었을 때의 시점을 컨트롤하는 메서드.
제이쿼리를 사용하기 위한 기본. 제이쿼리는 이 코드로 시작됨.
자바스크립트에서 document.onload와 같다고 생각하면 됨.
html 소스를 다 뿌려준 다음에 실행됨(= 'html 문서가 로딩이 되면' 과 같음)
window.onload = function() { } 의 경우, 전체 페이지의 모든 외부 리소스와 이미지가 브라우저에 뿌려진 후에 작동하므로 이미지가 안뜨거나 딜레이가 발생할 경우 대기해야하고, 외부링크나 파일을 include 시 그 안에 중복으로 window.load()가 존재하면 둘 중 하나만 적용되는 사태가 발생함
그리고 body onload와 같이 사용되면 window.onload는 실행되지 않으므로 $(document).ready() 함수를 사용함.
이는 외부 라이브러리나 이미지와 상관없이 DOM 데이터 로드 시 바로 실행이 가능하며 window.onload() 보다 더 빨리 실행되며 여러번 사용되어도 선언순서에 따라 순차적으로 실행됨.
참고로 document.ready()가 먼저 실행되고 -> window.load()가 실행됨
출처
https://theqoop.tistory.com/295
https://bogyum-uncle.tistory.com/206
[Javascript] onload, ready
1. onload VS ready 1.1. onload 1.1.1 onload (JavaScript) 문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트 - DOM의 standard 이벤트로, html의 로딩이 끝난 후에 시작. 화면에 필요한 모든 요소
bogyum-uncle.tistory.com
*** html()
선택한 요소 안의 내용을 가져오거나 다른 내용으로 바꿈
var jb = $('h1').html(); // h1 요소의 내용을 가져와 변수 jb에 저장함
$('div').html('<h1>abdc</h1>'); // div 요소의 내용을 <h1>abcd</h1>으로 바꿈
출처 https://www.codingfactory.net/10324
[ jQuery2.html ]
제이쿼리의 id 선택자를 이용해 해당 id를 갖는 <p> 엘리먼트에 접근하여 동적으로 텍스트를 추가해보자
자바스크립트로 function addHtml()을 정의함, id가 article인 요소를 찾아서, html 태그에 의해 내용이 '안녕하세요'</br>로 수정되는 함수임
body에 p 태그의 id가 article로 설정되어 있고,
아래에 input type이 button인 '추가하기' 가 있는데, onClick="addHtml()" 이벤트가 설정되어있음
=> 브라우저 화면에서 '추가하기' 버튼을 클릭 시(onClick) addHtml() 함수에 의해 p 태그에 내용이 추가되어 '안녕하세요' 라는 내용이 버튼 위에 나타남
[ jQuery3.html ]
class 선택자로 <div> 태그에 접근하여 이미지를 나타내는 기능을 수행해보자
자바스크립트로 function addImage() 함수를 정의함, 클래스 선택자가 class1 인 태그에 접근하여 html() 메서드로 "<img src='../image/duke.png'>" 내용을 추가해줌
body에는 class 이름이 class1인 div 태그 2개와 onClick="addImage()" 이벤트가 설정된 '이미지 추가하기' button이 있음
=> '이미지 추가하기' 버튼을 클릭하게 되면 div 태그 2개에 addImage() 함수로 인해 <img> 태그가 추가되어 본문에 이미지 2개가 나타나게됨.
[ jQuery4.html ]
제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가해보자
$( ) 에 다른 선택자 대신 태그 이름 바로 써줌
-> $("div").html("<img ~~~>")
[ jQuery5.html ]
사용자가 텍스트박스(input type="text")에 입력한 내용을 제이쿼리의 id선택자를 이용해 가져와(val() 메서드 이용) 다른 텍스트 박스에 출력(val(value) 메서드 이용)
자바스크립트에서 fn_process() 정의, 아이디가 t_input인 태그에서 val() 을 이용해 input 태그의 value를 가져와 변수 value에 저장, 아이디가 t_output인 태그에 val(value) 메서드를 이용해 value값을 인자인 변수 'value' 내용으로 설정함
body에는 id가 t_input인 input 텍스트 박스와 onClick="fn_process"가 설정된 '입력하기' 버튼, id가 t_output인 disabled 텍스트박스가 있음.
=> 텍스트박스에 내용을 입력한 후 '입력하기' 버튼을 누르면 아래 disabled 텍스트박스에 입력한 내용이 표시됨
*** html() , text(), val() 의 차이
$(선택자).html() : 선택자 하위의 자식태그들을 태그, 문자열 관계없이 싹 다 가져옴 ('<span>안녕하세요</span>' 가져옴 )
$(선택자).text() : 선택자 하위의 자식태그들의 문자열까지만 가져옴(문자열인 '안녕하세요' 만 가져옴)
$(선택자).val() : input 태그에 정의된 value의 값을 가져옴
출처 https://yulfsong.tistory.com/37
16.5 제이쿼리 Ajax 기능
638p
일반적으로 회원가입 창에서 id 중복여부 체크 시 회원가입 페이지는 브라우저에 표시된 채 id 중복 여부 체크하는 창만 서버에 질의하여 따로 보여줌
이처럼 클라이언트 측에서의 작업과는 상관없이 비동기적으로 서버와 작업을 수행할 때 Ajax 기능을 사용함
Ajax는 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로, 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 xml이나 json 데이터를 주고받는 기술을 의미함
Ajax를 이용하면 페이지 이동 없이 데이터 처리가 가능, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있음
기존 웹 페이지 처리 방식
클라이언트 - 요청 페이지에서 개인 정보 입력 후 서버에 요청
> 웹 서버 - 요청 받음 > 요청 처리(JSP/ASP/~) > html 생성 > 클라이언트 브라우저로 전송
> 클라이언트 - 결과 페이지가 보여짐(페이지 이동이 일어남)
Ajax를 이용한 페이지 처리 방식
서버 - 요청페이지의 결과를 처리 > 처리된 결과는 XML or JSON 으로 원래 요청 페이지에 전송함(XMLHttpRequest 이용)(페이지 이동 일어나지 않음)
*** 동기(Synchronous) 방식과 비동기(Asynchronous) 방식
동기 방식
- 요청과 결과가 동시에 일어나는 방식으로, 요청을 보낸 후 응답을 받아야 다음 동작이 진행됨
- 요청과 결과가 한 자리에 동시에 나타남. 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 리턴받기 전까지는 다른 것을 하지 못하고 기다려야 함
- 예를 들어, 특정 프로그램을 구동시키는 데에 시간이 5분 소요된다고 하면 이 프로그램이 구동되는 5분 동안 컴퓨터는 다른 프로그램을 동작시키지 못하고 구동되기를 기다려야 함
- 장점 : 설계가 간단하고 직관적임
- 단점 : 요청에 대한 결과가 반환되기 전까지 대기해야 함
비동기 방식
- 요청과 결과가 동시에 일어나지 않는 방식
- 요청한 곳에 결과가 나타나지 않으며, 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 기다리지 않고 다른 것을 수행하거나 서버로 다른 요청을 보낼 수 있음
- 특정 프로그램을 구동시키는 데 시간이 5분 소요되어도 그 시간동안 다른 프로그램을 수행할 수 있음
- 장점 : 요청에 대한 결과가 반환되기 전에 다른 작업을 수행할 수 있어서 자원을 효율적으로 사용할 수 있음
- 단점 : 동기 방식보다 설계가 복잡하고 논증적임
제이쿼리 Ajax 사용법
640p
▼제이쿼리 Ajax 기능 관련 속성들
| 속성 | 설명 |
| type | 통신 타입을 설정함(post 또는 get 방식으로 선택함) |
| async | 비동기식으로 처리할지 여부를 설정함(false이면 동기식으로 처리함) |
| url | 요청할 url을 설정함 |
| data | 서버에 요청할 때 보낼 매개변수를 설정함 |
| dataType | 응답받을 데이터 타입을 설정함(XML, TEXT, HTML, JSON 등) |
| success | 요청 및 응답에 성공했을 때 처리할 구문을 설정함 |
| error | 요청 및 응답에 실패했을 때 처리할 구문을 설정함 |
| complete | 모든 작업을 마친 후 처리할 구문을 설정함 |
제이쿼리에서 Ajax를 사용하려면 $ 기호 다음에 ajax라고 명명 후 위의 표에 있는 속성에 대한 값을 설정하면 됨
$.ajax({
type : "post 또는 get",
async : "true 또는 false",
url : "요청할 url",
data : { 서버로 전송할 데이터 },
dataType : "서버로부터 전송받을 데이터형식",
success : {
//정상 요청, 응답시 처리
},
error : function(xhr, status, error){
//오류 발생 시 처리
},
complete : function (data, textStatus) {
//작업 완료 후 처리
}
});
제이쿼리 Ajax 사용하기
641p
제이쿼리 Ajax를 사용해 서블릿과 비동기 방식으로 데이터를 송수신해보자
- Java Resources/src/sec01.ex01에 AjaxTest1.java, AjaxTest2.java 생성
- WebContent/Image 에 duke.png, duke2.png, image1.jpg, image2.jpg 생성
- WebContent/test03 에 ajax1.html, ajax2.html 생성
[ AjaxTest1.java ]
클라이언트에서 Ajax로 메시지를 보내면 이를 처리하는 서블릿임.
브라우저에서 매개변수 이름인 'param'으로 데이터를 보내면 getParameter() 로 데이터 가져옴, PrintWriter의 print() 메서드의 인자로 응답 메시지를 브라우저에 보냄
// 서블릿 매핑 명 : /ajaxTest1
...
doHandle 중
String param = (String)request.getParameter("param"); // ajax로 전송된 매개변수를 가져옴
...
PrintWriter writer = response.getWriter();
writer.print("안녕하세요 서버입니다"); // PrintWriter의 print() 메서드를 이용해 브라우저에 응답 메시지를 보냄
[ ajax1.html ]
제이쿼리 Ajax 기능을 이용해 서블릿에 매개변수 이름 param으로 "Hello, jquery"를 서버로 전송하면 서버로부터 받은 메시지("안녕하세요 서버입니다")를 id가 message인 <div> 태그에 표시함
<script type="text/javascript">
function fn_process() {
$.ajax({
type:"get",
dataType:"text", //응답받을 데이터 타입 : text
async:false, // 동기식으로 처리
url:"http://localhost8090/pro16/ajaxTest1", // 요청을 전송할 서블릿을 지정
data:{param:"Hello, jquery"}, // 서버로 전송할 매개변수과 값을 지정
success:function(data,textStatus) {
$('#message').append(data); //id가 message인 태그에 'data' 내용을 추가함
},
error:function(data,textStatus) {
alert("에러가 발생했습니다");
},
complete:function(data,textStatus) {
alert("작업을 완료했습니다");
}
});
}
</scipt>
...
<body>
<input type="button" value="전송하기" onClick="fn_process()" /><br><br>
<div id="message"></div>
</body>
=> 브라우저에서 ajax1.html 요청 > '전송하기' 버튼 누르면 fn_process가 실행되며 서버(서블릿 ajaxTest1)에서 ajax로 데이터("안녕하세요 서버입니다")가 전송되어 div 요소에 표시됨
XML 데이터 연동하기
644p
Ajax 응답 시 도서 정보를 XML로 전달받아 출력하는 예제
[ AjaxTest2 클래스 ]
<title>, <writer>, <image> 태그를 이용해 도서 정보를 XML 형식으로 작성한 후 브라우저로 전송함
...
String result = "";
PrintWriter wirter = response.getWriter();
result = "<main><book>" +
"<title><![CDATA[초보자를 위한 자바 프로그래밍]]></title>" +
"<writer><![CDATA[인포북스 저 | 이병승]]></writer>" +
...// 각 <book> 요소는 <title>,<writer>,<image> 속성을 가짐, 총 2개의 <book> 요소를 작성함
*** CDATA 사용 목적
XML에서 파싱할 대상으로 인식하지 하지 않도록 그 구역을 지정해주는 것이 CDATA이다. XML로 파싱을 원하지 않는 구간의 시작에 <![CDATA[ 를 붙여주고, 구간의 끝에 ]]>를 추가하면 해당 구역이 파싱되지 않도록 설정할 수 있다.
[ ajax2.html ]
브라우저 - XML 데이터를 받은 후 제이쿼리의 find() 메서드에 <title>,<writer>,<image> 태그 이름으로 호출하여 각각의 도서 정보를 가져옴
<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:8090/pro16/ajaxTest2",
dataType:"xml", // 서버로부터 xml 형태로 데이터를 받음
success:function(info,textStatus){
$(info).find("book").each(function(){ //서버에서 xml로 넘어온 데이터 'info'에서 찾은 'book' 마다 반복(each())
var title = $(this).find("title").text();
var writer = $(this).find("writer").text();
var image = $(this).find("image").text();
$(#bookInfo).append( // 아래 id가 bookInfo인 div 태그에 추가됨
"<p>" + title + "</p>" +
"<p>" + writer + "</p>" +
"<img src=" + image +" />"
);
}); // each() 끝
}; // success 끝
error:function(data,textStatus){
alert("에러 발생");
},
complete:function(data,textStatus){
//alert("작업 완료");
}
});
}
</script>
...
<body>
<div id="bookInfo"></div>
<input type="button" value="도서정보 요청" onclick="fn_process()">
</body>* success:function(info, textStatus) 에서, info는 응답데이터 자체를 의미함. 즉, /ajaxText2에서 넘어온 XML 데이터를 말함
* $(info).find("book").each(function(){ }); : 응답데이터 info에서 하위요소로 "book"을 찾아서, 모든 book에 대하여 실행함
=> 브라우저에서 '도서정보 요청'을 클릭하면 도서정보(title, writer)와 이미지(image)가 나타남
*** 제이쿼리 - find() 메서드 : 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용
var title = $(this).find("title").text();
= 해당 요소(this)에서 하위요소인 "title"를 찾아서(find()) 문자만 가져옴(text()), 변수 title에 저장함
출처 https://www.codingfactory.net/10203
*** 제이쿼리 - each() 메서드
$.each(object, function(index, item){ });
: object와 배열 모두에서 사용할 수 있는 반복 함수. 배열 등의 객체들을 index를 기준으로 반복할 수 있음
object는 배열 or 객체, function의 index는 그에 대한 index, item은 index에 대한 값을 의미함
$(선택자).each(function(index, item){ });
: index는 말그대로 인덱스를 의미, item은 해당 선택자인 객체를 의미함
item = this와 같은 의미임
출처 https://webclub.tistory.com/455
ID 중복 여부 확인하기
646p
이번에는 Ajax를 이용해 회원가입시 사용자 ID 중복 여부를 판별해보자
sec02.ex01 패키지를 만들고 MemberDAO, MemberServlet 클래스를 만듦,
WebContent/test03에 ajax3.html을 추가함
[ MemberServlet 클래스 ]
클라이언트로부터 Ajax로 전송된 id를 받아서 MemberDAO의 overlappedID() 메서드로 나온 결과를 이용해 클라이언트에게 메시지('not usable' or 'usable')를 전달함
...// 서블릿 매핑 이름 /mem
...
PrintWriter writer = response.getWriter();
String id = (String)request.getParameter("id"); // 클라이언트로부터 전달받은 id를 가져옴
MemberDAO memberDAO = new MemberDAO();
boolean overlappedID = memberBAO.overlappedID(id); // memberDAO의 overlappedID() 메서드로 id 중복체크
if (overlappedID == true) { // 중복체크 결과를 메시지로 전송함
writer.print("not_usable");
} else {
wirter.print("usable");
}
[ MemberDAO ]
서블릿에서 전달된 id로 sql문의 조건식에 설정한 후 id에 대한 회원정보를 조회하여 그 결과를 true 또는 false로 반환함
...
public boolean overlappedID(String id) {
boolean result = false;
...
1) con = dataFactory.getConnection();
2) String query = "select decode(count(*), 1, 'true', 'false') as result from t_member";
query += "where id = ?"; // 물음표가 들어간 쿼리문을 만들어줌
3) pstmt = con.prepareStatement(query);
4) pstmt.setString(1, id);
5) ResultSet rs = pstmt.executeQuery();
6) rs.next();
7) result = Boolean.parseBoolean(rs.getString("result"));
8) pstmt.close()
...
}
1) dataSource를 이용해 DB에 연결함
2) 쿼리문을 작성함
3) prepareStatement() 메서드에 sql문을 전달하여 객체 생성함
4) sql문의 물음표에 값을 채워줌
5) sql문을 실행 -> 결과를 resultset에 저장
6) 결과 읽어옴(결과는 true/false 한 행 뿐이라 while문 안쓰고 바로 next()로 읽어옴)
7) 조회한 결과에서 'result' 컬럼의 값을 String으로 가져와 boolean으로 변환함(String->Boolean으로 형변환, Boolean.parseBoolean(String s) 메서드 이용함, 대소문자 상관없이 입력받은 문자열이 "true"이면 true반환, 나머지 전부 false 반환함)
8) 자원 해제
* JDBC : db에 접근할 수 있도록 java에서 제공하는 API
* DataSource : db와 관계된 커넥션 정보를 담고 있으며 빈으로 등록하여 인자로 넘겨줌, 이 과정을 통해 spring은 DataSource로 DB와의 연결을 획득함+DB Connection pool 사용할 수 있음
* DB와 connection 얻어온 후 Statement 객체를 생성하여 쿼리문을 수행함, PrepareStatement 객체는 Statement와 달리 sql문을 미리 컴파일해놓고 재사용하는 방식이라 더 빠름+인자와 관련된 작업에 특화(매개변수로 ? 사용 등)
* prepareStatement() 메서드에 sql문을 전달하여 PrepareStatement 객체를 생성, executeQuery() 메서드를 통해 sql문을 실행함, select문(조회문)을 처리하여 조회된 목록들은 ResultSet 객체에 담겨 반환됨
[ ajax3.html ]
'ID 중복 체크하기' 를 클릭하면 텍스트박스에 입력한 id를 val() 메서드로 가져와 ajax를 이용해서 서블릿으로 전송함 -> 서블릿에서 결과를 전달받아 화면에 표시함
<script type="text/javascript">
function fn_process() {
var _id = $("t_id").val(); // input 텍스트박스에 입력한 id를 가져옴
if ( _id == '') {
alert("id를 입력하세요"); // 아이디를 입력하지 않으면 오류메세지를 출력함
return; // return 안해주면 alert창 닫고나서 '중복체크하기' 버튼 비활성화 됨
}
$.ajax({
... // /mem으로 요청, 데이터 text로 받음, 서버에 요청시 'id'로 _id(input에서 입력한 id) 보냄,
success: function (data, textStatus) {
// 요청/응답 성공하면(_id 넘겨주고 message 받아왔으면), 받은 message를 data로 함)
if ( data == 'usable' ) { // 서블릿에서 받은 message(data) 가 usable이면 = 중복x
$('#message).text("사용할 수 있는 ID 입니다"); // 아래 id가 message인 div 태그를 괄호 안 내용으로 설정
$('#btn_duplicate').prop("disabled", true);
// id가 btn_duplicate인 input 버튼의 'disabled'' 속성의 값을 'true'로 추가함=input 버튼 비활성화됨 by prop() 메서드
} else {
$('#message').text("사용할 수 없는 ID 입니다");
}
} , // success 끝
...// error, complete은 alert 창으로 에러 발생, 작업 완료 메시지 띄워줌
}); // ajax 끝
}
</script>
...
<body>
<input type="text" id="t_id" />
<input type="button" id="btn_duplicate" value="ID 중복체크" onClick="fn_process()" /><br>
<div id="message"></div>
</body>
=> t_member 테이블에 이미 id 가 hong인 회원이 있음
id 입력창에 아무것도 입력하지 않고 버튼을 누르면 id를 입력하라는 alert창이 뜨고,
hong을 입력하면 버튼 아래에 '사용할 수 없는 id입니다' 라는 내용이 출력되고
테이블에 등록하지 않은 아무 id나 입력 시 중복이 아니므로 '사용할 수 있는 id입니다' 라는 내용이 출력됨
이 중복여부 판단은 ajax를 이용해 요청한 서블릿에서 받아온 데이터를 이용하는데,
1. ajax3.html에서 /mem으로 요청하고,
2. /mem인 MemberServlet은 이를 getParameter()로 넘겨받은 id를 가져와 MemberDAO 객체를 생성해 DAO의 overlappedID() 메서드로 id를 인자로 주어서 중복여부를 확인함
3. MemberDAO의 overlappedID() 메서드는 인자인 id가 table에 존재하면 true (=중복됨), 존재하지 않으면 false (=중복 아님, 사용 가능한 아이디)를 return함
4. 따라서 MemberServlet에서는 메서드의 반환값이 true이면 html로 not_usable을, 반환값이 false이면 usable을 보냄(html로 보낼때는 writer.print() 메서드를 이용함)
5. html에서는 ajax를 이용하여 요청/응답이 성공적으로 이루어졌으면(=success) 받아온 데이터(usable or not_usable)를 if문으로 구분해서 화면에 적당한 문구가 출력되도록 함(body의 div 태그 id를 선택자로 하여 text() 메서드로 해당 div 태그에 문구가 추가되도록 함)
16.6 제이쿼리에서 JSON 사용하기
649p
pc 브라우저와 서버 그리고 Ajax를 연동할 때는 XML 형식으로 데이터를 주고받음
요즘은 모바일에서도 서버와 Ajax로 연동해서 작업을 많이 하는데, XML로 데이터를 주고 받는 경우 내부적으로 여러 단계의 처리과정을 거치게 되므로 자원이 열악한 모바일 환경은 속도 면에서 불리함
=> XML 대신 형식이 단순한 JSON으로 데이터를 주고 받음
JSON (Javascript Object Notation)
name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 사람이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식임. Ajax를 위해 XML을 대체하는 데이터 전송 형식 중 하나.
644페이지에 ajax에서 XML로 데이터를 전달받는 예제가 있음.
근본은 자바스크립트에서 파생된 것이므로 자바스크립트의 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이므로 쉽게 사용할 수 있음
▼JSON의 여러가지 자료형
| 자료형 | 종류 | 예 |
| 수(Number) | 정수 | 76, -234 |
| 실수(고정 소수점) | 3.14, -24.564 | |
| 실수(부동 소수점) | 1.4e24, 6.54e-9, 7.66E-3 | |
| 문자열 | 문자열 | "1234", "true", "사랑", "\"사랑\"" |
| 제어 문자 | \b(백스페이스), \f(폼 피드), \n(개행), \r(캐리지 반환), \t(탭), \"(따옴표), \/(슬래시), \\(역슬래시) |
|
| 배열 | 대괄호[ ] 로 나타냄 배열의 각 요소는 기본 자료형이나 배열, 객체임 각 요소들은 쉼표로 구분함 |
"name":["홍길동","이순신","임꺽정"] // 대괄호 안에 배열 요소를 콤마로 구분해서 나열함 |
| 객체 | JSON 객체는 중괄호{ }로 표현 컴마를 이용해 여러 프로퍼티를 포함할 수 있음 |
{ "name" : "홍길동", "age": 15, "weight" : 67 } // 중괄호 안에 name/value 쌍을 콤마로 구분해서 나열함 |
JSON의 자료형 사용 실습
651p
JSON 자료형을 실제로 사용하여 값을 출력하는 예제를 실습해보자
pro16/WebContent에 test04 폴더를 만들고 json1~4까지 jsp 파을을 생성함
[ json1.jsp ]
<script src="http://code.jquery.com/jquery-lates.min.js"></script> <!-- jquery 사용설정 -->
<script>
$(function () {
S("#checkJson").click( function () { // body의 a 태그(id=checkJson)를 클릭하면
var jsonStr = '{"name":["홍길동","이순신","임꺽정"]}'; // json 문자열인 이 내용을
var jsonInfo = JSON.parse(jsonStr); // javascript 객체로 변환해서
var output = "회원 이름<br>";
output += "============<br>";
for (var i in jsonInfo.name) {
// jsonInfo.name 속성(객체)에 접근해서 열거할 수 있는 개수만큼 반복함
output += jsonInfo.name[i] + "<br>"; // 홍길동~임꺽정까지 다 output에 저장
}
$("#output").html(output); // body의 div(id=output)에 output 내용 설정함
});
});
</script>
...
<body>
<a id="checkJson">출력</a><br>
<div id="output"></div> <!-- 위에서 만든 output 내용 다 출력됨 -->
</body>=>
출력 <- 버튼 클릭하면 아래에 내용 나타남
회원이름
========
홍길동
이순신
임꺽정
*** $(function () { }) 는 $(document).ready(function () { })와 같은 의미. html 문서가 로딩된 후 실행됨
*** jQuery - 클릭이벤트 동적 처리 : $( ).click()
제이쿼리에서 클릭이벤트를 처리할 때 on(), click(), bind(), onclick() 등을 사용할 수 있음
click()은 단순하게 정적페이지에 로드된 요소에 클릭이벤트 처리 시 많이 사용됨. 해당 클릭 이벤트는 동적 처리가 불가능함
클릭되는 대상 = $("선택자")
를 클릭하게 됨 = $("선택자").click();
클릭했을 때 발생할 일들 = $("선택자").click(function () { // 클릭 시 수행될 작업 });
출처 https://www.everdevel.com/jQuery/click/
*** JSON 데이터 파싱
JSON 내장 객체 : 자바스크립트에서 JSON 포맷의 데이터를 간편하게 다루기 위해 제공됨, 자바스크립트 객체와 json 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공함
JSON.parse() : JSON 문자열을 JavaScript 객체로 변환(파싱)함
JSON.stringify() : JavaScript 객체를 JSON 문자열로 변환(파싱)함
예) JSON.parse() 사용
JSON 문자열을 변수 str에 저장
const str = {
"name" : "홍길동",
"age" : 25,
"family" : {"father" : "홍판서", "mother" : "춘섬" },
"hobbies" : ["독서", "도술"]
};
--> JSON.parse() 메서드에 str을 인자로 넘겨 호출하고 결과값을 변수 obj에 저장함
const obj = JSON.parse(srt);
--> console.log(obj) 로 obj 출력해보면
{
name : "홍길동",
age : 25,
family : {
father : "홍판서",
mother : "춘섬"
},
hobbies : [
"독서",
"도술"
]
}=> 출력결과를 보면 JavaScript 객체와 JSON 문자열 간에는 아주 미묘한 차이가 있음
JSON 문자열에서는 키를 나타낼 때 반드시 쌍따옴표로 감싸줘야함 / JavaScript 객체에서는 쌍따옴표가 필수가 아님
이렇게 JavaScript 객체로 변환된 데이터는 . 나 [ ] 기호를 사용해서 각 속성에 접근할 수 있음
obj.name > '홍길동'
obj.age > 25
obj.family > {father:'홍판서', mother:'춘섬'}
obj.family.mother > '춘섬'
obj.hobbies > ['독서', '도술']
obj.hobbies[1] > '도술'
예) JSON.stringify() 사용
위의 예에서 parse() 메서드의 호출 결과로 얻은 JavaScript 객체 obj를 이용함
--> const srt = JSON.stringify(obj); 후 console.log(str);
'{"name":"홍길동", "age":25, "family":{"father":"홍판서","mother":"춘섬"}, "hobbies":["독서","도술"]}'
참고로, 이때 javascript 객체가 너무 많은 양의 데이터를 담고 있는 경우, 이렇게 한 줄의 문자열로 변환되면 알아보기 힘듬
=> stringify()의 세번째 인자로 들여쓰기 할 공백의 크기를 정할 수 있음
const str2 = JSON.stringify(obj, null, 2); 로 변환된 JSON 문자열이 2개의 공백으로 들여쓰기 되도록 하면 자동으로 요소마다 줄바꿈되고 들여쓰기도 됨
{
"name": "홍길동",
"age": 25,
"family": {
"father": "홍판서",
"mother": "춘섬"
},
"hobbies": [
"독서",
"도술"
]
}이렇게 JSON 형식의 문자열로 변환된 데이터는 더이상 . 나 [ ] 를 사용해서 각 속성에 접근할 수 없게 됨
출처 https://www.daleseo.com/js-json/
[ json2.jsp ]
이번에는 정수 자료형을 배열로 저장한 후 화면에 출력해보자
아까의 예제와 거의 동일,
var jsonStr 에서 아까는 "name"에 대한 값이 "홍길동" 등 문자열 요소를 갖는 배열이었지만
이번에는 "age" 에 대한 값이 22 등 정수 자료형 요소를 갖는 배열을 가짐
마찬가지로 변수 output을 선언 후 출력할 내용을 저장함
JSON.parse(jsonStr) 를 이용해 javascript 객체로 변환된 jsonInfo를 for~in문으로 배열 요소를 하나씩 꺼내어 output에 저장, id가 output인 div 태그에 html() 메서드를 이용해 내용 추가함.
[ json3.jsp ]
JSON 객체에 회원정보를 저장한 후 다시 회원정보를 출력해보자
이번에는 키 하나에 배열을 값으로 갖는 JSON 문자열이 아니라 키/값 쌍을 여러개 갖도록 jsonStr을 작성하고,
마찬가지로 JSON.parse(jsonStr)을 이용해 JavaScript 객체로 변환하여 jsonObj로 저장함,
변수 output에 출력할 내용을 저장함
이번에는 배열 요소를 갖지않으므로 jsonObj.name, jsonObj.age 등 요소 하나하나에 .키이름 으로 접근하여 값을 얻어와 output에 저장함
[ json4.jsp ]
이번에는 JSON 배열의 요소에 JSON 객체를 저장한 후 다시 배열에 접근하여 JSON 객체의 속성값을 출력해보자
var jsonStr =
'{"members" : [{"name":"박지성", "age":"25","gender":"남자"}' +
'{"name":"손흥민", "age":"30", "gender":"남자"}]}';
키 members 에 배열인 값을 갖는데, 이 배열은 JSON 객체를 요소로 가짐,
JSON.parse(jsonStr); 을 jsonInfo에 저장,
for~in문으로 jsonInfo.members의 [0]과 [1]에 저장된 값들을 가져와 출력
Ajax 이용해 서버와 JSON 데이터 주고받기
654p
이번에는 서버의 서블릿과 JSON 자료를 주고받는 기능을 알아보자
서버의 서블릿에서 JSON을 사용하려면 JSON 라이브러리를 설치해야함
1. http://code.google.com/archive/p/json-simple/downloads 사이트에 접속
2. json-simple-1.1.1.jar 다운로드
3. 이클립스 프로젝트의 /WebContent/lib 폴더에 붙여넣음
JSON - 배열 ~ JAVA - java.util.List
: JSON에서의 배열 [ ] 표기법은 자바에서 List로 표현됨. List를 구현한 JSONArray로 매핑됨
JSON - 객체 ~ JAVA - java.util.Map
: JSON에서의 객체 { } 표기법은 자바에서 key-value 형식인 Map으로 표현됨. Map을 구현한 JSONObject로 매핑됨
*** json-simple 라이브러리는 JSON 파싱을 지원함
.java 파일에서 JSONObject jsonObj = new JSONObject(); 를 입력
(* crtl + shift + O 눌러서 org.json.simple.JSONObject가 나오면 추가해주고, 없으면 pom.xml에 dependency를 추가해줌
메이븐 환경이 아니라면 jar 파일을 구해서 add .jar 해야함
*** pom.xml - dependency 추가
<dependency>
<groupId>com.googlecode.json-simple</groupId>
<artifactId>json-simple</artifactId>
<version>1.1.1</version>
</dependency>
*** JSONParser
"[{a,b,c},{d,e,f}]" 와 같이 String 인 json 데이터 또는 .json 파일(Reader를 이용해 읽어옴) 등
JSON 데이터를 파싱하여 객체나 배열로 변환하기 위해 사용함
json 형태의 String 일 경우
parseString jsonData = "{ \"param1\" : \"111\" , \"param2\" : \"222\" }";
JSONParser parser = new JSONParser();
Object obj = parser.parse(jsonData);
.json 파일일 경우
parseReader reader = new FileReader("파일 경로");
JSONParser parser = new JSONParser();
Object obj = parser.parse(reader);
JSON이 단건이라면(키1:값1, 키2:값2)
parse()로 얻은 obj를 바로 JSONObject로 형변환해서 담으면 됨,
JSONObject에서 get한 뒤에는 (String)으로 형변환 하여 출력하면 됨
JSONObject jsonObj = (JSONObject)obj;
System.out.println((String)jsonObj.get("키이름")); -> 값 출력
다건의 JSON 객체라면( [ { 키1 : 값1, 키2 : 값2 }, {키1 : 값A, 키2 : 값B} ] 등)
JSONArray에 담았다가 JSONObject로 담음
JSONArray jsonArr = (JSONArray)obj;
if (jsonArr.size() > 0) {
for (int i=0; i<jsonArr.size(); i++) {
JSONObject jsonObj = (JSONObject)jsonArray.get(i);
System.out.println((String)jsonObj.get("키 이름")); -> 값1 값A or 값2 값B 출력됨
}
}
다건의 JSON 객체가 JSON 내부에 있을 때
{"키1" : "값1","키2" : [ {"키A":"값A", "키B":"값B"} , {"키A":"값C", "키B":"값D"} ] }
=> 마찬가지로 jsonObject와 jsonArray를 반복 사용하면 됨
우선 obj를 JSONObject에 담고, JSONArray를 get함, jsonArr에서 하나씩 JSONObject로 형변환해서 사용
JSONObject jsonMain = (JSONObject)obj;JSONArray jsonArr = (JSONArray)jsonMain.get("키2");
if (jsonArr.size() > 0) { for (int i=0; i<jsonArr.size(); i++) { JSONObject jsonObj = (JSONObject)jsonArr.get(i); System.out.println((String)jsonObj.get("키A")); -> 값A, 값C 출력됨 }}
출처
https://dololak.tistory.com/625
https://studyingazae.tistory.com/196
예제 실습을 위해 sec03.es01 패키지를 만들고 JsonServlet 클래스를 추가함
[ JsonServlet1 클래스 ]
Ajax로 전달된 JSON 문자열을 getParameter() 메서드로 가져온 다음
JsonParser 클래스의 parse() 메서드를 이용해 JSONObject를 가져오고
JSON 데이터의 name 속성으로 value를 출력함
// 매핑이름 /json
...
String jsonInfo = request.getParameter("jsonInfo"); // json5.jsp에서 ajax를 통해 문자열로 전송된 json 데이터를 가져옴
... // 아래 코드를 try-catch문으로 처리함
JSONParser jsonParser = new JSONParser(); // JSON 문자열 데이터를 처리하기 위해 JSONParser 객체 생성
JSONObject jsonObject = (JSONObject)jsonParser.parse(jsonInfo);
// JSON 데이터를 JSON Object로 만들어줌, parse()의 리턴 타입은 Object임 -> JsonObject로 형변환
...
System.out.println(jsonObject.get("name"));
...println(jsonObject.get("age"));
... // JsonObect로 변환된 JSON 데이터의 키 이름을 get() 에 전달하여 값 value 를 출력함
(요약)
JSON 문자열 받아와서 (getParameter() )
> JsonParser 객체 생성
> parse() 로 Json 데이터 파싱 후 반환된 Object를 JsonObject로 형변환
> Json 데이터의 키 이름을 JsonObject.get() 에 전달해서 value를 얻음
[ json5.jsp ]
자바스크립트로 회원정보를 JSON 객체로 만들어서 매개변수 이름 jsonInfo로 ajax를 이용해 서블릿으로 전송함
<script>
$(function () {
...
var _jsonInfo = '{"name" : "박지성" , "age" : "25", "gender" : "남자" , "nickname" : "날센돌이" }'; //Json 형식 회원정보
$.ajax({
...// type, async, success, error, complete 등 지정
url : "${contextPath}/json" // 데이터 전송할 서블릿 지정
data : { jsonInfo : _jsonInfo } // json 데이터 _jsonInfo를 서블릿에 'jsonInfo' 이름으로 전송함
})
=> 브라우저에서 json5.jsp 요청해서 버튼 눌러 서블릿으로 요청하면
서블릿으로 json 데이터가 ajax를 통해 전송되어 이클립스 콘솔에 데이터 출력됨
658p
이번에는 반대로 서버의 서블릿에서 웹 페이지로 JSON 형식의 회원 정보를 전송해보자
[ JsonServlet2 클래스 ]
JSON 배열에 회원 정보를 저장하여 JSP 페이지로 정송하고 JSON 배열에 정보를 저장하는 과정
1. memberInfo 로 JsonObject 객체를 생성한 후 회원정보를 name/value 쌍으로 저장함
2. membersArray 의 JsonArray 객체를 생성한 후 회원정보를 저장한 JSON 객체를 차례대로 저장함
3. membersArray 배열에 회원정보를 저장한 후 totalObject로 JsonObject 객체를 생성하여 name에는 자바스크립트에서 접근할 때 사용하는 이름인 member를, value에는 membersArray를 최종적으로 저장함
매핑이름 /json2
...
JSONObject totalObject = new JSONObject(); // 회원들의 정보 JsonArray가 저장될 JsonObject를 생성
JSONArray membersArray = new JSONArray(); // 회원들의 정보가 저장될 JsonArray를 생성
JSONObject memberInfo = new JSONObject(); // 회원 1명의 정보가 들어갈 JsonObject를 생성
// memberInfo(JsonObject)에 회원 1명 정보 저장
// ->membersArray(JsonArray) 배열에 회원들 정보 저장
// ->totalObject(JsonObject)에 name 주고 membersArray를 value로 저장함
memberInfo.put("name", "박지성");
...// memberInfo 객체에 회원 정보 put() 으로 저장함
membersAraay.add(memberInfo); // '박지성' 회원 정보를 담고있는 memberInfo를 list인 membersArray에 저장함
memberInfo = new JSONObejct(); // 새 회원의정보를 담을 JsonObject를 생성
memberInfo.put("name", "김연아");
... // put()으로 JsonObject에 김연아 회원 정보 추가
membersArray.add(memberInfo); // '김연아' 회원 정보를 담고있는 memberInfo도 memberArray에 추가함
totalObject.put("members", membersArray); // 'members'라는 name으로 회원정보가 담긴 배열을 value로 저장함
String jsonInfo = totalObject.toJSONString(); // JsonObject인 totalObject의 내용을 toJSONString()으로 문자열로 변환
System.out.print(jsonInfo); // Json 데이터를 콘솔에 출력
writer.print(jsonInfo); // Json 데이터를 브라우저로 전송
* JsonObject에 값 추가할 때는 put("name","value"), 값 읽어올 때는 get("name") 사용함
[ json6.jsp ]
...// 자바스크립트로 ajax 이용
...// type, async, url 등 작성,
success : function (data, textStatus) {
var jsonInfo = JSON.parse(data); // 서버에서 전송된 JSON 데이터를 파싱함
var memberInfo = "회원정보<br>" // 출력할 내용 작성
for (var i in jsonInfo.members) {
memberInfo += "이름 : " + jsonInfo.members[i].name + "<br>";
memberInfo += "나이 : " + jsonInfo.members[i].age + "br";
... // members 의 value인 배열의 [0] 인 박지성과 [1]인 김연아의 정보 html 형식으로 memberInfo 에 담음
}
$("#output").html(memberInfo); // 출력할 내용 담긴 memberInfo를 id가 output인 div에 추가
}
... // error, complete 도 작성
...
이번에는 여러개의 배열을 JSON으로 전달하는 예제를 만들어보자
[ JsonServlet3 클래스 ]
1. bookInfo의 JSONObject 객체를 생성한 후 도서 정보를 name/value 쌍으로 저장함
2. bookArray의 JSONArray 객체를 생성한 후 도서 정보를 저장한 bookInfo를 차례대로 저장함
3. 이미 회원 배열을 저장하고 있는 totalObject의 name에는 배열 이름 books를, value에는 bookArray를 저장함
매핑이름 /json3
...
최종적으로 JsonArray를 value로 저장할 JsonObject인 totalObject 생성,
회원 정보가 담긴 JsonObject를 저장할 JsonArray인 membersArray 생성,
회원 정보 저장할 JsonObject인 memberInfo 생성
memberInfo.put("name", "박지성"); 등 name/value 쌍 데이터 저장
membersArray.add(memberInfo); 로 회원정보 저장한 JsonObject를 배열 요소로 추가,
memberInfo.put("name", "김연아"); 등 다른 회원 정보도 저장,
membersArray에 추가
totalObject.put("members", membersArray); 로 totalObject에 members 라는 name에 membersArray를 value로 저장함
책 정보가 담긴 JsonObject를 저장할 JsonArray인 bookArray 생성,
챙 정보 저장할 JsonObject인 bookInfo 생성
bookInfo.put("title", "초보자를 위한 자바 프로그래밍"); 등 책1에 대한 데이터 저장, bookArray에 추가
책2에 대한 데이터도 저장 후 bookArray에 추가함
totalObject에 books 라는 name에 bookArray를 value로 저장함
String jsonInfo = totalObject.toJSONString(); 으로 JsonObject 내용을 String으로 변환하여 저장
변환된 String을 콘솔에 출력(System.out.print() )&JSP로 전송(writer.print() )
[ json7.jsp ]
ajax로 JSON 데이터를 가져온 후 서블릿에서 각 배열에 지정했던 이름으로 회원정보와 도서정보를 가져와 출력함
success에서
var jsonInfo = JSON.parse(data); 로 전송받은 string(JSON 문자열)을 자바스크립트 객체로 변환
var memberInfo에 회원정보에 대해 출력할 내용 저장할것임
for~in문으로 jsonInfo.members의 요소를 꺼내어 html 형식으로 만들어 memberInfo에 저장함,
var booksInfo에 책정보에 대해 출력할 내용 저장할것임
for~in문으로 jsonInfo.books의 요소를 꺼내어 html 형식으로 만들어 booksInfo에 저장함
html() 메서드로 body에서 id가 output인 div 태그에 memberInfo와 booksInfo 저장함
'(책) 자바 웹을 다루는 기술' 카테고리의 다른 글
| Chap 17 모델2 방식으로 효율적으로 개발하기 -2 (0) | 2023.09.13 |
|---|---|
| Chap 17 모델2 방식으로 효율적으로 개발하기 -1 (0) | 2023.09.09 |
| Chap 15 JSP 페이지를 풍부하게 하는 오픈 소스 기능 (0) | 2023.09.01 |
| Chap 14 표현 언어와 JSTL -3 (0) | 2023.08.30 |
| Chap 14 표현 언어와 JSTL -2 (0) | 2023.08.29 |