과목명: 웹프로그래밍응용교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어

2014년 1학기

Professor Seung-Hoon Choi

Part3. AjaxCh21. jQuery Ajax

21 jQuery Ajax

jQuery 의 Ajax 관련 메소드를 이용하여 더 쉽게 ajax 수행

19장의 예제로 계속 진행함

21.1 기본

코드 21-1– jQuery 라이브러리를 CDN을 이용해 설정함

ajax( ) 메소드– 두 가지 형태

$.ajax(options)

$.ajax(url, options);– url: 서버쪽 주소

– options: 옵션 객체

– 내부적으로 XMLHttpRequest 객체를 만들어서 ajax를 수행함

21.1 기본

코드 21-2– $.ajax(‘/data.html’, {

success: function(data) { }

} ajax 성공 시, success 이벤트 핸들러를 실행함

data: ajax 성공 시 서버로부터 받은 데이터

코드 21-3– ajax 실행 후, 받은 데이터를 현재 웹 페이지 body에 추가함

– 웹 브라우저에서 실행 http://127.0.0.1:52273/21-3.html

21.1 기본

코드 21-4– url 부분이 옵션 객체 안으로 들어감

코드 21-5– $.ajax( ) 메소드의 옵션 객체의 여러 가지 속성 이용함

type: ‘GET’인지 ‘POST’ 인지 지정함

data: 요청 매개 변수를 지정함

21.2 추가적인 jQuery Ajax 메소드

$.ajax( ) 보다 더 간단한 Ajax 메소드– $.get(): get 방식으로 Ajax를 수행함

– $.post(): post 방식으로 Ajax를 수행함

– $.getJSON(): get 방식으로 Ajax를 수행하고 JSON 데이터를 가져옴

– $.getScript(자바스크립트파일명): get 방식으로 Ajax를 수행하고 자바스크립트를 얻어와서 실행함

– $(selector).load(serverUrl): Ajax를 수행하고 선택자로서 선택한 문서 객체 안에 결과를 출력함

21.2 추가적인 jQuery Ajax 메소드

$.get( )– $.get(url, function(data, textStatus, jqXHR) { })

– $.get(url, dataToServer, function(data, textStatus, jqXHR) { })

– 인자 설명 url: 요청을 보낼 서버 URL

dataToServer: 요청 시 서버로 보낼 데이터

function(data, textStatus, jqXHR): 요청 성공 시 실행할 함수– data: 요청 결과 데이터

– textStatus : 요청의 상태를 나타내는 텍스트(“success”, “error” 등)

– jqXHR: XMLHttpRequset 객체

21.2 추가적인 jQuery Ajax 메소드

$.post( )– $.post(url, function(data, textStatus, jqXHR) { })

– $.post(url, dataToServer, function(data, textStatus, jqXHR) { })

– 인자 설명 url: 요청을 보낼 서버 URL

dataToServer: 요청 시 서버로 보낼 데이터

function(data, textStatus, jqXHR): 요청 성공 시 실행할 함수– data: 요청 결과 데이터

– textStatus : 요청의 상태를 나타내는 텍스트(“success”, “error” 등)

– jqXHR: XMLHttpRequset 객체

21.2 추가적인 jQuery Ajax 메소드

코드 21-6– $.get() 메소드 사용

코드 21-7– $(‘body’).load(‘/data.html’)

/data.html 에 보낸 요청 결과를 body 태그에 출력함

21.2 추가적인 jQuery Ajax 메소드

$.getJSON()– 이 책에서 가장 많이 사용할 jQuery Ajax 메소드

코드 21-8– $.getJSON(‘/data.json’, function(data) { … })

/data.json 으로의 요청 결과인 JSON 객체가 data 변수에 담긴다.– 이 예제에서는 JSON 객체 배열(item 객체 배열)이 담긴다.

eval( ) 함수를 이용하여 JSON 객체로 변경할 필요가 없음

$.getJSON( )의 결과가 JSON 규정에 맞지 않으면 문자열이 data에 담긴다.

21.3 XML 조작

XML 문서에 대해서는 find( ) 를 이용하여 원하는 태그를찾는다.

– 코드 21-9, 코드 21-10, 21-11

21.4 데이터 요청 방식

요청하는 웹 페이지 작성– 코드 21-12

버튼을 클릭하면 해당 요청이 실행되도록 함

21.4.1 GET 요청

코드 21-13– Ajax 요청 시 url은 ‘/products 이며, 결과는 JSON 객체

Ajax 요청 시 dataType 속성을 ‘text’로 지정해야 결과가 문자열로출력됨

21.4.2 POST 요청

코드 21-14– Ajax에 POST 요청 시, data 속성에 JSON 객체를 지정한다.

21.4.3 PUT 요청

코드 21-15– 0 번째 데이터를 수정하도록 요청함

21.4.4 DELETE 요청

코드 21-15– 0 번째 데이터를 삭제함

21.5 보조 메소드

표21-3 보조 메소드– serialize()

입력 양식의 내용을 요청 매개변수 문자열로 만듭니다.

– serializeArray() 입력 양식의 내용을 객체로 만듭니다.

– $.param() 객체의 내용을 요청 매개변수 문자열로 만듭니다.

21.5 보조 메소드

$.param(data)– data 객체의 내용을 요청 매개변수 문자열로 만듭니다.

코드 21-17– 객체의 내용을 쿼리 문자열로 바꿈

21.5 보조 메소드

serialize()와 serializeArray()– 입력 양식과 함께 사용됨

코드 21-18– Name과 Region 으로 구성된 입력 양식 작성

코드 21-19– 입력 양식에 submit 이벤트 핸들러를 연결함

event.preventDefault()를 이용하여 기본 핸들러를 제거함

21.5 보조 메소드

Ajax 요청 시 매개변수 전달 방법 5가지를 소개한다.

Ajax 요청 시 매개변수 전달 방법 #1– 입력 양식에서 value 속성을 직접 가져와서 URL을 생성함

– 가장 단순하고 비효율적임

– 코드 21-20

21.5 보조 메소드

Ajax 요청 시 매개변수 전달 방법 #2– 입력 양식의 value 속성을 직접 가져와서 객체를 만든다.

– 만든 객체에 param( ) 메소드를 적용하여 쿼리 문자열을 만든다.

– 이 쿼리 문자열을 이용해서 Ajax 요청을 수행한다.

– 역시 비효율적임

– 코드 21-21

21.5 보조 메소드

Ajax 요청 시 매개변수 전달 방법 #3– 입력 양식의 value 속성을 가져온 후 이를 이용해서 객체를 만

든다.

– 이 객체를 Ajax 관련 메소드의 data 속성에 넣어서 Ajax 요청을 수행한다.

– 코드 21-22

21.5 보조 메소드

Ajax 요청 시 매개변수 전달 방법 #4– serialize( ) 메소드를 이용하여, 입력 양식의 값들을 쿼리 문자

열로 바꾼 후, Ajax 요청을 수행한다.

– 추천하는 방법임

– 코드 21-23

21.5 보조 메소드

Ajax 요청 시 매개변수 전달 방법 #5– serializeArray( ) 메소드를 이용하여, 입력 양식의 값들을 객체

배열로 만든 후, Ajax 요청을 수행한다.

– 추천하는 방법임

– 코드 21-24

21.5 보조 메소드

serialize()와 serializeArray( ) 차이점– serialize(): 쿼리 문자열을 리턴함

예: name=csh&region=Seoul

– serializeArray( ): 객체 배열을 리턴함 예: [

{name: ‘name’, value: ‘csh’}

{name: ‘region’, value: ‘seoul’ }

]

– 코드 21-25

21.6 이벤트 관리

Ajax 요청이 수행되는 동안 상태에 따라 이벤트가 발생하며, 이 때를 위한 이벤트 핸들러를 달 수 있다.

표21-4 jQuery Ajax 이벤트 연결 메소드– ajaxComplete(함수): Ajax 요청이 완료되면 함수를 실행해라.

– ajaxError (함수): Ajax 요청이 실패할 때 함수를 실행해라.

– ajaxSend (함수): Ajax 요청을 보낼 때 함수를 실행해라.

– ajaxStart (함수): Ajax 요청이 시작될 때 함수를 실행해라.

– ajaxStop (함수): Ajax 요청이 중지할 때 함수를 실행해라.

– ajaxSuccess (함수): Ajax 요청이 성공할 때 함수를 실행해라.

코드 21-27