서문 <br/>1장. Ajax 사용하기: 차세대 웹 애플리케이션 <br/><br/>웹 리로디드 <br/>새 천년이 밝았습니다 <br/>"리로드? 우린 그 구질구질한 리로드가 필요 없어요." <br/>요점 정리: 1장 <br/>요청 객체 만들기 <br/>PHP... 잠깐 살펴보기 <br/>지금까지 서버는 어떻게 해왔을까요? <br/>서버가 지금은 뭘 해야 할까요? <br/>연결 초기화 <br/>웹 서버에 연결하기 <br/>이벤트 핸들러 추가하기 <br/>웹 리포트 업데이트하기<br/>웹 애플리케이션의 동작 과정을 살펴봅시다... <br/>웹 브라우저를 소개합니다. <br/>브라우저는 서버의 응답을 어떻게 처리해야 할까요? <br/>브라우저에 명령하기 <br/>서버의 응답 받기 <br/>준비 상태 점검하기 <br/>60초 복습 <br/><br/>2장. 말하기부터: Ajax 요청 만들기 <br/><br/>죽여주는 피자 배달 <br/>Ajax식 죽여주는 피자 <br/>HTML 101: 사용자의 입력받기 <br/>이벤트 핸들러로 HTML과 자바스크립트 연결하기 <br/>DOM으로 전화번호 가져오기 <br/>웹 브라우저는 어디 있나요? <br/>요청 객체 만들기(다시 보기) <br/>다양한 브라우저 지원하기 <br/>자바스크립트는 꼭 함수일 필요가 없어요 <br/>PHP... 잠깐 살펴보기 <br/>요청 URL이 데이터를 서버에 배달합니다 <br/>서버에 요청을 보냅시다 <br/>서버에서 데이터 받아오기 <br/>HTTP 준비 상태 <br/>준비 상태 검사하기 <br/>브라우저가 무슨 일을 할까요? <br/>요청 객체에서 서버의 응답 읽기 <br/>죽여주는 피자 애플리케이션을 테스트해 보기 <br/>브라우저가 요청 URL을 캐시하면... <br/>60초 복습 <br/><br/>쉬어가기 : 일급비밀<br/><br/>3장. 비동기에 푹 빠졌어요: 비동기 애플리케이션 <br/><br/>비동기라는 말이 도대체 무슨 뜻일까요? <br/>Ajax식 커피 메이커 만들기 <br/>Ajax 애플리케이션의 반복적 개발 <br/>자바스크립트를 외부 파일로 빼내기 <br/>자바스크립트 쪼개기 <br/>비동기 요청 보내기 <br/>라디오 그룹의 값 가져오기 <br/>커피 한 잔과 함께: 비동기와 동기 애플리케이션 <br/><div>의 텍스트 내용 가져오기 <br/><div>에 텍스트 쓰기 <br/>주문 양식 정리 <br/>PHP... 잠깐 살펴보기 <br/>콜백 함수 만들기 <br/>자바스크립트 substring() 함수를 소개합니다 <br/>마지막 테스트(정말 마지막일까요?) <br/>두 개의 요청 객체가 필요합니다!<br/>두 개의 요청 객체 만들기 <br/>비동기의 세계에 오신 것을 환영합니다!<br/><br/>4장. 웹 페이지 조경: 도큐먼트 객체 모델 <br/><br/>역동적인 애플리케이션이 필요한가요? <br/>DOM을 만나요 <br/>Ajax 없이 DOM 사용하기 <br/>브라우저가 보는 HTML <br/>자신만의 웹 사전을 만들어보세요 <br/>브라우저에서는 순서도 중요합니다 <br/>브라우저는 세상을 위에서 아래로 본답니다 <br/>DOM 나무 <br/>DOM 나무 둘러보기 <br/>노드는 거의... 모든 것을 알고 있어요 <br/>몇몇 브라우저는 노드를 알아보지 못해요 <br/>4장의 코딩 대 도전<br/><br/>4.5장. 다시 들여다보기: DOM 애플리케이션 개발하기<br/><br/>모든 사람이 비평가입니다 <br/>계획은 세웠나요? <br/>큰 그림 <br/>CD 커버 설정하기 <br/>프로그래밍으로 이벤트 핸들러를 추가해봅시다 <br/>CD를 Top 5에 추가하기 <br/>"this"를 주의하세요 <br/>엘리먼트에 자식 추가하기 <br/>엘리먼트는 부모를 하나만 가질 수 있어요 <br/>DOM 나무에 몇 가지 더 추가하기 <br/>최종 테스트<br/> <br/>5장. POST로 보다 풍부한 표현을…: POST 요청 <br/><br/>비즈니스를 다시 살펴 봅시다 <br/>Ajax로 폼 전송하기 <br/>서버에 주문 보내기 <br/>PHP... 잠깐 살펴보기 <br/>일이 잘못될 때 <br/>DOM은 고객이 보는 화면과 연결되어 있어요 <br/>죽여주는 피자 테스트 <br/>에러 메시지와 응답 헤더 <br/>서버가 응답합니다 <br/>죽여주는 피자의 에러 처리 <br/>GET 요청 대 POST 요청 <br/>웹 서버는 POST 데이터를 해독합니다. <br/>POST로 좀 더 많은 데이터 보내기 <br/>POST 요청 시험해 보기 <br/>알 수 없는 POST 데이터 <br/>요청 헤더 <br/>응답 헤더 <br/>컨텐트 타입 설정하기 <br/><br/>쉬어가기 : 카오스 프로젝트<br/><br/>6장 말로 표현하는 것을 넘어서: XML 요청과 응답 <br/><br/>서버는 말을 별로 안해요 <br/>목소리를 높여요 <br/>서버의 부실한 어휘집 <br/>XML: 의사가 처방한 바로 그것이예요 <br/>우리들의 보드 'R' 다시 보기 <br/>우리들의 보드 'R'의 문제점 <br/>상업용 데이터 포맷의 문제점 <br/>XML로 처방전 채우기 <br/>PHP... 잠깐 살펴보기 <br/>responseText를 사용해서 XML 그대로 가져오기 <br/>DOM 나무 기억나시죠? <br/>responseXML 사용하기 <br/>태그 이름으로 엘리먼트 찾기 <br/>우리들의 보드 'R'의 XML 테스트하기 <br/>다른 언어를 정의하기 위한 언어로서의 XML <br/>모든 경우에 XML을 사용하려 하지는 마세요 <br/>요청을 위한 XML은? <br/>어떤 데이터 포맷을 쓸까요?<br/><br/>7장. 진검 승부: JSON 대 XML <br/><br/>새로운 데이터 포맷 <br/>요청과 응답 포맷에 대한 복습 <br/>파이터: XML과 JSON <br/>DOM을 사용해서 XML을 처리합니다 <br/>JSON은 "보통" 자바스크립트로 다룹니다 <br/>JSON은 자바스크립트입니다 <br/>JSON 데이터 포맷 <br/>서버에서의 JSON <br/>텍스트와 JSON <br/>요청에 어떤 데이터 포맷을 담아야 할까요? <br/>어떤 데이터 포맷이 더 나을까요?<br/><br/>부록 1. 특별 보너스: 기타 등등 <br/><br/>Ajax 도구상자 <br/>script.aculo.us와 다른 UI 라이브러리 <br/>DOM 살펴보기 <br/>PHP 스크립트에서 JSON 라이브러리 사용하기 <br/>JSON에 eval() 사용하기<br/><br/>부록 2. 코드를 줘요 : ajax와 DOM 유틸리티 <br/><br/>ajax.js <br/>ajax.js 사용하기 <br/>text-utils.js <br/>text-utils.js 사용하기 <br/><br/>찾아보기

