[스파르타 웹 개발 종합] 서버-클라이언트 통신 이해하기(ajax)

2주차 07~12강. 서버-클라이언트 통신 이해하기 (Ajax)

Ajax: 자바 스크립트로 페이지의 전환 없이 서버와 통신할 수 있는 방법

서버 -> 클라이언트: ‘JSON’ 이해하기

JSON: 서버가 클라이언트에 전달해 주는 데이터의 형식

JSONView: JSON 가시성 좋게 보는 chrome extension
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSON은 dictionary처럼 Key와 value 형태

클라이언트 -> 서버: ‘GET’ 요청 이해하기

클라이언트가 요청 할 때도, 타입이라는 것이 존재 함
– GET: 통상적으로, 데이터 조회(read)를 요청할 때. ex) 영화 목록 조회
– POST: 통상적으로, 데이터 생성(create), 변경(update), 삭제(delete)를 요청할 때 쓰임. ex) 회원가입, 회원탈퇴, 비밀번호 수정

GET 방식으로 서버에게 데이터를 전달하는 방법

예시1) https://movie.naver.com/movie/bi/ml/basic.nhn?code=161967

  • movie.naver.com 이 서버 주소 (ex. 우리 은행 용산 지점)
  • movie/bi/ml/basic.nhn 는 창구 이름 같은 것
  • ? 이후: 데이터를 가져오기 위한 클라이언트와 서버 사이의 약속 코드.

?: 여기서부터 전달할 데이터가 작성된다는 의미
&: 전달할 데이터가 더 있다는 의미

예시2) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

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

Ajax 시작하기

* 주의! Ajax는 jQuery가 import 되어있는 페이지에서만 동작함

jQuery import 코드:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
    

Ajax 기본 골격:

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

JSON 데이터가 있는 url을 입력하면, response에 데이터가 모두 저장 됨

예시1) 서울 미세먼지 농도 데이터


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

해당 url을 입력하면, response에 RealtimeCityAir 데이터가 모두 들어옴

미세먼지 농도 데이터) 연습 1 – 각 구 별로 미세먼지 수치 콘솔에 출력하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

미세먼지 농도 데이터) 연습 2– update 버튼을 누를 때 마다 서울시 미세먼지 수치를 새로 가져와 출력하기. 미세먼지 수치가 70이 넘는 곳은 빨간색으로 출력.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <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) {
                    console.log(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>=70)
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        else
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`

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

                    }
                }
            })
        }
    </script>
<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">
        <li>중구 : 82</li>
        <li>종로구 : 87</li>
        <li>용산구 : 84</li>
        <li>은평구 : 82</li>
    </ul>
</div>
</body>
<style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

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

예시2) 고양이 사진 데이터

서버 주소: https://api.thecatapi.com/v1/images/search

고양이 사진 데이터) 연습 – 고양이 사진 받아와서 출력하기

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
            $.ajax({
                type: "GET",
                url: "https://api.thecatapi.com/v1/images/search",
                data: {},
                success: function (response) {
                    let newImgUrl = response[0]['url'];
                    console.log(newImgUrl);
                    $('#img-cat').attr('src',newImgUrl);
                }
            })
        }
    </script>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>3. 랜덤 고양이 사진 API를 이용하기</h2>
    <p>예쁜 고양이 사진을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">고양이를 보자</button>
    <div>
        <img id="img-cat" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    </div>
</div>
</body>

기타 tip. 페이지가 다 로딩 되었을 때 동작 추가하는 방법

$(document).ready(function(){
	// 원하는 동작 추가
});