[jsp] Ajax 대기 시간, 타임아웃 등 통신설정 하는법

Ajax의 통신 설정을 알아보자

 

 

 

Ajax 응답시간동안 button을 클릭하지 못하게 비활성화 해달라는 요구가 있어서 한번 알아보았다.

 

 

2가지 방법이 있다.

 

1. Ajax

$.ajax({
	url: '/button.do',
	type: 'post',
	contentType: 'application/json:chrset=utf-8',
	data: data,
   	async: false,
	success: function(resData) {
		alert('성공!');
	},
	beforeSend: function() {
		$("btn").prop("disabled",true);
	},
	complete: function() {
		alert('응답이 옴');
	},
	error: function(request, status, error) {
		alert('error');
	}
	,timeout: 5000
});​

 

 - async : 동기 / 비동기 설정

     true : 비동기 처리 (로직 처리를 기다리는것이 아니라 나머지 코드가 먼저 실행됨)

     false : 동기 처리 (로직 처리를 기다리고 그 후에 나머지 코드가 실행됨)

 - success : ajax 응답 성공시 처리되는 로직

 - beforeSend : ajax가 서버에 요청하기 전에 수행되는 로직

 - complete : 어떤 결과가 와도 실행되는 로직 ( finally와 유사 )

 - error : ajax 응답 error시 처리되는 로직

 - timeout : 설정된 시간내에 응답 없을시 error

 

 

2. Ajax promise 패턴

$.ajax({
    url: '/button.do',
    type: 'post',
    contentType: 'application/json:chrset=utf-8',
    data: data,		
}).done(function(data) {
    alert('성공');
}).fail(function(err) {
    alert(err);
}).always(function(){
    alert('Finally');
});

 

 - done : 성공했을 때 처리되는 로직

 - faile : 실패했을 때 처리되는 로직

 - always : 항상 처리되는 로직

 

이 두가지 방법을 합쳐서 요구사항을 처리할수 있게 되었다!

 

$.ajax({
    url: "/button.do",
    method: "post",
    enctype: 'application/json:chrset=utf-8',
    processData: false,
    contentType: false,
    dataType: "json",
    data: data,
    beforeSend: function(){
        $("btn").prop("disabled",true);				
    }			
}).done(function(data) {
    alert('성공');
}).fail(function(err) {
    alert(err);
}).always(function(){
    $("btn").prop("disabled",false);
});

 

Ajax가 서버에 요청하기 전에만 button을 비활성화 하고 always 버튼을 활성화 시켜

요청하기 전에만 비활성화 하게끔 설정 해두었다!