[jQuery / 제이쿼리] form전송 VS Ajax전송

 

 

 

form전송과 ajax전송의 차이

 

 

form전송 : 동기방식

ajax전송 : 비동기방식

 

 

 

여기서 동기와 비동기의 차이는? 

 

 

동기(Synchronous)방식은 서버에 요청을 보냈을때 응답이 돌아와야 다음 동작을 수행할 수 있습니다.

비동기(Asynchronous)방식은 요청을 보내고 응답을 기다리지 않고 다음 동작을 수행할 수 있습니다.

 

 

 

form 전송 (동기 방식)

 

form전송 방식은 완료될때 페이지 전체가 리로드 되는 방식으로 submit type의 버튼 클릭시 form태그의 action에 있는 주소로 form태그안에 데이터를 보내고 서버에서는 name속성값으로 받을 수 있습니다.

 

 

 

<form action="/login" method="post" id="signup">
    <input type="text" id="usr_id" name="usr_id" placeholder="아이디">
    <input type="password" id="usr_passwd" name="usr_passwd" placeholder="비밀번호(영문+숫자+특수문자, 6~12자) ">
    <button type="submit" >가입하기</button> 
</form>

 

 

 

장점 :  1. 설계가 매우 간단하고 직관적입니다.

단점 :  1. 동기방식이라 전송요청을 보내고 응답이 올때까지 기다려야합니다.

           2. 전체 리소스를 다시 불러와야하기 때문에 불필요한 부분들도 불어와야하기 때문에 리소스낭비가 발생합니다.

 

 

 

 

ajax 전송 (비동기 방식)

 

 

장점 :  1.  ajax로 서버와 통신을 하면 전체 페이지를 리로드하지 않고 일부분만을 업데이트 할 수 있습니다.

           2. 요청후 응답을 기다리지 않고 다음동작을 수행 할 수 있어 효율적입니다.

단점 :  1. 설계가 복잡하다.

 

 

 

serialize

 

serialize함수를 이용하면 form요소에 입력받은 데이터를 직렬화 할 수 있습니다.

여기서 직렬화란 입력받은 데이터를 하나의 쿼리 문자열로 만드는 것입니다.

이렇게 직렬화한 데이터를 queryString변수에 담아준뒤 data에 담아서 요청 할 수 있습니다.

 

 

 

var queryString = $("#signup").serialize();

   $.ajax({
      type : 'post',
      url : '/login',
      data : queryString,
      dataType : 'json',
      error: function(xhr, status, error){
         alert("실패");
      },
      success : function(json){
         alert("성공")
      }
   });

 

 

 

 

 

 

참고자료 

https://velog.io/@ayleen9506/ajax-form