Week2. Ajax

Ajax란

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

(참고: https://99geo.tistory.com/65)

 

저는 api 데이터 값을 받아올 때 ajax를 사용했습니다.

(훗날에 db도 ajax로 받아오더라구요)

 

---

api 데이터 가져올 때 TIP.

크롬 확장 프로그램 중 JSON View를 다운받는다.

그럼 api url로 접속시 아래 사진처럼 깔끔하게 json파일로 정리되어 보입니다.

 

Ajax사용하기.

ajax 기본 골격

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

가져올 url을 url: " " 부분에 넣어주면 됩니다!

.

.

.

원하는 데이터만 다 가져오고 싶을때는 for문을 같이 사용해주면 좋다.

let rows = response["RealtimeCityAir"]["row"]
for (i = 0; i < rows.length; i++) {
  let cityName = rows[i]["MSRSTE_NM"]

위 코드는 ajax기본 골격 안에 포함되어 있습니다.

 

즉. for문으로 반복하게 되어 row.length(row안의 값의 수만큼(전부)) response["RealtimeCityAir"]["row"]["MSRTE_NM"]을 받아오게 됩니다.