서버 - 클라이언트 통신, Ajax

1) 서버→클라이언트: "JSON"을 이해하기

• JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 유사함

  • 👉 위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
    그 안에 row라는 키 값에는 리스트형 value가 들어가있다.

    

  ---

2) 클라이언트→서버: GET 요청 이해하기

API는 은행 창구와 같은 것

• 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것

• 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재

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

• GET

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

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967

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

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

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

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

---

Ajax

Ajax 기본 골격

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

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

• $ajax 코드 설명
  • type: "GET" → GET 방식으로 요청한다.
  • url: 요청할 url
  • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둠)

👉 리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감.
http://naver.com?param=value¶m2=value2

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

• success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}