PART 01 Ajax를 구성하는 기본 구성요소 Chapter 01 Ajax 프로그래밍을 위한 기본 지식 ... 14 Section 1 Ajax의 개요 ... 14 (1) Ajax란 무엇인가? ... 14 (2) Ajax의 기본이 되는 요소 기술들 ... 17 (3) Ajax 이용의 장점 ... 19 (4) 인터넷으로 통신하는 경우 기본이 되는 HTTP의 구조 ... 20 (5) 서버와 비동기통신의 구조 ... 21 (6) 웹 브라우저의 이벤트 ... 22 (7) XHTML ... 23 (8) DynamicHTML(DHTML) ... 25 (9) JavaScript ... 26 (10) CSS(Cascading Style Sheet) ... 27 (11) HTML, CSS, JavaScript의 역할 분담 ... 29 (12) DOM(Document Object Model) ... 30 (13) 리치 클라이언트에 대하여 ... 31 Section 2 작업환경 설정 ... 32 (1) 자바 다운로드와 설치 - JDK(Java Development Kit) 설치 ... 33 (2) 톰캣(Tomcat)의 다운로드와 설치 ... 44 (3) 개발 툴 설치 ... 51 학습정리 ... 57 Chapter 02 기본적으로 알아야 할 JavaScript ... 58 Section 1 JavaScript의 개요 ... 58 Section 2 함수(Function) ... 59 실습 : ajaxTest 웹 어플리케이션 폴더 작성 ... 60 실습 : ch02 폴더 작성 ... 63 (1) 사용자 정의 함수 작성 ... 64 (2) 알아두어야 할 내장 함수(Implicit Function) ... 65 실습 : alert() 함수를 사용한 메시지상자 호출 ... 66 실습 : confirm() 함수를 사용한 메시지상자 호출 ... 69 실습 : prompt() 함수를 사용한 입력상자 호출 ... 72 Section 3 객체에 따른 메소드와 이벤트(Event) ... 77 (1) 이벤트(Event)와 이벤트 핸들러(Event Handler) ... 77 (2) 객체에서 발생하는 중요 이벤트와 메소드 ... 78 Section 4 객체지향 자바스크립트 ... 81 (1) prototype프로퍼티 사용 ... 81 실습 : Mammal, Human, Ape 클래스의 상속 관계를 자바스크립트에서 정의하고 사용하기 ... 82 (2) 자바스크립트에서 정보 은닉 ... 86 학습정리 ... 88 Chapter 03 DOM(Document Object Model) ... 90 Section 1 DOM(Document Object Model)의 개요 ... 90 Section 2 DOM(Document Object Model)의 사용 ... 91 실습 : ch03 폴더 작성 ... 91 (1) HTML과 자바스크립트, 그리고 CSS를 사용한 기본 구조 ... 92 실습 : DOM 구조 연습에 사용할 domTestl.html 작성 ... 92 (2) 프로퍼티와 메소드를 포함한 클래스의 선언 ... 96 실습 : 프로퍼티와 메소드를 포함한 클래스의 선언 ... 97 (3) 클래스의 객체에 메소드 추가 ... 101 실습 : 프로퍼티와 메소드를 포함한 클래스의 선언 ... 101 (4) prototype.js를 사용한 클래스의 선언 ... 105 실습 : 프로퍼티와 메소드를 포함한 클래스의 선언 ... 105 (5) 클래스를 상속해서 서브 클래스 생성 - 클래스의 상속 ... 110 실습 : 클래스를 상속해서 하위 클래스 생성 ... 111 (6) 상속 관계에서 같은 이름의 메소드 재정의 - 메소드 오버라이딩(overriding) ... 116 실습 : 상속 관계에서 같은 이름의 메소드 재정의 ... 116 (7) 슈퍼 클래스의 메소드를 호출해서 사용 ... 120 실습 : apply() 메소드를 사용해서 슈퍼 클래스의 메소드 호출 ... 120 (8) 추상 클래스를 상속받는 서브 클래스의 구현 ... 124 실습 : 추상 클래스의 추상 메소드를 오버라이딩 ... 125 (9) DOM 트리 객체의 태그를 생성 및 변경 ... 132 실습 : DOM 트리 객체를 사용해서 태그 노드의 추가와 제거 ... 132 (10) 사용자의 동작(마우스 이벤트)에 의해 페이지 스타일 변경 ... 141 실습 : 사용자의 동작으로 페이지의 스타일시트 변경 ... 142 (11) 키보드에서 입력받아(키보드 이벤트에 의한) 페이지의 스타일 변경하기 ... 149 실습 : 키보드로부터 입력받아 페이지의 스타일 변경하기 ... 150 Section 3 활용 예제 - 콘텐츠의 위치 이동하기 ... 158 실습 : 콘텐츠를 임의의 위치로 이동 ... 158 학습정리 ... 166 PART 02 XMLHttpRequest(XHR) 객체를 사용한 서버 연동 Chapter 04 XMLHttpRequest(XHR) 객체 ... 168 Section 1 XMLHttpRequest(XHR) 객체의 개요 ... 168 (1) 개요 ... 168 (2) XMLHttpRequest(XHR) 객체 생성 ... 169 Section 2 XMLHttpRequest(XHR) 객체의 메소드와 프로퍼티 ... 171 (1) XMLHttpRequest(XHR) 객체의 메소드 ... 171 (2) XMLHttpRequest(XHR) 객체의 프로퍼티 ... 174 Section 3 XMLHttpRequest(XHR) 객체를 사용한 서버에 요청 보내기 ... 176 (1) XMLHttpRequest 객체를 사용한 서버와 클라이언트의 통신 구조 ... 176 (2) HTTP 메소드 ... 178 (3) XMLHttpRequest 객체를 사용한 Ajax 프로그래밍의 이해 ... 179 실습 : ch04 폴더 작성 ... 179 실습 : IFRAME을 사용한 비동기적 통신 ... 180 실습 : XMLHttpRequest 객체를 사용한 비동기 통신 ... 183 학습정리 ... 188 Chapter 05 서버와의 연동 ... 192 Section 1 GET 방식과 POST 방식으로 서버에 요청 전송 ... 193 (1) GET 방식으로 요청 보내기 ... 193 실습 : ch05 폴더 작성 ... 196 실습 : GET 방식으로 요청을 보내는 프로그램 ... 197 실습 : 환경 변수 CLASSPATH에 servlet-api.jar 추가 ... 203 실습 : GET 방식으로 요청 파라미터를 보내는 프로그램 ... 204 (2) POST 방식으로 요청 보내기 ... 214 실습 : POST 방식으로 요청을 보내는 프로그램 ... 217 실습 : POST 방식으로 요청 파라미터를 보내는 프로그램 ... 223 Section 2 서버로부터의 응답결과 처리 ... 234 (1) 응답결과를 문자열로 처리 ... 234 (2) 응답결과를 XML로 처리 ... 235 실습 : 서버의 응답결과를 XML 문서 객체로 받아서 처리 ... 240 Section 3 JSON(JavaScript Object Notation) ... 247 (1) JSON(JavaScript Object Notation)의 개요 ... 247 (2) JSON 문서 처리 방식 ... 249 실습 : JSON 문서를 읽어서 처리 ... 249 Section 4 이클립스에 GWT를 설치해서 Ajax 개발환경 설정 ... 254 (1) 이클립스 및 WTP 설치 ... 255 (2) GWT(Google Web Toolkit)와 Googlipase 설치 ... 265 (3) Ajax 프로젝트를 작성 ... 270 학습정리 ... 291 Chapter 06 Ajax를 적용한 기본적인 기법들 ... 296 Section 1 자동갱신 페이지 구현 1 ... 296 실습 : GWT를 사용한 자동 갱신페이지 구현 ... 296 실습 : [ajaxTest2] 프로젝트에 [ch06] 폴더 추가 ... 303 실습 : 직접 자바로 로직을 기술해서 자동 갱신페이지 구현 ... 303 Section 2 선택에 의해 변경되는 동적 리스트 구현 ... 315 실습 : 항목을 선택하면 해당 항목의 하위 항목만 동적으로 리스트에 표시 ... 315 Section 3 진행막대(Progress bar) 구현 ... 324 실습 : 사이트에 작업의 진행막대 표시 ... 325 Section 4 자동 갱신페이지 구현 2 - 페이지의 일부분만 갱신 구현 ... 337 실습 : 페이지의 일부분만 갱신 구현 ... 337 Section 5 해당 항목의 설명 부분 구현 ... 349 실습 : 팝업 영역에 해당 항목의 내용 표시 ... 350 Section 6 검색어의 자동 완성 기능 구현 ... 362 실습 : 검색어의 자동 완성 기능을 제공하는 목록 구현 ... 362 학습정리 ... 374 PART 03 Ajax와 DB의 연동을 통한 어플리케이션 구축 Chapter 07 데이터베이스 ... 376 Section 1 데이터베이스의 개요 및 설치 ... 376 (1) 개요 ... 376 (2) 데이터베이스 설치 ... 377 실습 : MySQL 설치(http:／／dev.mysql.com／downloads／) ... 377 Section 2 SQL 쿼리의 개요 ... 395 (1) SQL 쿼리의 개요 ... 395 실습 : CREATE문을 사용해서 테이블을 생성 ... 397 실습 : Drop문을 사용해서 테이블을 제거 ... 400 실습 : INSERT문을 사용한 테이블에 레코드 추가 ... 402 실습 : SELECT문을 사용한 테이블의 레코드 검색(조회) ... 404 실습 : UPDATE문을 사용한 테이블에 저장되어 있는 레코드 수정 ... 406 실습 : DELETE문을 사용한 테이블에 저장되어 있는 레코드 삭제 ... 407 Section 3 JDBC를 사용한 JSP와 데이터베이스의 연동 ... 409 (1) JDBC(Java Database Connectivity) ... 409 (2) JDBC를 사용한 프로그래밍과 데이터베이스의 연동 ... 410 실습 : 이클립스의 프로젝트에 JDBC를 사용할 수 있도록 외부 JAR 추가 ... 418 실습 : ch07 폴더 작성 ... 423 실습 : JDBC를 사용한 자바계열 프로그래밍과 데이터베이스 연동 예제 ... 424 Section 4 자카르타 DBCP API를 이용한 커넥션 풀 사용 ... 426 (1) 커넥션 풀(Connection Pool)의 개요 ... 426 (2) 자카르타(Jakarta) DBCP API를 이용한 커넥션 풀 ... 428 실습 : 이클립스의 프로젝트로 커넥션 풀 관련 3개의 jar 파일 가져오기 ... 431 실습 : server.xml에 DBCP에 관한 정보 설정 ... 435 실습 : 이클립스에서 [ajaxTest2]-[Web Contents]-[WEB-INF] 폴더 안에 있는 web. xml 파일에 JNDI 리소스 사용 설정 ... 439 실습 : JSP 페이지에서 DBCP API 커넥션 풀 사용 예제 ... 441 Section 5 이클립스에 [Database Explorer]뷰를 사용한 데이터베이스의 직접 제어 ... 443 (1) 데이터베이스 서버와 JDBC 드라이버 ... 445 (2) [Database Explorer] 뷰에서 데이터베이스 접속 ... 445 실습 : [Database Explorer] 뷰에서 데이터베이스 접속하기 ... 446 (3) [SQL Scrapbook Page]와 [Data Output] 뷰 ... 448 실습 : [SQL Scrapbook Page]을 작성해 보자 ... 449 학습정리 ... 452 Chapter 08 데이터베이스를 연동한 Ajax 적용 기법 ... 456 Section 1 데이터베이스와 연동한 자동 갱신페이지 구현 1 ... 456 실습 : [ajaxTest2] 프로젝트에 [ch08] 폴더 추가 ... 456 실습 : 뉴스목록 자동 갱신페이지 구현 ... 457 실습1 : newsList 테이블 생성 및 레코드 추가 ... 459 실습2 : 데이터베이스와 연동하는 자바빈 작성 ... 462 실습3 : Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 471 Section 2 데이터베이스와 연동하여 선택에 의해 변경되는 동적 리스트 구현 ... 477 실습 : 선택 항목의 하위 항목만 동적으로 리스트에 표시 ... 477 실습1 : addressList 테이블 생성과 레코드 추가 ... 478 실습2 : 데이터베이스와 연동하는 자바빈 작성 ... 481 실습3 : Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 487 Section 3 데이터베이스와 연동한 자동 갱신페이지 구현 2 ... 493 실습 : 전체 페이지에서 사용자 인증 부분만 갱신해서 표시하는 페이지 ... 493 실습1 : member 테이블 생성 및 레코드 추가 ... 495 실습2 : 데이터베이스와 연동하는 자바빈 작성 ... 497 실습3 : Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 504 Section 4 데이터베이스와 연동하여 해당 항목의 설명 부분 구현 ... 515 실습 : 목록의 제목에 마우스 포인트 위치 시 툴팁에 해당 항목의 내용 표시 ... 515 실습1 : pictureList 테이블 생성 및 레코드 추가 ... 517 실습2 : 데이터베이스와 연동하는 자바빈 작성 ... 520 실습3 : Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 526 Section 5 데이터베이스와 연동한 검색어의 자동 완성 기능 구현 ... 532 실습 : 검색어의 자동 완성 기능을 제공하는 목록 구현 ... 532 실습1 : searchWord 테이블 생성 및 레코드 추가 ... 534 실습2 : 데이터베이스와 연동하는 자바빈 작성 ... 536 실습3 : Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 541 학습정리 ... 549 Chapter 09 웹 어플리케이션에서 활용되는 Ajax 기법 ... 550 실습 : [ajaxTest2] 프로젝트에 [ch09] 폴더 추가 ... 550 Section 1 뉴스목록의 표시 및 뉴스에 의견달기 시스템 ... 551 (1) newsList 테이블에 필드 추가 및 레코드 수정 ... 553 실습 : newsList 테이블에 필드 추가 및 레코드 수정 ... 553 (2) 데이터베이스와 연동하는 자바빈 작성 ... 555 (3) Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 571 Section 2 회원관리 시스템(인증된 회원을 위한 서비스 시스템) ... 599 (1) member 테이블에 필드 추가, 레코드 수정과 clubList 테이블의 생성, 레코드 추가와 클럽에 가입한 회원을 관리하기 위한 테이블을 생성 ... 601 실습 : member 테이블에 필드 추가 및 레코드 수정 ... 601 (2) 데이터베이스와 연동하는 자바빈 작성 ... 608 (3) Ajax의 기능을 사용하기 위한 관련 파일의 작성 ... 624 부록 : 작업 결과를 메인 페이지로 연결 프로그래밍 유틸리티 Appendix A : 실시간 검색어, 회원인증, 뉴스리스트 표시를 메인페이지로 연결 ... 660 Appendix B : Firefox의 추가 기능을 사용한 HTML Validator(HTML 검증기) ... 670 Appendix C : JSLint를 사용한 자바스크립트 문법 검사 ... 677 Appendix D : 테스트 툴인 JsUnit로 자바스크립트 테스트 ... 679