개발자의 끄적끄적

[jQuery] Ajax 기초 [펌] 본문

개발/javascript & jquery

[jQuery] Ajax 기초 [펌]

효벨 2020. 6. 8. 10:39
728x90
반응형

[jQuery] Ajax 기초 [펌]

 

 

Ajax 기초

  1. Ajax란?

  • Asynchronous JavaScript and XML 의 약자

  • 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.

  • 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.

  • 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.

  1. 선행지식
  • 폼
  1. $.ajax(settings)

  • jQuery를 이용한 ajax통신의 가장 기본적인 API

  • 주요속성

    data : 서버에 전송할 데이터, key/value 형식의 객체

    dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html)

    type : 서버로 전송하는 데이터의 타입 (POST, GET)

    url : 데이터를 전송할 URL

    success : ajax통신에 성공했을 때 호출될 이벤트 핸들러

예제1-1. 웹페이지

<!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('');

            // 사용자가 getResult 버튼을 눌렀을 때 텍스트 노드에 있는 결과값을 지워준다.

                $.ajax({

                    url:'http://opentutorials.org/example/jquery/example.jquery.ajax.php',

                    dataType:'json',

                // 서버가 리턴해주는 데이터 타입이 json이다.

                    type:'POST',

                    data:{'msg':$('#msg').val()},

                // data 속성 내부에 또다른 {}가 있다. 중괄호 내부는 객체이다.

                    // data: 서버에 전송할 데이터로서 값은 key와 value로 이루어진 객체

                    success:function(result){

            // 인자 result에는 서버에서 리턴해준 배열이 들어감

                    // 배열이 들어온 이유는 dataType속성을 JSON으로 했기 때문에 리턴되는 데이터가 텍스트더라도 내부적으로 그 데이터를                                     // JSON으로 해석하여 배열로 변환

                    // 그래서 배열에 있는 result값을 체크하면 result가 true라면 성공 이벤트 관련 로직을 출력한다.

                    // 서버와의 통신이 성공하면 호출되는 이벤트 핸들러인 function(result)

                    // result 인자에는 서버가 리턴해주는 데이터가 들어감

                        if(result['result']==true){

            //result['result']는 연상 배열인가 확인하자

                          $('#result').html(result['msg']);

                        }

                    }

                });

            })

       // 자바스크립트에서 중괄호는 객체를 의미 , $ajax{}도 마찬가지이다. 

        </script>

    </body>

</html>

예제 1-2. 서버 쪽 로직

<?

echo json_encode(array('result'=>true, 'msg'=>$_REQUEST['msg']));

?>

//json_encode메소드로 배열을 JSON 데이터 형식으로 php가 변경해줌

 

 

출처: https://devbox.tistory.com/entry/jQuery-문서-준비-이벤트 [장인개발자를 꿈꾸는 :: 기록하는 공간]

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, SetTimeout() [펌]  (0) 2020.06.11
[kakao] 지도 web api 가이드 [펌]  (0) 2020.06.10
[javascript/api] 네이버 지도 api 연동 시작하기 [펌]  (0) 2020.05.22
[javascript/api] 구글 지도 API로 구현하기 [펌]  (0) 2020.05.22
[javascript/api] 다음 카카오 지도 API 연동 [펌]  (0) 2020.05.22
'개발/javascript & jquery' Related Articles more
Comments