[Ajax란? ] 제이쿼리와 $.ajax() , $.get(), $.post() 메서드

 

Ajax란?

 

Ajax란 Asynchronous JavaScript and XML의 약자이다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. 즉) Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지 일부만 표시할 수 있다. 예를들어 게시판의 댓글 부분!! 

 

Spring web 게시판 공부하다 Ajax에 대해 자세히 알아볼까 한다.

 

이때 서버는 다음과 같은 형태의 데이터를 주고받을 수 있다.
JSON / XML / HTML / 텍스트 파일 등등

 

 

Ajax 구성 요소

 

- 웹 페이지의 표현을 위한 HTML과 CSS

- 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델

- 데이터의 교환을 위한 JSON이나 XML

- 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체

- 사용자의 작업 흐름을 제어하는데 사용되는 자바스크립트

 

 

Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하게 된다. 따라서 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신할 수 있다. 

 

 

 

Ajax를 이용한 웹 응용 프로그램의 동작 원리는 

1. 사용자에 의한 요청 이벤트가 발생한다.

2. 요청한 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출된다.

3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다. 이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.

4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리한다.

5 & 6. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다. 이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달한다.

7. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.

8. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시된다.   

 

 

 

GET 방식과 POST

 

GET 방식은 주소에 데이터를 추가하여 전달하는 방식이다. GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장된다. 또한, GET 방식은 보통 쿼리 문자열(query String)에 포함되어 전송되므로, 길이의 제한이 있다. 따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋다 .

 

POST 방식은 데이터를 별도로 첨부하여 전달하는 방식이다. POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다. 또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송된다. 따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높다. 

 

 

 

$.ajax() 메서드

 

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 한다. 그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 제이쿼리(jQuery)이다. 

 

$.ajax() 메서드는 모든 제이쿼리 Ajax 메서드의 핵심이 되는 메서드다. $.ajax() 메서드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.

 

$.ajax([옵션])

 

 

URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이고, 옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합이다. 

 

아래 예제는 $.ajax() 메서드에서 사용할 수 있는 대표적인 옵션을 설명하는 예제이다. 

$.ajax({
	url : "/sample/replies", //클라이언트가  요청을 보낼 서버의 URL 주소
	data : {name: "홍길동"}, //HTTP 요청과 함께 서버로 보낼 데이터
	type : "GET", //HTTP 요청 방식
	dataType : "json" //서버에 보내줄 데이터 타입
	
})
//HTTP 요청이 성공하면 요청한 데이터가 done() 메서드로 전달된다.
.done(function(json){
	$("<h1>").text(json.title).appendTo("body");
	$("<div class=\"content\">").html(json.html).appendTo("body");
})
//HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메서드로 전달된다. 
.fail(function(xhr, status, errorThrown){
	$("#text").html("오류가 발생했습니다. <br>")
	.append("오류명 : " +errorThrown+"<br>")
	.append("상태 : " + status);
	
})
//HTTP 요청이 성공하거나 실패하는 것에 상관 없이 언제나 always() 메서드가 실행
.always(function(xhr,status){
	$("#text").html("요청이 완료되었습니다.");
});

 

 

 

---

 

$.get() 메서드

 

제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메서드를 제공한다. 이 메서드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있다. 

 

$.get(URL 주소[ ,콜백함수]);

 

URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다. 콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의한다. 

 

$(function() {

    $("#requestBtn").on("click", function() {

        // GET 방식으로 서버에 HTTP 요청을 보냄.

        $.get("/examples/media/jquery_ajax_data.txt",

        function(data, status) {

            $("#text").html(data + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.

        });

    });

});

 

 

 

$.post() 메서드

 

제이쿼리에서는 Ajax를 이용하여 POST방식의 HTTP 요청을 구현한 $.post() 메서드를 제공한다. 이 메서드를 사용하면 서버에 POST방식의 HTTP 요청을 보낼 수 있다. 

 

$.post(URL 조소 [,데이터][,콜백함수]);

 

URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소이다. 데이터는 HTTP 요청과 함께 서버로 보낼 데이터를 전달한다. 콜백 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의한다. 

 

$(function() {

    $("#requestBtn").on("click", function() {

        // POST 방식으로 서버에 HTTP 요청을 보냄.

        $.post("/examples/media/request_ajax.php",

            { name: "이순신", grade: "A+" },             // 서버가 필요한 정보를 같이 보냄.

            function(data, status) {

                $("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
            }
        );
    });
});

 

 

 

 

 

참고 : http://www.tcpschool.com/ajax/ajax_intro_basic