웹개발 2주차 개발일지(2) - Ajax

◎ 서버- 클라이언트 통신 이해하기

●서버가 클라이언트의 요청을 받고 데이터를 내려주는 형태에 대해 알아보자.

서울시에서 제공하는 openAPI를 살펴보자.

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

위처럼 키-밸류 쌍으로 이루어진 데이터양식을 'JSON'이라고 한다.

JSONView를 설치하면 정리된 데이터를 볼 수 있다.

 

 

● 클라이언트가 서버에 요청하는 방법에 대해 알아보자.

클라이언트는 'API'를 통해 요청을 보내는데 API는 은행창구와 비슷하게 

고객의 요청의 종류에 따라 다르게 처리한다.

 

- GET타입 :  주로 데이터 조회를 원할때 사용한다. 

                    예) 영화 목록 조회하기

                    https://movie.naver.com/movie/bi/mi/basic.naver?code=161967 

기생충

위 영화의 주소를 보면 ?를 기준으로 앞은 서버의 주소, 뒤는 영화의 정보를 나타낸다.

여기서 코드의 번호를 다르게 한다면?

해당 번호를 갖고 있는 영화가 나오거나 없다면 존재하지 않는다는 메세지창이 뜬다.

이처럼 창구의 주소 뒤에 원하는 정보를 ?뒤에 쓰고 더 원하는 정보가 있다면 &로 값을 넣어준다.

 

- POST타입 : 데이터 생성, 변경, 삭제 등을 원할때 사용한다. (4주차에서 다룰 예정)

 

---

◎ Ajax

: javascript를 이용하여 서버와 통신하는 방식

 

● 영화포스팅페이지에서 연습해보자.

위에서 사용한 서울시 미세먼지API를 연결해보자.(코드스니펫 사용)

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

Ajax기본 골격코드에 해당 url을 넣어 콘솔창에 요청을 찍어준다.

여기서 원하는 정보만 가져와보자.

정보가 들어있는 곳을 안다면 쉽게 할 수 있다.

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

눈에 보기 좀 더 편하기위해 하나씩 찍어주자.

        $.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++) {
                    console.log(rows[i])
                }
            }
        })

여기서 구이름과 수치만 뽑아오려면?

변수를 선언해서 콘솔창에 찍어준다.

                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_name,gu_mise)
                }

 

 

이제 페이지에 적용해보자.

업데이트 버튼을 누르면 실시간 미세먼지 정보가 나오도록해보자.

먼저 콘솔창에서 확인해보자.

뼈대코드를 넣으니 버튼을 누르면 콘솔창에 찍힌다.

 

이제 원하는 정보만 가져오자.

        function q1() {
            $.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_name, gu_mise)
                    }
                }
            })
        }

버튼을 누르면 콘솔창에 구이름과 수치가 뜬다.

이제 이 정보를 페이지에 띄우려면?

html형태를 붙여준다.

                    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)
                    }

버튼을 누를때마다 하단에 계속 붙는다.

업데이트 할 때마다 기존에 있는건 없어지고 새로 붙게 하자.

            $('#names-q1').empty()

동작이 실행될 때 제일 먼저 이루어져야하기 때문에 함수의 제일 처음에 넣어준다.

 

여기서 특정 수치 이상인 부분이 나타날때 색을 다르게 해보자.

                        let temp_html = ``
                        if (gu_mise > 40) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        $('#names-q1').append(temp_html)

우선 빈문자열을 만들고 조건문을 달아 다르게 나타낸다.

css설정으로 bad의 글자색을 넣어주면 완성.