본문 바로가기
Development/WEB

Submit과 Ajax의 차이를 알려드립니다!

by 돼지로운생활 2018. 5. 6.

안녕하세요!

맥주 한 잔 마시고 기분이 좋은 Milkye입니다.


오늘은 소스를 만지작 거리다가 수정을 해야 할 소스가 있어서 그 부분에 대해서 설명을 해볼까 합니다.


 웹코딩을 하다보면 Ajax를 쓸 경우도 Submit을 쓸 경우도 생기게 됩니다. 두 가지의 방법을 모두 다 적절하게 사용을 하시는 것이 좋은데, 해당 소스를 개발하는 개발자가 어떤 방법을 더 선호하는지에 따라서 저 두 친구들의 사용량이 달라지기도 합니다.


 그래서 Ajax와 Submit의 차이점에 대해서 알아볼까 합니다. 두 방법은 데이터를 주고 받는다는 점에서는 같지만 조금 다른 친구들이니까요.


 저는 개인적으로 Ajax를 많이 사용을 하는데, 이는 제가 작업하는 부분이 리로딩이 대부분 필요가 없기 때문이죠.


우선 Ajax에 대해서 알아보도록 하겠습니다.


01. Ajax

 

 기본적으로 Ajax는 서버와 클라이언트의 데이터 전송 및 처리를 비동기식 (Asynchronous) 방식으로 처리를 해요. 이 말이 무엇이냐하면 서버에서 return Data가 날라오던 말던 수신을 기다리는게 아니라 다른 작업을 바로 진행을 하겠다라는 뜻입니다. 그렇기에 대기시간이 줄어들어 웹페이지를 더욱 효과적으로 사용을 할수 있죠. 또한 전체페이지를 다시 읽어오는게 아니기에 시간을 단축할 수 있습니다. 


 기본 ajax의 사용 형태를 보도록 할까요?


1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    type : "POST",
    url  : "test.do",
    data : "data",
    success function(data){
        //do action
    },
    error function(e){
        alert(e);
    }
})
cs


가장 기본적으로 사용하는 형태에요. 이 상태라면 비동기 상태로 데이터 통신이 이루어집니다. 그래서 현재 상태에서는 success가 떨어졌어도 data를 가져와서 action을 취하는 것이 어렵게 됩니다.


물론 이걸 또 해결하는 방법이 있어요! 

그건 여기에서 확인하실 수 있어요~



02. Submit



 물론 우리는 Submit도 자주 사용을 합니다. 이 친구는 form을 이용해서 데이터를 날리는 방식을 사용합니다. 그리고 페이지가 리로드 되기 때문에 action을 취하고 난 후, 페이지가 변경이 되는 경우에 자주 사용을 하고 있습니다. 

 다만 전체 페이지를 리로드 하기 때문에 서버의 부하가 더 커지고, 매번 페이지를 새로 읽어와야 하기에 시간도 오래 걸립니다.

 우리가 많이 사용하는 로그인 후 페이지 이동이 submit방식을 많이 사용하고 있어요. 

(물론 ajax로도 얼마든지 페이지 이동을 시킬 수 있답니다.)


1
2
3
4
<form id="frm" name="frm" method="POST" action="test.do">
    <input type="text" id="data" name="data">
    <input type="submit" value="전송">
</form>
cs


submit의 기본 방식은 위와 같아요. ajax와 다른 점이 있다면, form을 사용해서 데이터를 날린다는 점이 있겠네요. form에 들어있는 데이터들이 ajax에서 data부분의 역할을 한다고 생각을 하시면 좋을 것 같습니다.


 그렇다면 submit은 동기방식일까요 비동기방식일까요?! 

정답은 비동기가 아니라 동기방식입니다. 페이지가 리로드된다고 했죠?

그럼 리로드가 되는 동안에 다른 데이터를 처리할 수 있을까요? 아니겠죠 ~ 

그래서 submit은 동기 방식에서 자주 사용하고, 개발자가 정말 정말 코드 짜기 귀찮을때도 사용을 하는 방식입니다.


 어느정도 이해가 되셨는지요?! 가끔식 저는 코드짜기 귀찮을때 제가 익숙한 코드로 짜버리는 경향이 있는데... 이러시면 안됩니다 여러분... ㅠㅠ

 상황에 맞는 코드를 잘 쓰시는 개발자 분들이 되시길 바래요! 

그럼 안뇽!!!




개발자의💻 개발자에의한👨‍💻 개발자를위한☕
This is MilkyeWay
👈왼쪽 하단에 ❤️클릭 부탁드려요👏

댓글1