jQuery Ajax

 Web을 개발 하다보면, Html을 접하게 되고 <form .../> 를 접하지 않을 수 없다. 데이터를 주고 받기 위해서는 Submit 을 많이 활용 한다. 단순한 작업을 할때는 상관이 없지만, 요구 사항은 갈수록 복잡해 진다.

 예를 들어 한 페이지에서 글도 작성하고 파일도 업로드하고 여러가지 기능을 수행 할 수도 있다. 때로는 오른쪽 하단이나 왼쪽 상단에 작은 채팅방이 있기도 한다. 이런 요구사항들을 해결하기 위해서 Javascript의 XMLHttpRequest Object를 이용 했다. 줄여서 XHR 이라고 한다.

 jQuery는 Ajax 기능을 제공 한다. http://api.jquery.com/category/ajax/ 링크를 참고 하도록 한다.

 대표적으로 이해 해야할 함수로는 $.ajax 이다. 다른 함수들은 편의를 봐서 좀더 간단하게 처리해주는 함수들이 대부분 이다.

 

$.ajax({
    url: '',
    success: function(data) {

    }
});

 

 위 코드는 가장 일반적인 형태를 뛰고 있다. 추가적인 옵션은 위에 링크를 이용하여 참고 하도록 한다. 위의 경우는 비동기로 Http 요청을 처리 한다.

 비동기(Asynchronous) 는 쉽게 말해서, 동시에 여러개의 요청과 응답이 발생 하는 경우이다.

 다른 방법으로는 <form .../> 자체를 iFrame에 만들고 데이터를 생성 후 Submit 한다. 그 후 CallBack 메시지를 받고 처리 하게 된다. 해당 기능은 jquery.form.js 플러그인을 추가로 등록해야 한다. 파일은 첨부 하였다.

 

$('form').ajaxSubmit({
    url: url,
    type: 'post',
    dataType: 'json',
    statusCode: {
        400: function() {},
        500: function() {}
    },
    success: function(data) {

    }
});

 

 jQuery Selector 를 이용 Element를 가져온 후 ajaxSubmit를 호출 ajax와 사용 방법은 매우 유사 하다. 실제로 파일 업로드나, 많은 데이터를 주고 받을 경우는 위의 방법보다, 아래의 방법도 사용해볼만한 가치는 있는 것 같다.

※ 참고 사이트: http://jquery.com/
 

 

jquery.form.js