Ajax?

Asynchronous JavaScript and XML 의 약자이며 빠르게 동작하는 동적인 웹페이지를 만들기 위한 개발 기법의 하나이다.
Ajax는 웹페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신 할 수 있다.즉, 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;
        }

        .bad {
            color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']


                        let temp_html = ``

                        if (gu_mise > 120){
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
                        }   else {
                             temp_html = `<li>${gu_name} : ${gu_mise}</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>

※ 이건 어디서 나온거지?

						let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

링크의 api 구조를 보면 아래와 같다.

더 자세히 보면..

row는 여러개의 딕셔너리를 가지고 있는 리스트라는 것을 알 수 있는데 여기서 우리가 필요한 데이터는 구의 이름인 "MSRSTE_NM" 과 미세먼지의 수치를 나타내는 "IDEX_MBL"이고,
해당 데이터를 담당하는 변수를 정의하면 row리스트의 i번째 항목의 딕셔너리 중에서 'MSRSTE_NM'인것과 'IDEX_MVL'을 가져온다 라는 뜻이 된다.

function q1() {
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
              //서울시 미세먼지 데이터api
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']//api 에서 구의 이름을 가져온다.
                        let gu_mise = rows[i]['IDEX_MVL']//api 에서 미세먼지 수치를 가져온다.


                        let temp_html = ``//업데이트 버튼을 누를시 추가되는 내용을 담는 그릇을 정의한다.

                        if (gu_mise > 120){// 미세먼지의 수치가 120보다 높으면 bad라는 클래스를 적용시킨다. 
                          //이때 bad는 color를 red로 바꿔주는 것으로 정의했다.
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`;
                        }   else {
                             temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
                        }

                        $('#names-q1').append(temp_html); // 내용을 담은 그릇을 ul에 집어 넣는다.
				
                    }

                }
            })
        }

이다음으로 주목 해야 할 것은 업데이트 버튼의 onclick시 실행되는 q1() 함수이다. 저번 query 시간에 배웠던 $('').empty()구문과 $('').append() 구문을 이용해서 업데이트 버튼을 누르면
names-qi의 li항목을 모두 지우고 난뒤에 api에서 받아온 데이터를 temp_html 방식으로 li 데이터를 추가한다.

결과 화면

Author And Source

이 문제에 관하여(스파르타 웹개발 종합반 2주차 - Ajax), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jhs000123/스파르타-웹개발-종합반-2주차-Ajax

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

스파르타 웹개발 종합반 2주차 - Ajax

Ajax?

연습

Author And Source

좋은 웹페이지 즐겨찾기