서문
당신의 뇌가 드디어 Ajax를 만났습니다.
자, 이제 여러분은 무언가를 배우기 시작했습니다. 그런데 여러분의 머리는 여러분에게 그 배움에 집착할 필요가 없다고 말합니다. 당신의 머리는 이렇게 생각하기 시작합니다. "더 중요한 문제를 봐야 해. 어떤 야생 동물이 위험한가, 혹은 발가벗고 스노보드를 타는 것이 나쁜 생각인가 등등." 자, 어떻게 하면 당신의 삶이 비동기 프로그래밍을 배우느냐 아니냐에 달려 있다고 당신의 머리를 속일 수 있을까요?

차세대 웹 애플리케이션
1장. Ajax 사용하기
웹 애플리케이션에 광을 내 봅시다.
투박한 웹 인터페이스, 그리고 매번 리로드하는 페이지에 질리셨나요? 그렇다면 이제 웹 애플리케이션에 솔잎 향기가 나는 데스크탑 애플리케이션과 같은 느낌을 줘봅시다. 무슨 소리냐구요? 바로 지금 웹을 강타하고 있는 신기술, Ajax(asynchronous JavaScript and XML) 얘깁니다. 여러분은 좀더 활발하고 기민하고 사용하기 쉬운 막강한 인터넷 애플리케이션을 만들 수 있는 기회를 잡았습니다.

