최범균의 Ajax 프로그래밍 <?도서?>
기초부터 중급까지
초판 발행 2006년 5월 30일
초판 3쇄 발행 2007년 5월 10일
지은이 최범균
펴낸곳 가메출판사 [출판사가기]
ISBN 89-8078-181-4
/***** 도서 안내 *****/
XMLHttpRequest 뿐만 아니라 DOM, CSS 등에 대해 살펴보 며, 자바스크립트의 객체 지향 방법에 대해서도 다루고 있다. 따라서 이 책을 공부하게 되면 객체 지향적인 방법으로 Ajax 프로그래밍을 할 수 있게 될 것이 다.
/***** 관련 자료 *****/
질문과 답변 자바캔 [바로가기]
부록 : 예제 CD-Rom
JDK 1.5 jdk-1_5_0_06-windows-i586-p.exe
Tomcat 5.5 apache-tomcat-5.5.16
/***** 목 차 *****/
Part 1 Ajax 기초 프로그래밍
chap 0 예제 실행을 위한 프로그램 설치
1. 프로그램 설치
1.1 J2SDK 1.5 설치
1.2 환경 변수 설정
2. 소스 코드 복사 및 실행 테스트
2.1 각 장별 소스 코드의 위치 및 실행 방법
Chap 1 Ajax란 무엇인가?
1. Ajax 방식
1.1 기존 방식의 사이트
1.2 Ajax 방식의 사이트 및 Ajax 방식의 특징
2. Ajax의 주요 구성 요소
Chap 2 XMLHttpRequest 객체
1. XMLHttpRequest 객체를 사용한 데이터 송수신
1.1 XMLHttpRequest 프로그래밍 순서
1.2 XMLHttpRequest 객체 구하기
1.3 웹 서버에 요청 전송하기
1.4 서버 응답 처리하기: onreadystatechanage 프로퍼티와 콜백 함수
1.5 코드가 실행되는 순서
1.6 XMLHttpRequest 객체의 상태: readyState
1.7 서버로부터의 응답 상태: status / statusText
1.8 응답 데이터 사용하기: responseText
1.9 서버의 응답 텍스트를 alert으로 출력해 주는 예제
2. 동기 방식과 비동기 방식의 실행 차이
3. 파라미터의 한글 처리 방법
4. XMLHttpRequest 모듈 만들기: httpRequest.js
4.1 httpRequest.js 모듈 사용 예제: 안녕하세요!
Chap 3 innerHTML을 이용한 화면 동적 변경
1. innerHTML 속성 사용한 화면 변경
1.1 innerHTML 속성을 사용하는 기본 코드
1.2 1초마다 현재 시간을 출력해 주는 예
2. 웹 서버 응답 결과를 innerHTML을 사용하여 반영
2.1 응답 텍스트로 생성한 HTML 코드를 그대로 반영하기
2.2 CSV 양식의 응답 텍스트를 분석해서 화면에 출력하기
3. 자바스크립트 디버깅 콘솔 만들기
Chap 4 제시어 기능 구현하기
1. 제시어 기능 흐름
2. 서버 측 제시어 기능 구현
3. 클라이언트 측 제시어 기능 구현
3.1 입력한 검색어 서버에 전송하기
3.2 서버에서 받은 제시어 목록 출력하기
3.3 제시어를 선택한 경우의 처리
3.4 완전한 suggestclient.html 코드
Part 2 DOM, XML 자바스크립트 객체
Chap 5 DOM(Document Object Model)과 XML
1. DOM(Document Object Model)과 HTML/XML
1.1 XML 문서와 DOM 트리 구조
1.2 HTML 문서와 DOM 트리 구조
2. 주요 DOM API
2.1 DOM API를 사용하여 노드에 접근하기
(1) Node 인터페이스의 주요 프로퍼티
(2) Document 인터페이스의 주요 프로퍼티 및 함수
(3) Element 인터페이스의 주요 프로퍼티 및 함수
(4) DOM API를 사용해서 HTML 문서의 정보를 탐색하는 예제
2.2 DOM API를 사용하여 문서 구조를 변경하기
(1) Document 인터페이스의 Element 노드 생성 함수
(2) Node 인터페이스의 DOM 트리 변경 관련 함수
(3) DOM API를 사용하여 HTML 화면 변경하는 예제
3. XML 응답 사용하기
3.1 서버에서 XML 응답 생성하기
3.2 responseXML로 XML 응답 읽어 오기
4. XSL/T를 사용하여 XML을 HTML로 변환하기
Chap 6 자바스크립트 객체 JSON 표기법
1. prototype을 사용한 자바스크립트 클래스 만들기
2. Object를 사용한 개별 객체에 프로퍼티 확장
3. JSON 표기법
4. 자바스크립트에서 패키지 정의하기
5. 클래스로 XMLHttpRequest 모듈 만들기
6. 응답 결과를 자바스크립트 객체로 저장하기
6.1 XML 응답을 객체로 변환
6.2 JSON 응답을 객체로 변환
6.3 XML JSON 응답을 객체로 변환
6.4 JSON 표기법 응답 생성시 주의점
Chap 7 Ajax로 구현한 댓글
1. 댓글 테이블 생성
2. 목록 및 폼 출력 위한 HTML 코드
3. 댓글 목록 읽기
4. 댓글 쓰기
5. 댓글 수정하기
6. 댓글 삭제하기
7. DB 클래스 소스 코드
Part 3 이벤트, CSS, 드래그&드롭
Chap 8 이벤트 처리
1. 이벤트 처리 방식과 이벤트 대상
1.1 고전 방식의 이벤트 처리
1.2 이벤트 리스너 방식 처리
1.3 이벤트 리스너 관련 모듈 만들기
1.4 이벤트 구하고 이벤트 대상 찾기
2. 마우스 이벤트
2.1 마우스 이벤트의 종류
2.2 마우스 이벤트 발생 위치 구하기
2.3 마우스 클릭 버튼 판별하기
2.4 마우스 이벤트 관련 모듈 추가
3. 키보드 이벤트
4. 이벤트 흐름
4.1 이벤트 전파 중지시키기
5. 이벤트 핸들러의 this 문제와 처리 방법
Chap 9 CSS 조작하기
1. CSS 스타일 변경하기
1.1 style 프로퍼티를 사용한 스타일 변경
1.2 className 프로퍼티를 사용한 CSS 클래스 변경
2. 크로스 브라우저 투명 처리 코드
3. CSS 스타일 값 구하기 문제 및 해결 방법
4. 요소의 위치와 크기
Chap 10 드래그 구현
1. 드래그 구현
1.1 단순 드래그를 지원하는 SimpleDragSource 모듈 작성
2. 드래그 & 드롭 구현
2.1 DNDManager 클래스
2.2 DropTarget 클래스
2.3 DragSource 클래스
2.4 드래그 & 드롭 예제
Part 4 MVC 패턴 구현
Chap 11 자바스크립트에서 MVC 패턴 구현하기
1. MVC 패턴이란
2. MVC 패턴의 구현
2.1 모델의 구현: CheckButtonModel
2.2 컨트롤러의 구현: CheckButton
2.3 뷰의 구현: CheckButtonUI
2.4 CheckButton 컴포넌트 사용
2.5 새로운 UI의 추가: CheckButtonUI2
Chap 12 MVC 패턴을 적용한 ComboBox 컴포넌트 만들기
1. CSS 레이어를 헤치지 않는 ComboBox 컴포넌트
1.1 모델: ComboBoxItem과 ComboBoxModel 구현
1.2 컨트롤러: ComboBox 구현
1.3 뷰: ComboBoxUI 구현
1.4 ComboBox 컴포넌트 사용하기
Part 5 보안
13장 XMLHttpRequest와 보안 문제와 프록시
1. XMLHttpRequest의 접속 보안 규칙
2. 프록시를 사용한 외부 사이트 접속 문제 해결 방법
2.1 JSP로 구현한 프록시
2.2 PHP로 구현한 프록시
Part 6 Ajax 예제
Chap 14 네이버 Open API를 사용한 검색 서비스 제공
1. 네이버 Open API
1.1 키 값 받기
1.2 서버에 쿼리 전송하는 방법
1.3 검색 결과 XML 문서의 구조
2. 네이버 오픈 API를 사용한 검색 서비스 구현
2.1 프로그램 구조
2.2 서버 프록시 프로그램
2.3 클라이언트 HTML 코드
2.4 naversearch.js 자바 스크립트 모듈
(1) ResultView 클래스
(2) NaverSearch 클래스
2.5 ajax.js의 수정된 부분
2.6 PHP로 구현한 프록시
Chap 15 연속된 <select> 선택 처리를 위한 DoubleSelect 모듈
1. 연속된 선택: 기존 방식과Ajax 방식 구현
2. DoubleSelect 모듈
Chap 16 Ajax로 구현한 채팅
1. 채팅 프로그램의 구성
2. 서버 측 프로그램
2.1 테이블 생성
2.2 로그인/로그아웃 처리
2.3 메시지 전송 처리
2.4 메시지 로딩 처리
3. 클라이언트 모델 부분: chat.ChatModel 클래스
3.1 로그인/로그아웃 처리 부분
3.2 메시지 로딩 부분
3.3 메시지 전송 부분
3.4 컨트롤러에 이벤트를 전달하는 notify 함수
4. 클라이언트 컨트롤러 부분: chat.Chat 클래스
5. 클라이언트 뷰 부분: chat.ChatUI 클래스
5.1 화면 생성 부분
5.2 로그인 처리 부분
5.3 메시지 입력과 로딩 처리 부분
5.4 로그아웃 처리/로그인 창 제어/대화 창 제어/에러 메시지 출력 부분
6. 전체적인 실행 흐름
7. chat.js 사용 예제 및 실행 결과
Chap 17 구글 개인화 페이지에 앨범 모듈 만들기
1. 구글 개인화 페이지 모듈 만들기
1.1 구글 베이스를 사용하여 모듈 만들기
1.2 모듈 XML의 기본 구성
1.3 콘텐츠의 3가지 종류
1.4 사용자 옵션 정보 지정하기
1.5 모듈 정보 지정하기
1.6 XMLHttpRequest를 대체하는 함수: _IG_FetchContent()
1.7 window.onload를 대체하는 함수: _IG_RegisterOnloadHandler()
1.8 별도 서버의 모듈 삽입하기
1.9 구글 홈페이지에 등록된 모듈 목록 보기
2. 오늘의 포토제닉 모듈 구현하기
2.1 포토제닉 자바스크립트 모듈: today_photo.js
(1) 모델 파트: tp.TodayPhotoSlideModel
(2) 컨트롤러 파트: tp.TodayPhotoSlide
(3) 뷰 파트: tp.TodayPhotoSlideUI
2.2 오늘의 포토 목록을 생성하는 서버 프로그램: today_photo.jsp
2.3 구글 개인화 모듈: tp_module.xml
[부록 A] PHP 예제 실행
1. 아파치 + PHP 설치
1.1 APM_Setup 5 설치하기
1.2 MySQL 루트 암호 변경하기
2. 2장 예제 PHP로 실행하기
3. 7장 댓글 예제 PHP로 실행하기
3.1 APM Setup의 MySQL 설정하고 관련 테이블 생성하기
3.2 7장 예제 PHP로 구현하기
[부록 B] 자바스크립트 클래스 상속 구현
1. 자바스크립트 클래스 상속 구현: prototype 키워드
2. 부모 클래스의 함수 호출하기: apply 함수 사용
3. 클래스 상속을 JSON으로 처리하기 위한 모듈
[부록 C] 캐시 처리 방법
1. 헤더를 지정하는 방법
2. URL 조작법
[부록 D] 관련 URL
/***** 저자 소개 *****/
자바캔 운영, 틀 프레임워크 개발 및 틀 프로젝트 캡틴, 씨브이네트 i 사업팀 개발파트
주요저서 <<JSP Professional>>, <<MVC 프레임워크로 구현한 JSP 실전 Know-how>>, <<JSP 2.0 기초부터 중급까지>>, <<Jakarta Projetct>>
/***** 노트 필기 *****/