HTML5 와 제이쿼리

 

 

 

시작하기 전에 앞서..

가끔 만들어둔 프로젝트를 열면 이렇게 모든., jsp 파일이 'The type java.io.UnsupportedEncodingException cannot be resolved. It is indirectly referenced from 
 required .class files' 라는 문구와 함께 먹통이 될 때가 있다. 이럴 때는.. 

프로젝트명 우클릭 -> Build Path -> Configure Build Path에서, 

 

JRE System Library를 추가해준다. 

 

말끔하게 해결되었다 :D 

 

 

 

나는 HTML5, CSS, 바닐라 JS에 대한 학습을 다른 책으로 이미 했기 때문에.. HTML5에서 보완된 태그들만 간단하게 설명하고 바로 제이쿼리로 들어갈것이다! 

<header> : 머리말을 나타내는 태그

<hgroup> : 제목과 부제목을 묶는 태그

<nav> : 메뉴 부분을 나타내는 태그

<section> : 제목별로 나눌 수 있는 태그

<article> : 개별 콘텐츠를 나타내는 태그

<aside> : 왼쪽, 또는 오른쪽에 위치하는 사이드 바를 나타내는 태그

<footer> : 하단의 정보를 표시하는 태그 (저작권, 대표자 이름, 전화번호.. 등) 

 

 

제이쿼리 : 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바 스크립트 기반 라이브러리. 효과나 이벤트를 간단한 함수 호출만으로도 빠르게 개발할 수 있어서 유용하다. 

 

-www.jquery.com 에서 라이브러리를 다운로드 해서 사용할 수도 있고, 네트워크로 CDN 호스트를 설정해서 사용할 수도 있는데 나는 CDN호스트를 이용해 사용할 것이다. 

- 선택자 종류 : CSS 선택자와 동일하되, $("") 이 붙는다.

> $("*") // 모든 DOM(HTML 객체)를 선택한다. 

> $("#id")

> $("elementName")

> $(".className")

> $("selector1, 2, 3..")

 

 

Ajax : Asynchronous Javascript = 비동기 자바 스크립트 + XML. 자바스클비트를 사용한 비동기 통신. 즉, 클라이언트와 서버간의 XML 또는 JSON 데이터 주고받기 기술. 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다. 

 

 

제이쿼리에서 Ajax를 사용하려면 $기호 뒤에 .ajax를 명명해준 후, 속성값을 설정해야 한다. 

type : 통신 타입(post, 또는 get)

url : 요청할 url

async: 비동기식으로 처리할지의 여부

data : 서버에 요청할 때 보낼 매개변수

dataType : 응답받을 데이터 타입

success: 요청 및 응답에 성공했을 때 처리 구문

error : 요청 및 응답에 실패했을 때 처리 구문

complete: 모든 작업을 마친 후 처리 구문 

 

 

■ 비동기방식 제이쿼리 Ajax 사용하기  

 

 

서블릿과 비동기 방식으로 데이터 송수신하기.

 

1. 서버로부터 전송하고, 받은 메시지를 div 태그에 표시하는 코드는 위의 코드를 그대로 사용하고, getParameter()메서드를 이용해 ajax로 전송된 매개변수를 가져온다. 

2. 결과

 

3. XML 데이터 연동하기. 도서 정보를 XML 형식으로 작성한 후, 브라우저로 전송한다. 

4. 브라우저에서는 XML 데이테를 받은 후 제이쿼리의 find() 메서드에 엘리먼트 태그 이름으로 호출하여 각각의 도서 정보를 가져온다. 그리고 id가 bookInfo인 <div> 엘리먼트에 도서 정보를 표시한다. 

5. 결과! 

 

 

6. ID 중복 여부를 확인해본다. 클라이언트에서 Akax로 전송된 ID를 받아서 memberDAO의 overlappedId()메서드로 전달하여 Id의 중복 여부를 검사한다. 그리고 그 결과를 받아와, 클라이언트에게 not_usable, usable 중 하나의 메시지를 전달한다. 

 

7. 오라클의 decode()함수를 이용해 ID가 존재하면 true, 존재하지 않으면 false를 문자열로 조회한다. 그리고 결과를 논리형으로 변환해 저장하고, return한다. 

 

8. 실제 아이디를 입력받을 html을 작성한다. ID 중복 체크하기를 클릭하면 입력한 ID를 val() 메서드로 가져와서 ajax를 이용해 url에 연결된 서블릿으로 전송한다. 그 다음 서버에 전송된 결과에 따라 usable면 사용할 수 있는 ID임을, 그렇지 않으면 사용할 수 없는 ID임을 id값이 message인 곳에 표시한다. 

9. 이미 데이터베이스에 존재하는 hong를 검색하면 사용할 수 없는 ID임을 알려준다. 

 

 

 

■ 제이쿼리에서 JSON 사용하기

 

JSON : JavaScript Objcet Notation : name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식. 

 

배열은 [ ] 기호로, JSON객체는 중괄호로 둘러싸서 표현한다.  

 

var jsonStr = '{"members":[{"name":"박지성","age":"25","gender":"남자","nickname":"날센돌이"}'
                +', {"name":"손흥민","age":"30","gender":"남자","nickname":"탱크"}] }'; 은 JSON 배열 { members 안에, 다시 JSON 객체를 저장한 것이다. 

이후 json의 parse()메서드로 배열을 구하고, 반복문을 통해 하나씩 출력한다. 

 

출력을 눌러 조회된 정보를 확인한다. 

 

■ Ajax 이용해 서버와 JSON 데이터 주고받기 

 

- 서블릿에서 JSON을 사용하려면 JSON 라이브러리를 설치해야 한다. 

 

1. 다음 사이트로 이동한다 : https://code.google.com/archive/p/json-simple/downloads

Google Code Archive - Long-term storage for Google Code Project Hosting.

 

표시한 라이브러리를 다운받아 , /WebContent/lib 폴더에 붙여넣는다. 

 

 

JSP에서 Ajax를 활용해 서블릿에서 웹페이지로 JSON 형식의 회원 정보를 전송해본다. 

 

> memberInfo로 JSONObject 객체를 생성한 후, 회원 정보를 name/value 쌍으로 저장한다.

> membersArray의 JSONArray 객체를 생성한 후, 회원 정보를 저장한 JSON 객체를 차례대로 저장한다.

> membersArray 배열에 회원 정보를 저장한 후, totalObject로 JSONObject 객체를 생성해 name에는 members, value는 membersArray를 최종 저장한다. 

 

나는 개인적으로 이해를 쉽게 하기 위해 그림으로 표현해 보았는데, 다음과 같다! 

 

var jsonInfo 변수에 Jsonparse(data)로 서버에서 전송한 JSON 데이터를 파싱한다. 그리고 배열 이름인 members 로 각 배열의 요소에 접근한 후, name으로 value를 출력한다. 

짜자잔

 

마지막으로 여러개의 배열을 JSON으로 전달해본다. 원리는 똑같다. Info를 각각의 Array객체에 담고, 그걸 다시 토탈 객체에 담아서 전송한다. 

 

그리고 Json 객체를 받아와서 정보들을 출력한다. 

 

결과! 

 

 

다음은 본격적으로 모델2방식을 이용해 구현해본다. 일단 오늘은 쉬고 ...