Ajax

쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다.

정의
Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

*Ajax는 jQuery를 임포트한 페이지에서만 작동

*참고
surim's develog

JSON: 서버 - 클라이언트 데이터 전송 포맷
-> 딕셔너리와 리스트의 조합과 똑같이 생김

API는 은행 창구와 같은 것!

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

• GET → 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회

• POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정

이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)

1. Ajax 시작하기

Ajax 코드

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

2. 예제 1

<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) {
                    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 = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

1) let rows = response["RealtimeCityAir"]["row"];

이 부분에서 "RealtimeCityAir"은 API 처음 부분에서 확인 가능하고,
"RealtimeCityAir"의 "row" 파트를 불러와서 rows로 선언한다는 뜻이다.

2) for (let i = 0; i < rows.length; i++)

반복문

3) let temp_html = <li>${gu_name} : ${gu_mise}</li>

동적으로 표시하기 위한 선언
구 이름과 미세먼지 농도를 가져와서 temp_html로 선언

4) $('#names-q1').append(temp_html);

names-q1 id에 temp_html을 붙이는 코드

3. 예제 2

<script>
        function q1() {
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response["getStationList"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 5) {
                            temp_html = `<tr class="urgent">
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        } else {
                            temp_html = `<tr>
                                <td>${rack_name}</td>
                                <td>${rack_cnt}</td>
                                <td>${bike_cnt}</td>
                              </tr>`
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

1) let temp_html = '';
if (bike_cnt < 5) {
temp_html = `

                            <td>${rack_name}</td>
                            <td>${rack_cnt}</td>
                            <td>${bike_cnt}</td>
                          </tr>`
                    } else {
                        temp_html = `<tr>
                            <td>${rack_name}</td>
                            <td>${rack_cnt}</td>
                            <td>${bike_cnt}</td>
                          </tr>`
                    }

urgent 클래스에 빨간색으로 표시하는 코드를 넣고,
bike_cnt <5 이면 빨간색으로 표시되고 그게 아니면 보통색(검은색)으로 표시되게 하는 코드

일단 temp_html은 빈칸으로 두고 nike_cnt 값에 따라서 temp_html에 urgent 클래스 적용 여부가 결정된다.

*$("#img_form_url").attr("src", imgurl);
Query 이미지태그에서 src 바꾸는 코드

4. 마치며

' 또는 "를 잘못쓰거나 쓰지 않거나 ;를 쓰거나 쓰지 않거나 하는 이유로 표시가 제대로 되지 않는 일들이 생겼다.
부호에 대한 자세한 설명을 아는 것이 중요한 것 같지는 않지만 예제를 보고 주의해서 부호를 넣어야겠다.