01. AJAX (jQuery AJAX 관련 메소드, $.ajax()함수, $.get() 함수, $.post 함수)

○ AJAX (Asynchronous JavaScript And XML)

    - 웹페이지 전체를 reload하지 않고, 일부분만 새로고침
    - 비동기식 통신(문자단위 통신)
    - 전체 페이지는 1번만 불러오고, 그 이후에는 문자단위(비동기)로 통신이 이루어 진다
    - 자바스크립트의 XMLHttpRequest객체를 이용하지만, 
      사용문법이 복잡해서 jQuery 오픈소스의 ajax() 함수를 많이 이용한다

 

 

○ AJAX 

    - 페이지 새로고침 없이 서버에 요청

    - 서버로부터 데이터를 받고 작업을 수행

 

○ jQuery AJAX 관련 메소드

    - $.ajax()
    - $.get()
    - $.post()
    - 응답받은 메시지를 처리하는 함수를 callback함수라 한다

 

○ $.ajax() 함수

    - 형식) $.ajax()({name:value, name:value, name:value})

 

        1) 뷰단

<button id=btn>서버에서 응답받기</button>

<script>
  $("btn").click(function(){
    $.ajax({
             url:"message.do",  //요청명령어 
             type:"get",        //get방식
             datatype:"text",   //응답메시지 타입 
             error:function(error){//error callback함수
                alert("에러: " + error);
             },
             success:function(result){//success callback함수
                alert("성공: " + result); //result : 서버가 응답해준 메시지
              }
    });//ajax() end
  });//click end
</script>

 

        2) 컨트롤러

@RequestMapping(value = "/message.do", method = RequestMethod.GET)
public void message(HttpServletRequest req, HttpServletResponse resp) {

    try {
        //단순문자열과 UTF-8 인코딩 방식
        resp.setContentType("text/html; charset=UTF-8");

        //요청한 사용자에게 응답하기 위한 출력 객체
        PrintWriter out=resp.getWriter();
        out.println("서버에서 응답해 준 메시지: ");
        out.println("무궁화 꽃이 피었습니다 ");
        out.flush();//out객체에 남아 있는 버퍼의 내용을 클리어
        out.close();

    }catch (Exception e) {
        System.out.println("응답실패: " + e);
    }

}//message() end

 

○ $.get() 함수

    - AJAX를 GET방식으로 요청하는 방식

    - 형식) $.get()({"요청명령어", callback함수})

<script>
    $("#btn").click(function(){

        $.get("message.do", responseProc);

    });//click() end

    function responseProc(result) {
        $("#panel").append(result);
    }//responseProc() end
</script>

 

○ $.post() 함수

    - AJAX를 POST 방식으로 요청하는 방식

    - 형식) $.post()({"요청명령어", 전달값, callback함수})

<script>
    $("#btn").click(function(){

        $.post("message.do", "전달 메시지", responseProc);

    });//click() end

    function responseProc(result) {
        $("#panel").append(result);
    }//responseProc() end
</script>