jQuery Ajax 알아보기

jQuery Ajax Core Method

jQuery Ajax 이해하는 데 필요한 핵심 메서드에 대해 알아보도록 합니다.

jQuery Ajax 에 사용되는 메서드는 다음과 같은 것이 있습니다.

• .load()
• jQuery.get()
• jQuery.post()
• jQuery.ajax()
• jQuery.ajaxSetup()

.load()

load( url, [data,] [complete(reponseText, textStatus, XMLHttpRequest)])

load 메서드는 주로 외부 파일에 들어 있는 콘텐츠를 읽어 들여 특정 엘리먼트에 추가할 때 사용할 수 있습니다.

즉, 이 메서드는 서버 주소나 파일 위치로부터 html 콘텐츠를 읽어오는데 사용됩니다. 매개변수 url 에 주소 또는 파일위치를 설정하면 파일 안의 html 콘텐츠 요소를 선택하여 읽어 올 수 있습니다.

예를 들어 demo01.html 과 demo02.html 인 외부 파일(페이지)을 읽어들여 삽입하고자 하는 곳에 읽어 들인 것을 추가하는 작업을 할 수 있습니다.

load() 메서드는 html 콘텐츠를 붙이고자 하는 위치를 selector 로 선택한 후 확장집합에 메서드를 호출합니다.

javascript

$(selector).load();

url - @type : 문자열

html 콘텐츠를 읽어올 서버주소나 파일 위치를 지정합니다.

한 칸(공백 띄고 selector 로 html 콘텐츠안의 엘리먼트를 선택하여 확장집합으로 만들어 반환하게 됩니다.

다음의 코드는 /html/test.html 루트 파일의 html 콘텐츠에서 아이디가 page 인 엘리먼트를 찾아 확장집합으로 만들어 반환시키는 것입니다.

javascript

load('/html/test.html #page');

data - @type : 객체 또는 문자열

서버에서 파일을 불러올 때 매개변수 data 에 설정한 값을 전송하는 것이며 생략 가능합니다.

complete() - @type : 함수

html 콘텐츠의 로드가 완료되면 함수를 호출합니다.

다음은 sub/data.html 파일을 가져와서 붙여 넣는 예제입니다.

파일을 가져와 넣을 파일의 마크업은 아래와 같습니다.

html

<div id="container">
    이 곳에 sub/sub.html 파일의 HTML 콘텐츠를 삽입하기
</div>

다음은 로드하려는 sub/sub.html 파일의 마크업 구조는 아래와 같습니다.

<div id="page">
    <div id="header">This is sub file.</div>
    <div id="contents">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, quae.</p>
        <p>Lorem ipsum adipisicing dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit adipisicing amet.</p>
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

이제 sub/sub.html 파일의 아이디가 page 인 엘리먼트를 선택하여 html 콘텐츠를 로드할 수 있도록 다음과 같이 스크립트를 작성하도록 합니다.

javascript

var $container = $('#container');
$container.load('sub/sub.html #page');

jQuery .get(url, data, success, dataType)

jQuery.get(url, [data,] [success(data, textStatus, jqXHR),] [dataType])

• 기능 : 서버에 데이터를 HTTP GET 방식으로 보내고 서버 측 응답을 주로 XML, CSV 타입으로 받을 때 사용합니다.

get() 메서드는 주로 xml, json 등과 같은 데이터를 서버나 파일 위치로부터 불러올 대 사용합니다.

매개변수 url 로부터 파일을 불러오며 로드가 완료되면 success 매개변수의 콜백 함수를 호출합니다.

불러온 데이터는 dataType 으로 데이터의 형태를 지정할 수 있습니다.get() 메서드는 데이터 로드가 완료되면 success 콜백함수가 호출되면서 success 함수에 매개변수 data 로 데이터가 넘어오는데 그 이유는 selector 로 선택한 엘리먼트에 붙지 않고 변수로 넘어보기 때문입니다.

url - @type : 문자열

불러올려는 파일의 서버 주소 또는 파일 위치를 설정합니다.

data - @type : 객체 또는 문자열

서버에서 파일을 불러올 때 매개변수 data 에 설정한 값을 전송하는 것이며 생략 가능합니다.

success - @type :함수

데이터 로드가 완료되면 함수가 호출됩니다.

이때 호출되는 함수에는 매개변수 data 에 로드된 데이터가 넘어옵니다.

dataType - @type : 문자열

로드된 데이터의 형태를 지정합니다.

json 데이터 로드 예제

get() 메서드를 호출하여 sub/data.json 파일을 로드하고 데이터에서 값을 추출합니다.

json 데이터를 로드하고 나서 넘겨 받은 데이터를 console.log() 함수에 넘겨 데이터를 확인해 보도록 합니다.

javascript

$.get('sub/data.json', function (data) {
    console.log(data);
});

json

{
	"trip" : [
		{
			"country" : "덴마크",
			"price" : "100만원",
			"date" : "2016.05.10",
			"air" : "핀란드"
		},
		{
			"country" : "스웨덴",
			"price" : "120만원",
			"date" : "2016.05.20",
			"air" : "핀란드"
		},
		{
			"country" : "터키",
			"price" : "70만원",
			"date" : "2016.06.10",
			"air" : "아시아나"
		},
		{
			"country" : "이태리",
			"price" : "90만원",
			"date" : "2016.05.15",
			"air" : "대한항공"
		}
	]
}

위의 json 데이터를 다음 마크업의 table 에 로드해 보도록 합니다.

html

<div id="table-wrap">
    <h2>각 영역에 맞는 값을 추가하기</h2>
    <table id="trap-data" border="1" cellpadding="10" cellspacing="0">
        <tbody>
            <tr class="head">
                <td>여행지</td>
                <td>여행 경비</td>
                <td>여행 출발일</td>
                <td>항공편</td>
            </tr>
            <tr>
                <td></td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td></td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td></td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td></td>
                <td> </td>
                <td> </td>
                <td> </td>
            </tr>
        </tbody>
    </table>
</div>

javascript

$.get('sub/data.json', function (data) {

    var trips = data.trip;
    var $table = $('#table-wrap');

    for (var i in trips) {

        var trip = trips[i];
        var cnt = 0;

        for (var prop in trip) {

            var text = trip[prop];
            console.log(text);
            var tr = $table.find('tr').eq(parseInt(i) + 1);
            var td = tr.find('>td').eq(cnt);
            td.text(text);
            cnt++;

        }
    }

}, 'json');

jQuery.post()

jQuery.post( url, [data,] [success(data, textStatus, jqXHR)])

• 기능 : 서버에 데이터를 HTTP POST 방식으로 보내고 서버 측 응답을 받을 때 사용합니다.

jQuery.getJSON()

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)])