Ajax 요청 만들기
2장. 말하기
이제 비동기로 말하기를 배울 때가 왔습니다.
여러분이 차세대 킬러 애플리케이션을 만들려고 생각하고 있다면 Ajax를 안팎으로 이해할 필요가 있습니다. 이번 장에서는 비동기 자바스크립트의 내부를 자세히 살펴볼 것입니다. 어떻게 다른 브라우저에서 요청을 보내는지를 배우고, 준비 상태와 상태 코드를 마스터할 것입니다. 그러면서 필요한 몇 가지 특별한 동적인 HTML도 배울 꺼구요. 다 배울 때쯤이면 거의 프로와 마찬가지로 요청을 만들고 응답을 처리할 수 있게 될 겁니다. 근데 여러분의 고객들은 여러분이 다 배울 때까지 기다리지 않을 거라고 말했었죠?

비동기 애플리케이션
3장. 비동기에 푹 빠졌어요
대기실요? 죄송합니다만 그런 건 없는데요.
웹은 병원 대기실이 아닙니다. 웹에서 철 지난 잡지를 읽으면서 기다리고 싶어하는 사람은 아무도 없습니다. 이제까지 Ajax를 통해서 페이지를 다시 읽는 것을 얼마나 줄일 수 있는지를 살펴보았다면, 이번엔 어떻게 하면 웹 페이지의 중요 부분이 사용자의 요청에 빠르게 대응하게 할 수 있는지를 알아볼 차례입니다. 이번 장에서 사용자의 요청을 서버로 보내는 방법과 또한 응답을 기다리는 동안 사용자가 다른 작업을 할 수 있게 하는 방법을 배울 것입니다. 사실 이 책도 마찬가지입니다. 기다릴 필요 없이 페이지를 넘기면 바로 시작합니다.

도큐먼트 객체 모델
4장. Web Page Forestry 웹 페이지 조경
구합니다: 업데이트하기 쉬운 웹 페이지를 구합니다.
이제 직접 웹 페이지를 바로바로 업데이트하는 코드를 만들어 봅시다. 도큐먼트 객체 모델을 쓰면 웹 페이지는 새 생명을 얻을 수 있습니다. 사용자의 동작에 바로 응답하고 필요 없는 페이지 리로드를 영원히 없애버릴 수 있습니다. 이 장이 끝날 때쯤 여러분은 웹 페이지의 어느 부분이든 그 내용을 추가하거나, 없애거나, 업데이트할 수 있습니다. 자, 페이지를 넘겨서 웹 마을 수목원으로 들어가 봅시다.

DOM 애플리케이션 개발하기
4.5장. 다시 들여다보기
DOM을 더 배우고 싶다구요?
마지막 장에 웹 페이지를 업데이트하기 위한 가장 멋진 방법, 도큐먼트 객체 모델에 대한 꽤 어려운 과정을 준비해 놨어요. 하지만 그걸로도 부족하게 느끼시겠죠. 그래서 이번 장에서는 방금 배운 내용을 활용할 수 있도록 DOM에 기반한 깔끔한 애플리케이션을 만들어 볼 것입니다. 그러면서 새 이벤트 핸들러도 배우고 어떻게 노드의 스타일을 바꾸는지, 사용자에게 친숙하고 역동적인 애플리케이션은 어떻게 만드는지 등을 살펴볼 겁니다. 이번 장은 여러분의 DOM 기술을 완전히 새로운 차원으로 업그레이드시켜 줄 것입니다.

POST 요청
5장. POST로 보다 풍부한 표현을...
기다리고 기다리던 바로 그 순간이 왔습니다.
여러분이 배우고 싶었던 바로 그것, 그걸 지금 살펴 볼 것입니다: 마침내 send(null)를 버릴 때가 왔습니다. 그리고 서버에 좀 더 많은 데이터를 보낼 수 있는 방법을 배워봅시다. 아주 약간의 작업만 더 하면 됩니다. 하지만 이번 장이 끝날 때쯤 여러분은 "데이터 없음" 대신에 더 많은 이야기를 서버에 해줄 수 있을 것입니다. 물론 비동기 요청을 통해서죠. 자, 우리는 지금 POST 나라에 들어왔습니다. 안전벨트를 꽉 매시고 컨텐트 타입의 세계로, 요청 헤더의 세계로 여행을 떠나봅시다.



