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

서버↔클라이언트 통신

• 아래 HTTP 프로토콜 관련 글을 먼저 읽어보자!

https://duckgugong.tistory.com/156

HTTP

---

서버→클라이언트

• Ajax는 Javascript로 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법이다. 
• 클라이언트가 서버에게 데이터를 요청할 때 서버에서 클라이언트에게 데이터를 주는 포맷을 "JSON"이라고 한다.
• JSON은 아래와 같이 Key:Value로 이루어져 있다.

• 여기를 클릭해서 JSONView 프로그램을 추가하자. 웹 페이지에서 API를 열 때 더욱 이쁘게 보인다.

  ---

클라이언트→서버

• 클라이언트가 서버에게 요청할 때 '타입'이라는 것이 존재한다. GET, POST 등

 

GET

• 통상적으로! 데이터 조회(Read)를 요청할 때
  예) 영화 목록 조회

POST

• 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정

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

• ? : 여기서부터 전달할 데이터가 작성된다는 의미.
• & : 전달할 데이터가 더 있다는 뜻이다.
• 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
• 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
  q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)

  ---

Ajax

• JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술.
• 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다.
• Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다! 아래 페이지를 참고하여 임포트하자.
• https://duckgugong.tistory.com/144
• 만약 임포트되지 않은 페이지에서 사용하면 오류가 발생한다!

---

Ajax의 기본 골격은 아래와 같다

GET 요청

• type : "GET" -> GET 방식으로 요청
• url : 요청할 url
• data : 요청하면서 함께 줄 데이터(GET 요청시에는 HTTP BODY에 값을 넣지 못하므로 비워둠)
• success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행.
• 아래 코드는 필요할 때마다 복사해서 쓰자 외우지말고!

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

• jQuery가 임포트된 페이지에서 개발자 도구 콘솔창을 열고 위 코드의 url 부분에 아래 링크를 붙여넣기 해보자!
• http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 
• 위 페이지는 아래처럼 JSON을 담고있는 서울시 기상청의 미세먼지 API이다!

 

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 ",
  data: {},
  success: function(response){
    console.log(response)
  }
})

• 위 코드를 개발자도구의 콘솔창을 열고 붙여 넣으면 response 부분에 데이터가 담겨있는 것을 확인할 수 있다!
• 값을 성공적으로 가져오면 success 부분의 함수를 실행하고 함수의 인자에 JSON 객체가 정상적으로 들어온다!

 

POST 요청

• GET 방식과 data 부분만 다르고 모두 똑같다.
• POST 방식은 HTTP body에 데이터를 넣어서 보내므로 data안에 값을 넣을 수 있다!

$.ajax({
    type: "POST",
    url: "/test",
    data: { param: 'value', param2: 'value2' },
    success: function(response){
       console.log(response)
    }
  })

---

서울시 기상청 api에서 구의 이름과 미세먼지 농도를 반복문으로 출력해보자!

$.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);
      }
    }
})