거니의 velog

(2) Ajax 이용해 서버와 JSON 데이터 주고받기 * 이번에는 서버의 서블릿과 JSON 자료를 주고받는 기능을 알아보자. 서버의 서블릿에서 JSON을 사용하려면 JSON 라이브러리를 설치해야 한다. 1. 다음의 사이트로 이동한다. https://code.google.com/archive/p/json-simple/downloads Google Code Archive - Long-term storage for Google Code Project Hosting. code.google.com 2. json-simple-1.1.1.jar를 클릭해 다운로드한다. 3. 이클립스 프로젝트의 /WebContent/lib 폴더에 붙여 넣는다. 4. 이번에는 JSP에서 제이쿼리 Ajax 기능을 이용해 서블릿으로 JSO..

(4) ID 중복 여부 확인하기 * 이번에는 Ajax를 이용해 회원 가입 시 사용자 ID 중복 여부를 판별해 보자. 1. sec02.ex01 패키지를 만들고 MemberDAO, MemberServlet 클래스를 만든다. 그리고 ajax3.html을 추가한다. 2. MemberServlet 클래스를 다음과 같이 작성한다. 클라이언트에서 Ajax로 전송된 ID를 받아서 MemberDAO의 overlappedID() 메서드를 전달한다. package sec02.ex01; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServl..

5. 제이쿼리 Ajax 기능* 온라인 쇼핑몰에서 회원 가입을 하려면 먼저 ID 중복 여부부터 체크한다. 이때 보통 회원 가입 페이지는 브라우저에 표시된 채 ID 중복 여부를 확인하는 창만 서버에 질의하여 화면에 따로 보여준다. * 이처럼 클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax 기능을 사용한다. Ajax란 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술을 의미한다. * Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징이 있다. * 다음 그림들은 기존 웹 페이지..

3. 제이쿼리 주요 개념 * 제이쿼리란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리이다. 제이쿼리는 여러 가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용하다. * 다음은 제이쿼리의 주요 특징이다. - CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있다. - 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 피할 수 있다. - 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있다. - 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행한다. * 제이..

1. HTML5 주요 개념 * 웹 브라우저는 웹 사이트를 만드는 프로그래밍 언어인 HTML(Hypertext Markup Language), CSS와 자바스크립트로 이루어진 구문만 인식하여 화면에 나타낸다. 그리고 JSP는 웹 사이트 화면을 구성하는 HTML을 좀 더 동적으로 구현하기 위해 도입된 기능이다. HTML 기능도 꾸준히 업그레이드되어 지금은 HTML5 버전(HTML의 최신 버전)이 사용되고 있다. 이번에는 JSP에서 사용되는 HTML5 기능을 간단히 알아보고, 자바스크립트 기반의 제이쿼리(jQuery)도 살펴보자. * HTML5는 기존 HTML4에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보 등을 지원한다. 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있..