Ajax 기본 사용 방법 & OpenAPI 이용해 실시간 값 가져오기

Ajax 기본 사용 방법

 

Ajax : 비동기통신

 

Ajax 기본 작동

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

 

JQuery를 임포트 되어있지 않을 경우 Ajax 에러 메시지

Uncaught TypeError: $.ajax is not a function
→ ajax가 없다는 뜻

기본 Ajax 형태

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

위의 기본 형태로 Ajax를 사용한다.

 

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드 작성
  }
})

- type: "GET" → GET 방식으로 요청한다.

    GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다.  https://jjungslife.tistory.com/42

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

- url: 요청할 url

- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다.)   
    
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

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

 
Ajax 활용 - 미세먼지 OpenAPI 이용해 실시간 값을 가져오기     

url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

모든 구의 미세먼지 값을 찍어보기 결과값으로 아래와 같이 확인이 가능하다

 

Ajax 활용 - 미세먼지 OpenAPI 이용해 실시간 값을 가져오기