[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET)

Language/JavaScript

[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET)

Ella_K 2022. 7. 8. 21:32

🔥 서버 - 클라이언트 통신

👉 CRUD

API: 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계 [1]
Create(생성해줘), Read(불러줘), Update(바꿔줘), Delete(삭제해줘)로 클라이언트가 서버에 요청할 때 어떤 요청 종류인지 응답하는 서버에 정보를 알려주는 것 [1,2]

👉 RESTful API

CRUD vs REST: What's the Difference? [2]

HTTP protocol 의 데이터 조작을 위한 고유한 method (HTTP method)인 GET, POST, DELETE, PUT, PATCH 을 사용하여 데이터 베이스 응용 프로그램(서버)과 클라이언트 통신
CRUD와 HTTP method는 아래와 같이 대응될 수 있지만, REST API는 CRUD보다 더 많은 기능을 한다.

CRUD	HTTP
CREATE	POST/PUT
READ	GET
UPDATE	PUT/ POST/ PATCH
DELETE	DELETE

👉 JSON

데이터 포맷
요청과 응답을 주고 받을 때의 형식
Key : Value로 이루어져 있음

👉 GET

스파르타코딩클럽 웹개발 종합반 2주차 [2]

통상적으로 데이터 조회(Read)를 요청할 때 사용
ex> https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 "?" 기점으로 두 부분으로 쪼개짐
'?' 기준으로 앞부분은 <서버주소>, 뒷부분은 [영화 번호]
https://movie.naver.com/movie/bi/mi/basic.nhn 에 code=161967 전달하여 해당 정보를 불러와 달라고 요청

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

? : "?" 이후 부터 전달할 데이터가 작성된다.
& : 전달할 데이터가 더 있다

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

🔥 Ajax 다뤄보기

스파르타코딩클럽 웹개발 종합반 2주차 [2]

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

👉 Ajax 기본 골격

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

GET 요청은 url 뒤에 아래와 같이 붙여서 데이터를 전달
http://naver.com?param=value&m2=value2

POST 요청은 data:{} 에 넣어서 데이터를 전달
data: { param: 'value', param2: 'value2' }.

response는 json 형식으로 되어있다.

👉 Tip

아래와 같이 response의 데이터 값들을 console로 찍어서 확인해보자

success: function(response){ 
  console.log(response) 
}

👉 Ajax 통신 예시 (GET 요청)

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
        .bad {
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
            $('#names-q1').empty();
            $.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'];

                        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>`
                        }
                        
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

</head>

<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">
        </ul>
    </div>
</body>

</html>

Source

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JS] [스파르타코딩클럽 웹] JQuery 다뤄보기 (0)	2022.07.08
[JS] JavaScript 기초 문법 (0)	2022.07.04

현재글[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET)

Study Note

[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET)

🔥 서버 - 클라이언트 통신

👉 CRUD

👉 RESTful API

👉 JSON

👉 GET

🔥 Ajax 다뤄보기

👉 Ajax 기본 골격

👉 Tip

👉 Ajax 통신 예시 (GET 요청)

Source

'Language > JavaScript' 카테고리의 다른 글

'Language/JavaScript'의 다른글

티스토리툴바

[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET)

🔥 서버 - 클라이언트 통신

👉 CRUD

👉 RESTful API

👉 JSON

👉 GET

🔥 Ajax 다뤄보기

👉 Ajax 기본 골격

👉 Tip

👉 Ajax 통신 예시 (GET 요청)

Source

'Language > JavaScript' 카테고리의 다른 글

'Language/JavaScript'의 다른글

관련글

티스토리툴바