ajax 통신 중 로딩 처리

ajax를 이용하여 대용량의 파일을 업로드할 때 로딩 중 처리가 필요할 때가 있다.

그럴 경우 ajax통신 중 로딩 이미지를 삽입하거나 마우스 커서를 로딩 중으로 변경하여 현재 ajax가 통신 중임을 표시할 수 있다.

아래 예제는 ajax 통신중 일때는 마우스 커서가 로딩 중 표시로 바뀌고 통신이 완료 되면 마우스가 일반 커서모양으로 바뀌는 예제이다.

$.ajax({

            url:'URL_ADDRESS',

            dataType:'json',

            type:'POST',

            data:{},

            beforeSend: function() {

                     //통신을 시작할때 처리되는 함수 

                     $('html').css("cursor","wait");   // 현재 html 문서위에 있는 마우스 커서를 로딩 중 커서로 변경

             },

                complete: function() {

                     //통신이 완료된 후 처리되는 함수

                     $('html').css("cursor","auto"); // 통신이 완료 된 후 다시 일반적인 커서 모양으로 변경

                },

            success:function(data){

          //통신이 성공했을 경우 처리되는 함수

              if(data.result == true)

              {

                alert('ajax 통신 성공!');

              }

            }

        });