jQuery의 Ajax 사용하기

Ajax란?

Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML을 가리킵니다.

동기 방식	비동기 방식
서버에 신호를 보냈을 떄 응답이 돌아와야 다음 동작을 수행한다.	서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.

Ajax?

Ajax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버간에 XML, JSON(JavaScript Object Notation), 텍스트, HTML 등의 정보를 교하기 위해서입니다. Ajax가 등장하기 전에는 반드시 서버를 거쳐야만 자료를 요청할 수 있었습니다. 그러나 Ajax를 이용하면 사용자가 서버에 자료를 요청 시 화면의 전환 없이 요청한 자료를 전송받을 수 있습니다. 또 자료를 요청할 경우 어느 정도 시간이 소요되는 동기 방식에 반해 Ajax를 이용하면 클라이언트가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있습니다.

$.ajax() 메서드

$.ajax() 메서드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 용청한 데이터를 불러옵니다.

이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러옵니다. 옵션은 속성과 값으로 이루어지며, 중괄호{ } 내의 다양한 옵션을 입력할 수 있습니다.

다음과 같은 형태로 사용됩니다.

$.ajax({
    url: "전송 페이지"(action url),
    type: "전송 방식"(get, post),
    data: "전송할 데이터",
    dataType: "요청한 데이터 형식"("html", "xml", "json", "text", "json"),
    success: function(data){
        //전송에 성공하면 실행될 코드;
    },
    error: function(){
        //전송에 실패하면 실행될 코드;
    }
});

json을 이용한 예시

    [
        {
            "name": "재익",
            "age": 24,
            "addr": "부천",
            "phone": "010-1111-2222"
        },
        {
            "name": "자이언티",
            "age": 91,
            "addr": "부산",
            "phone": "010-333-4444"
        }
    ]

위의 json 값을 읽어올 Reader

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

    $.ajax({
        url: 'DATA.json',
        dataType: 'json',
        type: 'get',
        success: function(data){
            var result = '<ul>';
            $(data).each(function(i, person){
                result += '<li>' + person.name + '</li>';
                result += '<li>' + person.age + '</li>';
                result += '<li>' + person.addr + '</li>';
                result += '<li>' + person.phone + '</li>';
            });
            result += '</ul>';
            $('body').html(result);
        },
        error: function(){
            alert('실패');
        }
    }); 

</script>
</head>
<body>

</body>
</html>

_{이제 ajax가 spring 에서 쓰이는 방법을 알아보자}

다음 포스트

spring-Ajax-01 Ajax시작