[Ajax] Json /Ajax 정의와 기본 API 데이터 가져오기 ( 서울시 openAPI로 실시간 미세먼지 데이터 가져오기)

 

👀 Json 이란?

 

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 

+)  json을 사용하려면 jQuery가 임포트되어있어야 한다

 

👀 Ajax란?

AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다.

 

+) get 요청과 post 요청 차이

- GET 요청, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value&m2=value2

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

 

 

🤓 에이작스 기본 코드

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

 

📖  코드 분석 

type: "GET",  👉 get 방식으로 요청한다.
url: "여기에URL을입력",   
data: {}, 👉 요청하면서 함께 줄 데이터 (get요청시엔 비워두기)  
success: function(response){  👉 서버에서 준 결과를 response라는 변수에 담음

 

👻 실제 API를 실행해보면 나오는 내용! 

 

 

api의 데이터를 에이작스를 이용하여 response에 실어서 온 것

           $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/seoulair",
                    data: {},
                    success: function(response){

                        let rows = response['RealtimeCityAir']['row']

                        for(let i = 0 ; i < rows.length ; i++){
                           let city = rows[i]['MSRSTE_NM']
                           let mise = rows[i]['IDEX_MVL']

                           let temp_html=``

                           if(mise > 30){
                            temp_html=`<li class="warning">${city} : ${mise}</li>`
                           }

                           else{
                            temp_html=`<li>${city} : ${mise}</li>`
                           }

                           $('#names-q1').append(temp_html)
                        }
    
                    }
                    })

 

+) 데이터는 ${ }  로 바로 넣으면 됐는데..

 

url로 가져온 사진을 이미지화로 하려면? 

• 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);

👉 아이디값(이미 태그가 img겠징?)의 src의 url 주소를 바꿔주는 것 

 

• 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 👉 텍스트는 왜 이렇게 바꿔야하징...?