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

안녕하세요!

맥주 한 잔 마시고 기분이 좋은 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>
Colored by Color Scripter
cs