비동기처리 AJAX : JQuery의 ajax

📝 꾸준함이 무기/JavaScript

비동기처리 AJAX : JQuery의 ajax

Cheri 2021. 5. 24. 00:49

AJAX란?

페이지를 새로고침하지 않아도 데이터가 로드되게끔 합니다.

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.

JQuery는 간단한 문법으로 AJAX를 사용할 수 있도록 ajax라는 인터페이스를 제공합니다.

AJAX만을 사용하기 위해 JQuery를 사용하기에는 파일자체가 무거워질 수 있습니다.

따라서, Axios나 Superagent, Isomorphic-fetch같은 라이브러리를 사용하는 것도 좋습니다.

ajax 사용법

먼저, JQuery를 이용할 때는 꼭, cdn을 추가(링크)하거나, 다운로드를 해주어야합니다.

그 후 아래처럼 ajax를 사용해봅시다!

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

위의 url에 미세먼지API의 url을 넣어주도록 합니다.

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

콘솔창에 출력해보면, 아래와 같이 API를 가져온 것을 확인할 수 있습니다.

이제 Ajax를 활용해보자!

위의 조건에 맞게, 코드작성을 해보겠습니다.

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
        //버튼을 누르면, 기존에 있었던 내용을 삭제시킨다.
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                //API에서 데이터를 빼서 정리!
                    const DATA = response['RealtimeCityAir']['row']
                    for(let i=0; i<DATA.length; i++){
                        let gu = DATA[i]['MSRSTE_NM'], dust = DATA[i]['IDEX_MVL'];
                        let temp_html = `<li>${gu} : ${dust}</li>`;
                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>

</head>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr/>

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">

    </ul>
</div>
</body>

</html>

위와 같이 코드를 입력하면, 아래와 같이 버튼을 누를때마다, 데이터를 받아와서 페이지에 표시하게 됩니다.

결과는 아래와 같습니다.