[jQuery] ajax와 form(Submit)의 차이점

서버와 데이터를 주고받는 방식에는 Ajax와 form 두 가지 방식이 있다.
Ajax는 비동기 방식으로, form은 동기 방식이라는 차이점이 있다.
이 차이점에 대하여 알아보자.

 

 

동기(Synchronous)방식
  - 서버에 요청을 보냈을때 응답이 돌아와야 다음 동작을 수행할 수 있음
비동기(Asynchronous)방식
  - 요청을 보내고 응답을 기다리지 않고 다음 동작을 수행할 수 있음

 

1) ajax

: ajax는 서버와 통신하는 비동기적인 방법이다.

$.ajax({    
    type     : "POST",
    url      : "/DataJson.jsp",
    data     : params,
    dataType : "json",
    success: function (data){

    },
    error: function (req, status, error){
        alert("code:"+req.status+"\n"+"error:"+error);
        return false;
    }
});

장점

• ajax로 서버와 통신을 하면 전체 페이지를 리로드하지 않고 일부분만을 업데이트 할 수 있다.
• 요청 후 응답을 기다리지 않고 다음동작을 수행 할 수 있어 효율적이다.

단점

• 설계가 복잡하다.

 

2) 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="비밀번호">
    <button type="submit" >가입하기</button> 
</form>

 

장점

• 설계가 매우 간단하고 직관적이다.

단점

• 동기방식이라 전송요청을 보내고 응답이 올때까지 기다려야한다.
• 전체 리소스를 다시 불러와야하기 때문에 리소스 낭비가 발생한다.

 

 

[reference]
https://hipdizzy.tistory.com/58
https://knowledge-warehouse-jun.tistory.com/2
https://codingstudytrace.tistory.com/79