AJAX 동기로 통신하는 방법

[Way]

---

'anync : false' 를 추가한다.

ansyc의 디폴트 값은 true이다

 

[Example]

---

버튼을 클릭했을 때 AJAX 통신을 예로 들겠다.

• 동기로 AJAX 통신

x
$('#button1').click(function(){
    console.log('Button Click Event Start');
    var _data = {
         'name' : 'kang'
        ,'age' : 28
    };
    var _url = 'getUserInfo.do'
    $.ajax({
         url : _url
        ,data : _data
        ,type : 'post'
        ,dataType : 'json'
        ,success : function(result){
            console.log('ajax success : ' + result);
        }
        ,error : function(request, status, error){
            console.log('ajax error : ' + status + ', ' + error);
        }
    })
    
    console.log('Button Click Event Finish');
})

위 상황의 경우 결과는

1. 'Button Click Event Start'
2. 'Button Click Event Finish'
3. 'ajax success : Data'

의 순서대로 출력된다. 하지만,

xxxxxxxxxx
$('#button1').click(function(){
    console.log('Button Click Event Start');
    var _data = {
         'name' : 'kang'
        ,'age' : 28
    };
    var _url = 'getUserInfo.do'
    $.ajax({
        async : false
        ,url : _url
        ,data : _data
        ,type : 'post'
        ,dataType : 'json'
        ,success : function(result){
            console.log('ajax success : ' + result);
        }
        ,error : function(request, status, error){
            console.log('ajax error : ' + status + ', ' + error);
        }
    })
    
    console.log('Button Click Event Finish');

위처럼 async : false 를 추가할 경우,

1. 'Button Click Event Start'
2. 'ajax success : Data'
3. 'Button Click Event Finish'

의 순서로 실행된다.