썬키의 개발노트

Ajax 본문

BACK-END/SPRING

Ajax

썬키 2022. 5. 24. 14:45

 

 

* Ajax(AsynchronousJavaScript and XML)

: 자바스크립트를 이용하여, 비동기식으로 서버와 통신하는 방식

 

* 비동기식(AsynchronousJavaScript)

: 여러가지 일을 한번에 처리할 수 있는 방법.

: 서버와 통신하는동안 다른 작업을 할 수 있다는 의미

(흔히, 결제 페이지에서 결제시 그 결제창은 프리징이 되는걸 확인할 수 있는데 그것이 동기식)

 

* Ajax의 장점

: 사용자가 데이터를 덜 소모하고, 빠르게 정보를 수집할 수 있다.

 

 

<예제 코드>

(출처: 유튜브 생활코딩)

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="result"></div>
        <input type="text" id="msg" />
        <input type="button" value="get result" id="getResult" />
        <script>
            $('#getResult').click( function() {
                $('#result').html('');
                $.ajax({
                    url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',
                    dataType:'json',
                    type:'POST',
                    data:{'msg':$('#msg').val()},
                    success:function(result){
                        if(result['result']==true){
                          $('#result').html(result['msg']);
                        }
                    }
                });
            })
        </script>
    </body>
</html>

 

 

$.ajax(settings) settings = object(객체)
- jQuery를 이용한 ajax 통신의 가장 기본적인 API
- 주요속성(settings에 들어가는 property)
	: data - 서버에 전송할 데이터, key/value 형식의 객체
	: dataType - 서버가 리턴하는 데이터 타입(xml, json, script, html)
	: type - 서버로 전송하는 데이터의 타입(post, get)
	: url - 데이터를 전송할 URL
	: success - ajax 통신에 성공했을 때 호출될 이벤트 핸들러

 

앞으로 계속 다루게 될 Ajax이므로

Ajax에 관련한 프로퍼티에 대한 정의를 알아두는 것이 좋을듯하다.

 

 

저작자표시 (새창열림)

'BACK-END > SPRING' 카테고리의 다른 글

[SPRING] dispatcherServlet, ViewResolver, Controller  (0) 2023.02.21
[SPRING] 스프링 설치 및 프로젝트 설정  (0) 2023.02.20
[Spring]회원 정보 변경하기(등급 변경 / 상태 변경)  (0) 2022.03.16
[Spring]회원 관리 페이지 만들기(회원 리스트, 회원 정보 보기)  (0) 2022.03.16
[Spring-JS]데이터 변경 시 Confirm이벤트 처리  (0) 2022.03.15
'BACK-END/SPRING' Related Articles more