과목명: 웹프로그래밍응용교재: 모던웹을 위한 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®ion=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
Top Related