ajax / form

ayleen·2022년 1월 6일

Ajax와 form의 차이

서버와 데이터를 주고받는 방식에는 ajax와 form 두 가지 방식이 있다. ajax는 비동기 방식, form은 동기 방식이라는 차이점이 있다.

Ajax 비동기 통신

Ajax는 비동기 방식으로 서버와 통신한다. 비동기라함은 페이지 전환 없이 데이터를 주고받을 수 있다는 것을 말한다. 즉, 페이지 전체가 아닌 일부분만을 업데이트 할 수 있는 방식이다. 서버에서 데이터를 가져오는 동안 다른 작업을 동시에 바로 진행할 수있다. 대기 시간이 줄어들어 웹페이지를 효율적으로 사용할 수 있고, 역동성 있게 표현할 수 있다.

$.ajax({
	url: "ajax.do"
    type: "post"
    data: { 비동기 : "ajax",
    		동기 : "form"},
    success: function(data){
    
    },
    error: function(){
    	alert("통신실패")
    },
})

위의 코드가 기본적인 ajax 작성 코드이다.
url에 적힌 주소로 data를 보내서 type의 형태로 데이터를 보내주고 dataType의 형태로 데이터를 받아온다.
success는 통신성공시 실행되는 callback 함수이다.

form 동기 통신

form은 데이터를 주고받을때 페이지 전체가 리로드 되는 동기 방식이다.
action을 취하고 난 후에 페이지가 변경되는 경우에 사용을 하고, 주로 로그인 후 페이지를 이동할때 사용한다.(물론 ajax도 페이지 이동은 가능하다.)
전체 페이지를 리로드하기 때문에 서버의 부하가 더 크고, 매번 페이지를 새로 읽어와야 하기 때문에 시간도 오래 걸린다.

<form action="form.do">
	<input type="text" name="form">
</form>

위와 같은 방법이 비동기 방식을 사용하는 기본적인 코드이다. action으로 form태그에 들어있는 데이터를 보낸다.

serialize

ajax를 이용하여 데이터를 주고받을때 form요소를 통해 입력받은 데이터를 한꺼번에 전송해야할 때가 있다. 이때 ajax를 이용하면 데이터를 직렬화(serialization)하여 전송한다. 직렬화란 입력받은 데이터를 하나의 쿼리 문자열로 만드는 것을 의미한다. 이렇게 함으로써 form 요소를 통해 입력받은 데이터를 한 번에 서버로 보낼 수 있다.

<script>
function ajax(){
	var formValues() = $("form[name=sampleForm]").serialize();
	
	<br>
	$.ajax({
    	url: "test.do",
        type: "Get",
        data: formValues,
        success: function(json){
        	alert("테스트")
        },
        error: function(){
        	alert("실패")
        },
    })
}
</script>
<br>
<form name="sampleForm">
    <input type="text" name="id" value="ayleen">
    <input type="date" name="bday" value="2021-01-06">
</form>