XML 요청과 응답
6장. 말로 표현하는 것을 넘어서
아무도 당신 말을 안 듣는 것 같나요?
때때로 자연 언어로 의사소통하는 것이 더 힘든 경우가 있습니다. 지금까지 요청과 응답에서 텍스트를 사용해왔습니다만, 이제 일반 텍스트의 껍질을 깨고 나가 봅시다. 이번 장에서는 XML에 빠져볼 것입니다. 일반 텍스트만 쓸 때보다 서버가 훨씬 더 많은 이야기를 하도록 만들 수 있습니다. 그것뿐만이 아닙니다. 요청 자체도 XML로 할 수 있습니다. 비록 그것이 항상 좋은 방법은 아니지만요(자세한 것은 내용을 보세요). 준비되셨나요? 이번 장을 마치고 나면 요청과 응답은 지금까지와는 완전히 달라질 것입니다.

JSON 대 XML
7장. 진검 승부
초등학교 시절로 돌아가봅시다.
그 때 그 시절이 기억나시나요? 조금만 의견이 다르면 거친 말이 오가고 주먹이 날아다니고 또 어설픈 쿵후 흉내까지 하던 시절요. 교실 여기저기서 "싸워라~ 싸워라~"하는 말만큼 흥분되는 일이 없었던 때를 기억하시나요? 이번 장에서는 잠깐 그 때로 돌아가볼 겁니다. 그리고 친근한 단어들, 황금률 같은 건 잠깐 접어두겠습니다. XML과 JSON은 비동기 요청에서 데이터를 보내고 받는 두 가지 다른 포맷입니다. 이 두 포맷의 차이점을 링 위에 올려놓고 붙여 볼 것입니다. 점수판을 준비하시고 자, 공 울립니다!

부록 1: 기타 등등
a.1 특별 보너스
당신만을 위한 Head First Labs의 작별 선물입니다.
부록에는 다섯 가지 특별 보너스가 선물로 제공됩니다. 핵심을 잘 설명하고 더 많은 이야기를 해주고 싶었지만, 이제는 여러분이 배운 것을 직접 차갑고 냉혹한 현실 속의 웹 프로그래밍에 적용해 봐야 합니다. 우리는 당신이 아무 준비도 없이 출발하길 바라지 않습니다. 그래서 이 책에 다 압축해 넣을 수 없었던 다섯 가지를 부록에서 제공합니다.

부록 2: Ajax와 DOM 유틸리티
a.2 코드를 줘요
보너스가 하나 더 있어요.
이번 부록에는 이 책의 앞부분에서 그냥 건너 뛰었던 몇 가지 고급 유틸리티 코드가 있습니다. 하지만 이제는 이 Ajax와 DOM 유틸리티 함수를 이해할 수 있어야 할 것입니다.

Ajax와 비동기 프로그래밍이란

-. Ajax는 Asycronous Javascript and XML의 약자로써 페이지의 리로드 없이 윈도우 어플리케이션처럼 동작하도록 XML, HTTP와 자바스크립트를 이용한 클라이언트 기반 프로그래밍 기술이다.
-. 이전의 동기 통신에서는, 애플리케이션이 서버와의 상호작용(대화)을 필요로 하는 때에 매번 브라우저가 사용자와의 상호작용(대화)을 멈추고, 서버로부터 응답이 올 때까지 기다리고 맙니다. 따라서, 사용자가 그 대기 시간의 사이에 아무것도 하는 일 없이, 그저 화면을 멍하니 바라보는 수밖에 없었죠.
이에 반해 비동기 통신에서는, 사용자가의 동작을 멈추는 일 없이, 연속적인 작업을 이어갈 수 있습니다. 이러한 통신을 구현하는 것이 비동기 프로그래밍입니다.

.

" 만약 Ajax가 별로 머리 쓸 필요 없는 단순한 것이라고 생각한다면 이 책을 한 번 읽어보세요. Head Rush Ajax가 역동적이고 눈을 뗄 수 없는 경험을 맛보게 해줄 것입니다."
제시 제임스 가렛, 어댑티브 패스

이건 머리를 맑게 해주는 청량음료입니다. 볼 때마다 새롭죠.
파울린 맥나마라, 스위스 프라이부르크 대학 신기술 및 교육 센터

첨단을 걷고 있는 웹 프로그래머에게 기술을 현실화시키는 방법을 가르쳐주는 책입니다.
발렌틴 크레타쯔, 스위스의 콘드리스 테크놀로지 대표