[펌]jQuery in Action 정리 8장 - Ajax를 이용하여 서버와 대화하기

8.1 Ajax 간략히 살펴보기

8.1.1 XHR 인스턴스 생성하기

8.1.2 요청 보내기

8.1.3 진행 상황 추적하기

8.1.4 응답 얻기

• Ajax를 사용하는 개발자가 다뤄야할 고통
  • XHR 객체를 인스턴스화 하는데 브라우저에 종속적 코드 필요
  • 준비 핸들러는 필요없는 상태 변화를 걸러내야 한다.
  • 준비 핸들러는 XHR인스턴스를 호출하는 참조를 자동으로 얻지 못한다.
  • 응답결과는 형태에 따라 다양한 방법으로 다뤄야 한다.

8.2 엘리먼트에 콘텐츠 로드하기

• Ajax를 사용하는 가장 빈번한 상황은 서버에서 콘텐츠를 가져와서 원하는 DOM 위치에 삽입하는 것이다.
• 콘텐츠는 대상 컨테이너의 자식이 되는 HTML코드이거나 대상엘리먼트의 콘텐츠가 되는 보통 텍스트다.
• $('#someContainer).load('/serverResource'); - 간단하다.

8.2.1 jQuery로 콘텐츠 로드하기

• load(url, parameters, callback) - parameters 매개변수가 요청 매개변수로 제공되면 POST HTTP 메서드를 사용하여 요청을 만들고, 그렇지 않으면 GET 메서드로 요청을 만든다. (GET URL에 URI인코딩 형태의 쿼리문자열 추가)
• $('.injectMe').load('/someResource #div'); - 응답 엘리먼트에서 오직 <div>엘리먼트만 삽입한다.
• serialize() - 폼 컨트롤에서 요청 매개변수를 가져와 쿼리 문자열을 만들어줌(선택안된 체크박스 라디오버튼 드롭다운, 비활성화된 컨트롤과 같은 엘리먼트는 제외)
• serializeArray() - 자바스크립트 배열형태로 폼데이터를 반환. 폼 컨트롤 이름과 값을 name 프로퍼티와 value 프로퍼티로 가짐

8.2.2 목록 데이터 동적으로 로드하기

• $(function(){

             $('#styleDropdown')

                  .change(function(){   // 스타일 드롭다운을 감싸고 변경 핸들러를 바인딩한다.

                     var styleValue = $(this).val();

                     $('#detailsDisplay').load(

                            'getDetails.jsp',     // 선택된 스타일 데이터를 로드한다.

                            { style : styleValue } // GET 패러메터

                     );

                  })

                  .change();               // 변경 핸들러를 실행한다.

             });

8.3 GET과 POST 요청 만들기

• GET은 멱등 요청이며 캐시에 적합하다.
• POST는 데이터 전송에 주로 쓴다.

8.3.1 jQuery를 사용하여 데이터 얻기

• $.get(url, parameters, callback) - 명시된 URL을 사용하여 GET요청을 전송
• $.get( 'reflectData.jsp', {a:1, b:2, c:3}, function(data) {alert(data);} );

8.3.2 JSON 데이터 얻기

• XML이 데이터 전송기법으로 적당하지 않을때 사용
• $.getJSON(url, parameters, callback)

8.3.3 POST 요청 만들기

• $.post(url, parameters, callback)

8.4 Ajax 요청 직접 제어하기

8.4.1 Ajax 요청 직접 설정하고 생성하기

8.4.2 요청에 기본값 설정하기

8.4.3 전역함수