• 기능 : 서버에 데이터를 HTTP GET 방식으로 보내고 서버 측 응답을 JSON 형식으로 받을 때 사용합니다.

jQuery.ajax()

jQuery.ajax(configs)

위에서 살펴 본 jQuery.get(), jQuery.post(), jQuery.getJSON() 는 사실 jQuery.ajax() 메서드의 일부분에 해당할 뿐입니다.

jQuery.ajax() 메서드 내부에는 위 메서드가 존재합니다.

다시 말해, jQuery.get() 대신에 jQuery.ajax() 를 이용하여 같은 작업을 할 수 있다는 것입니다. jQuery.post(), jQuery.getJSON() 도 역시 jQuery.ajax() 메서드로 대체할 수 있습니다.

다음은 매개변수 옵션 중 자주 사용되는 옵션을 정리한 표입니다.

options(옵션)	description
url	로드할 파일의 서버 주소 또는 파일 위치를 설정한다. @type : 문자열
type	데이터 연동 방식을 GET 또는 POST 방식으로 설정한다. @type : 문자열, 생략 시 기본값은 GET
dataType	로드된 데이터의 형태를 지정한다. @type : 문자열
async	true 일 때는 동기식 호출, false 일 때는 비동기식으로 호출 @type : Boolean, 생략 시 기본값은 true
success	데이터 로드가 완료되면 호출되는 함수이다. @type : 함수
error	데이터 로드 실패 시에 호출되는 함수이다. @type : 함수

javascript

$.ajax({
    url : 'sub/data.json',
    type : 'get',
    dataType : 'json',
    success : function (data) {
        console.log(data);
    },
    error : function () {
        console.log('데이터를 불러오는데 실패하였습니다.');
    }
});

Jaehee's WebClub