Ajax - jQuery로 GET 요청하기

jQuery 라이브러리가 제공하는 Ajax 관련 메서드를 활용하여 데이터를 가져오는 방법에 대한 내용이다. 먼저 jQuery가 제공하는 Ajax 관련 메서드는 아래와 같다.

메서드 이름	설명
$.ajax()	범용적인 Ajax 관련 메서드이다.
$.get()	get 방식으로 Ajax를 실행한다.
$.post()	post 방식으로 Ajax를 실행한다.
$.getJSON()	get 방식으로 Ajax를 실행해 JSON 데이터를 가져온다.
$.getScript()	get 방식으로 Ajax를 실행해 Script 데이터를 가져온다.
$(<선택자>).load()	Ajax를 수행하고 선택자로 선택한 문서 객체 안에 집어넣는다.
$(<선택자>).serialize()	입력 양식의 내용을 요청 매개변수 문자열로 만든다.
$(<선택자>).serializeArray()	입력 양식의 내용을 객체로 만든다.
$.param()	객체의 내용을 요청 매개변수 문자열로 만든다.

$.ajax() 메서드는 가장 기본적인 jQuery의 Ajax 관련 메서드이다. $.ajax() 메서드는 두 가지 형태로 사용할 수 있다.

$.ajax(option) $.ajax(url, option)

위의 형태 내부에 들어가는 option 객체의 속성은 대부분 자동으로 지정이 되고, 아래의 표는 그 옵션들이다.

옵션 속성 이름	설명	자료형
async	동기, 비동기를 지정한다.	Boolean
complete(xhr, status)	Ajax 완료 이벤트 리스너를 지정한다.	Function
data	요청 매개변수를 지정한다.	Object, String
error(xhr, status, error)	Ajax 실패 이벤트 리스너를 지정한다.	Function
jsonp	JSONP 매개변수 이름을 지정한다.	String
jsonpCallback	JSONP 콜백 함수 이름을 지정한다.	String, Function
success(data, status, xhr)	Ajax 성공 이벤트 리스너를 지정한다.	Function, Array
timeout	만료 시간을 지정한다.	Number
type	'GET' 또는 'POST' 등을 지정한다.	String
url	대상 URL을 지정한다.	String

프로젝트 폴더 안의 index.html 문서의 <script> 태그안에 작성을 한다. 

위에서부터 /data.html, /data.xml 그리고 /data.json이다. XML 문서 객체를 다룰때는 .find() 메서드를 사용해서 메서드의 매개변수로 찾고자 하는 태그의 이름을 입력한다. JSON 문서 객체는 .forEach() 메서드를 이용해 간단하게 만들 수 있다.

jQuery로 GET 요청하기.zip

0.08MB