Framework & Library/JQeury

[JQuery] 제이쿼리 AJAX 사용 방법

gangintheremark 2023. 7. 14. 17:08
728x90
 

[Javascript] AJAX란 무엇인가?

AJAX 란? AJAX (Asynchronous Javascript And Xml)은 비동기식 자바스크립트와 xml라는 의미로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 브라우저

gangintheremark.tistory.com

 

AJAX에 대해서

AJAX란 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 비동기 통신이기 때문에 새로고침 없이도 데이터 로드가 가능하다.

 

장점

  • 서버에서 처리가 완료될 때까지 기다리지 않고 다른 프로세스를 진행 가능하다
  • 웹페이지의 속도와 성능이 향상된다

단점

  • 연속으로 데이터 요청 시, 서버 부하 증가
// Jquery 에서 AJAX 적용하기
$.ajax({
            url: 요청이 보내지는 곳,
            type: get/post,
            success: 요청 성공 시, 동작할 함수,
            error: 요청 실패 시, 동작할 함수,
            complete: 요청 완료 후 동작할 함수,
            data: 서버로 넘어갈 값,
            dataType: data의 타입,
            global: 전역 함수 여부 true/false,
            async: 동기 여부 true/false              
 });

🍀 reqres.in의 API를 이용해 사용자(USER) 목록 데이터 가져오기

<head>
    <script>
        $(document).ready(function () {

           $("#ok").on("click", function(){
                // URL : https://reqres.in/api/users?page=2 비동기 요청
                $.ajax({
                    // 1. 요청 코드
                    type: "get",
                    url: "https://reqres.in/api/users", // '?' 뒤의 쿼리스트링은 분리해서 작성
                    data: {
                        page:2 // 여러 개도 가능
                    }, 

                    // 2. 응답 코드
                    dataType: "text", // 응답 뭘로 받을래? text or json
                    success: function(data, status, xhr) { // 성공했을 때
                        console.log(data);
                        $("#result").text(data);
                    },
                    error: function(xhr, status, error) { // 실패했을 때
                        console.log("error 발생");
                    }
                });
           });
        });
    </script>
</head>

<body>
   <button id="ok">요청</button> <br>
   <div id="result"></div>
</body>
728x90