Ajax_ API 데이터 값 가져오기

Ajax

 

Ajax는 서버로부터 데이터를 가져와서 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이고 비동기 처리 모델 특징을 가지고있다. JSON이나 다른 텍스트 파일에서 데이터를 가져올 수 있다.

 

비동기 처리 모델 (asynchronouse processing model)은 클라이언트가 서버에 데이터를 요청하면, 작업이 완료되는것을 기다리지 않고 나머지 페이지를 계속 로드한다.

 

 

Ajax 시작하기

 

먼저 JSONView를 설치해서 JSON 파일 보기 쉽게 한다.

 

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

 

Ajax 기본 골격

Ajax 기본 골격 (주석 참고)

• type: "GET"
  • GET : 클라이언트가 데이터 조회(Read)를 요청할 때
    • 예) 미세먼지 수치 조회, 영화 목록 조회
  • POST : 클라이언트가 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
    • 예) 회원가입, 비밀번호 수정
• url: "url"
  • JSON이나 텍스트 파일 주소를 붙여넣기 하면 된다.

 

 

Ajax 연습하기 (미세먼지 OpenAPI)

 

 

 

Ajax 코드

 

 

미세먼지 API with JSON

 

 

 

일단 말했듯이 Ajax를 사용할 때는 Jquery를 임포트 하고 Jquery 문법에 맞게 Ajax 기법을 사용한다.

 

미세먼지 API에는 RealtimeCityAir라는 딕셔너리 안에 row라는 리스트가 있고 리스트 안에 지역에 따른 미세먼지 정보를 가지고 있는 딕셔너리가 있다. 어렵지는 않지만 데이터를 불러오기 위해서는 리스트와 딕셔너리 구조를 알고 있어야한다.

 

이제 딕션너리 안에서 필요한 정보만 Ajax를 이용해서 가져오면 된다. 딕셔너리에서 MSRRGN_NM 의 값과 IDEX_MVL 의 값이 필요한데 가져오려면 response.RealtimeCityAir.row[i].MSRRGN_NM /  response.RealtimeCityAir.row[i].IDEX_MVL 라고 variable 값을 주어야한다.

 

variable 네이밍을 할 때는 나중에 헤깔리지 않게 구하는 값과 관련있게 간단하게 해야한다. 

예) let mise_name = 도시이름, let mise_number = 미세먼지 수치