[Ajax | JSON] 서버-클라이언트 통신 이해하기

서울시 OpenAPI(미세먼지)

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

-> JSON형식으로 된 파일을 정돈된 형태로 보기위해서는 chrome 확장 프로그램 JSON View를 설치해주시면 됩니다. 

서울시 OpenAPI

🌞여기서 JSON은 key : value 로 이루어진 딕셔너리와 비슷한 서버통신용 표준 포맷이라고 생각하면 된다.

• 위의 내용을 보면 RealtimeCirtAir라는 딕셔너리(JS에서 객체)에 key : value의 형태로 들어가있고 key가 row인 곳의 value로 리스트(JS에서 배열)가 들어가 있고 해당 리스트안에 또 딕셔너리가 담겨있다. (어지럽군요^^)

 

🌞API란?

간단히 말하면 은행 창구와 같은 것

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

 

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

 

<2가지 타입> 

• GET -> 통상적으로 데이터 조회(Read)를 요청할 때 e.g) 영화 목록 조회
• POST -> 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)요청할 때 e.g.) 회원가입, 회원탈퇴, 비밀번호 수정 

🌞GET 방식으로 데이터를 전달하는 방법 

? : 여기부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻 (and와 같은 맥락?)
e.g) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

• 예시의 주소는 google.com의 search창구에 다음 정보를 전달한다. 
• q=아이폰 (검색어)
• sourceid=chrome (브라우저 정보)
• ie=UTF-9 (인코딩 정보)

🌞AJAX(Asynchronous JavaScript and XML)사용하기 

Ajax란 ? 웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 효율적이지 않습니다.
Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술을 말합니다.
간단히 말하면  AJAX는 비동기 브라우저/서버 통신을 위한 기법이다.

MDN 설명) AJAX(Asynchronous JavaScript And XML)란 비동기 자바스크립트와 XML을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. 

 

명심❗ Ajax는 jQuery를 임포트한 웹페이지에서만 동작 가능하다. 

 

🌞ajax 기본 형식

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

• URL은 데이터를 가져오는 API주소

->주소를 입력하면 해당 API의 response 객체 즉, 우리가 위에서 봤던 내용이 담긴 객체가 콘솔에서 확인됩니다. 

원하는 값을 가져오고 싶다면 딕셔너리에서 값을 가져오는 것(e.g. obj['key']과 같이 하면 됩니다. 모르겠다면 콘솔에 확인하면서 진행하면 됨 

 

//리스폰스 객체의 RealtimeCityAir 안에 row를 출력
console.log(response['RealtimeCityAir']['row']);

//결과 : 25개의 딕셔너리를 담은 리스트 출력 [{...} {...} .. ]

 

 

그렇다면 row안에 상세 내용을 출력하고 싶을 때는 어떻게 하면 될까? 

-> row안의 내용물들은 리스트로 묶여있다.

-> 리스트는 for문을 돌리면 된다. 

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 gu_mise_kor = rows[i]['IDEX_NM'];
                console.log(gu_name, gu_mise, gu_mise_kor);
            }
        }

 

업데이트 버튼을 클릭하면 미세먼지 정보 리스트가 보이게 만들어보자.

 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 gu_mise_kor = rows[i]['IDEX_NM'];

                        let temp_html = ``;

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

• ajax 통신을 하기 이전에 해당 리스트의 내용이 없게 jQueryObj.empty()메소드를 활용하여 비워준다.
• 그 다음 통신에서 for문을 돌려서 원하는 세부정보를 각각 출력한다. 
• 각각의 정보를 화면에 띄우기 위해서 temp_html을 만들어준다. 
• if문을 활용하여 미세먼지의 값이 100 이상인 경우만 <li>태그에 bad 클래스를 추가해준다. 
• temp_html의 내용물은 조건에 따라 달라지기 때문에 if문 이전에는 ''빈 내용 선언, 할당해주면 된다. 

---

🌞Ajax 연습하기 TIP

랜덤 객체를 전달해주는 API를 활용하기

• 이미지 바꾸기: $('#아이디값').attr('src', 이미지URL);
• 텍스트 바꾸기: $('#아이디값').text('바꾸고 싶은 텍스트');