2-7_Ajax 시작하기

Ⅰ. 이번 회차 학습 목표 (goal)

---

1. 배우고자 하는 것

• 네이버에서 enter
  치는 것 처럼 ==javascript 에서 어떻게 서버에 요청 하는지!== 알아보기

Ⅱ. (복습) JSON 파일 형식 맛보기

---

1. 이렇게 list, dictionary 합쳐져서 내려오는 형식 = JSON 파일 형식

Ⅱ. Ajax 기본

1. 대전제

• ==jquery 가 이미 설치== 되어 있어야 함

2. ajax 기본골격

a. 작성위치

• javascript 를 활용하는 거니까, ==script 태그== 에 작성

b. ajax 기본골격 코드 #ajax_기본골격_예제코드

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

• [읽어보기] 이렇게 하면 어떤 결과물이 나와?
  
  get 방식으로 해당 url 에 요청해서 reponse 를 받아오고 -> 받아온 response를 console 에 찍어주겠다.

• 입력하는 url

• 결과물
  👉 오, 뭔가 받아진거 같음!!!

3) 받아온 response 에서 좀 더 원하는 결과물로 접근하기

a. 딕셔너리 자료형을 존중해서 기재하고 -> 한번 console 로 왔는지 확인 ⭐⭐⭐⭐⭐

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
        console.log(response['RealtimeCityAir'])
    }
})

• 읽어보기
  
  console.log(response['RealtimeCityAir']) : 이렇게 기재한 것은 'dict' 형이기 때문에 key 값을 넣어서 value 를 가져온거야! ⭐⭐⭐

4) 은평구 30 이렇게 찍어보기

우선 작동하는 코드

$.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']
            console.log(gu_mise, gu_name)
        }
    }
})

• 읽어보기
  

1 block : 데이터를 READ 하고 싶어서 해당 url 에 GET 방식으로 요청함 -> 받아온 데이터는 response 에 담김

2 block : 받아온 response 는 dictionary 형태였기에 key 를 써서 value 를 취함.

이때, ==받아온 response 가 어떤 자료구조에 담겨있는지 모르기 때문에, console 로 확인== 해가면서, 하나씩 들어갈 필요가 있음.

만약, 원하는 데이터를 console 로 확인했다면 -> ==그걸 let rows 같은 변수에== 담는다.

3 block

(let i = 0; i < rows.length; i++ 이 변수가 어떤 데이터를 의미하는건지 아는 건 중요. ⭐⭐⭐

반복문에서 i 는 '배열 안에 배치된 순서' 를 의미할 것.

보는 순서가 0 부터 시작해서 해당 열의 끝 까지 가고, 증가하는 순서는 하나씩.

나머지 : 리스트의 몇 번째 로 가서 -> 해당 key 값에 해당하는 value 를 가져와라 -> 그걸 console 로 보여줘라 ( = f12 로 확인할 수 있게 해달라. )

결과물

• 그러면, '구 이름', '구 미세먼지' 가 출력되어서 나옴

💭 What i learned

---

• ⭐⭐⭐ console 로 원하는 데이터가 찍히는 걸 확인하고 -> 그걸 변수에 담는다! 이건 습관인거 같다 ⭐⭐⭐⭐⭐⭐⭐

• 또한 뽑아낸 값이 리스트에 담겨있다는 것 또한 알고 있음!