[JQuery] Ajax

Javascript Ajax 관련 포스팅은 이전에 했었고, 간단히 JQuery Ajax 사용법에 대해 글을 써보고자 한다.

 

1. Ajax 란? 
Asynchronous JavaScript + XML 의 약자로, 서버사이드 스크립트와 통신하는 XMLHttpRequest 객체입니다. 
간단히 설명하면 페이지를 이동하지 않고 사용자에게 정보를 보여주고 싶을 때 많이 사용됩니다.

 

좀 더 자세히...

- 웹페이지가 서버와 비동기 통신을 하는 기술들의 집합체
- 사용자를 방해하지 않으면서 브라우저와 웹 서버가 정해진 형식대로 데이터를 주고받는 방법.
- AJAX를 사용하면 서버와 동적으로 데이터를 주고 받을 수 있게 됨.
- Ajax를 사용하고 DOM을 일부만 조작하면 jQuery와 자바스크립트를 통해
  페이지 일부만 업데이트 할 수 있음.
- JQuery나 자바스크립트를 사용해서 서버에 AJax요청을 보냄.
 서버에서는 받은데이터를 근거로 필요한 데이터를 보냄.
 JQuery나 자바스크립트로 그 결과를 받고, 파싱해서 페이지의 일부만 업데이트.
- 회원가입폼에서 아이디를 체크해주는 것 같은 기능
- 키보드 입력이 있거나 마우스 입력(클릭)이 있으면,
 서버에 어떤 명령을 수행해 달라고 해서, 그 값을 받아와서 보여주는데
 비동기로 처리를 해서 페이지의 로딩 등과는 무관하게 처리.

2. JQuery Ajax 사용방법 
$.ajax({
            url: 요청이 보내지는 곳,
            type: http요청 방식 get/post,
            success: http 요청 성공의 경우 동작할 함수,
            error: http 요청 실패의 경우 동작할 함수,
            complete: http 요청 완료 후 동작할 함수,
            data: 서버로 넘어갈 값,
            dataType: data의 타입,
            global: 전역 함수 여부 true/false,
            async: 동기 여부 true/false
        });
위와 같이 사용하면됩니다~!(JQuery lib를 include 한 뒤에 사용하실 수 있습니다.)

<script>
$( document ).ready(function() { //페이지가 로딩되면 바로 실행한다.
$.ajax({
        type:"POST",             //POST방식통신
        url:"/getBoardList",     //Servlet과 mapping할 URL
        dataType : "json",       //dataType은  JSON형식으로 지정한다.
        success: function(data){
            console.log(data);   //통신에 성공하면 콘솔에 출력한다. 
        },
        error: function(xhr, status, error) {
            alert(error);
        }  
    });
});
</script>