Jquery Ajax 사용방법

Jquery Ajax 사용방법

안녕하세요 TriplexLab 입니다 :)

Jquery Ajax를 사용할려면 어느 시점에 이벤트가 발생하는지 알아볼 필요가 있습니다.‌
그건 보통 "라이프사이클"이라고도 부릅니다.
ReactJS, VueJS...등등 과 같은 라이브러리도 이런 라이프사이클들이 존재 합니다.

​jQuery 최신버전에서 사용가능한 메서드들

메서드	설명
ajaxStart	첫 번째 Ajax 요청이 시작될 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 보여주기 처리)
ajaxStop	모든 Ajax 요청이 완료되는 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 감추기 처리)
done	요청 성공시 호출
fail	요청 실패시 호출
always	성공 실패 상관없이 호출

 

jQuery 구 버전에서 사용가능한 메서드들

메서드	설명
timeout	응답제한시간 ms
success	요청 성공시 호출
beforeSend	ajax 요청하기전에 실행되는 함수 (ex 로딩 이미지 보여주기 처리)
complete	정상이든 비정상인든 실행이 완료될 경우 실행될 함수 (ex 로딩 이미지 감추기 처리)
error	요청 실패시 호출

 

//main.json
[
	{
		"id": 1,
		"name": "Mocade",
		"price": 350,
		"img": "img/pic4.jpg",
		"title": "Black Mocade",
		"text": "Hey look up! It's a plane! No, It's a bird! No, it's the assassin performing leap of faith."
	},
	{
		"id": 2,
		"name": "zipper",
		"price": 59,
		"img": "img/pic5.jpg",
		"title": "No zipper dress",
		"text": "The price of this dress has been cut off since we lost the zipper on the back."
	},
	{
		"id": 3,
		"name": "ernest",
		"price": 299,
		"img": "img/pic6.jpg",
		"title": "Dear Ernest",
		"text": "We'll bring readers to the edge of ther seats and keep them there until we sell this dress."
	}
]

 

//main.js
    $(document).ajaxStart(function(){  //불러오는 중입니다.을 실행한다.
        $('.loading').show();
    });
    $(document).ajaxStop(function(){   //불러오는 중입니다.를 종류한다.
        $('.loading').hide();
    });

    $.ajax({
        type: 'POST',
        dataType: "json",
        url: 'data/main.json',
    }).done(function(data){
        var number = 1;
        console.log(data.index)
        for(var i = 0; i < data.length; i++){
            var template =  '<li class="main__card wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="'+number / 10+'s'+'">';
                template += '<div class="main__card--bg">';
                template += '<h2 class="card__title">'+data[i].title+'</h2>';
                template += '<p class="card__text">'+data[i].text+'</p>';
                template += '<img class="thumb card__img" src="'+data[i].images+'" alt="상품이미지">';
                template += '<div class="card__footer">';
                template += '<p class="card__text card__text--secondary">'+data[i].Dday+'</p>';
                template += '</div> </div> </li>';
            $('.main__card--inner').append(template);
            number += 1;
        }
    }).fail(function(data){
        $('.main__card--inner').html('<h1 class="data__fail">데이를 불러오는데 실패했습니다.</h1>');
        $('.main__contents').css('padding','0');
        $('.main__contents .l__wrapper').css('position','static');
    });

 

done, fail, always 대신에
success , error, complete 를 사용해도 된다

//main.js
$.ajax ({
   url : "request.php”,
   timeout: 5000,                                      //"응답제한시간 ms"
   success : function(data) { console.log("data")},    //요청 성공시 호출
   beforeSend : function(data) { console.log("data")},  // ajax 요청하기전에 실행되는 함수 (이미지 보여주기 처리)
   complete : function(data) { console.log("data")},    // 정상이든 비정상인든 실행이 완료될 경우 실행될 함수 (이미지 감추기 처리)
   error : function(data) { console.log("data")},       //요청 실패시 호출
})
.done(function(){ console.log("done") })
.fail(function(){ console.log("fail") })
.always(function(){ console.log("always") })

 

사용 예시)

$.ajax({
        type: 'POST',
        dataType: "json",
        url: 'data/main.json',
        timeout: 1000,
        success: function(response){
            var number = 1;
            for(var i = 0; i < data.length; i++){
                var template =  '<li class="main__card wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="'+number / 10+'s'+'">';
                    template += '<div class="main__card--bg">';
                    template += '<h2 class="card__title">'+ response[i].title+'</h2>';
                    template += '<p class="card__text">'+ response[i].text+'</p>';
                    template += '<img class="thumb card__img" src="'+ response[i].images+'" alt="상품이미지">';
                    template += '<div class="card__footer">';
                    template += '<p class="card__text card__text--secondary">'+ response[i].Dday+'</p>';
                    template += '</div> </div> </li>';
                $('.main__card--inner').append(template);
                number += 1;
            }
        },
        beforeSend: function() {
            $('.loading').show();
        },
        complete: function() {
            $('.loading').hide();
        },
        error: function(request, status, error){
            $('.main__card--inner').html('<h1 class="data__fail">데이를 불러오는데 실패했습니다.</h1>');
            $('.main__contents').css('padding','0');
            $('.main__contents .l__wrapper').css('position','static');
        }
});