2-7 Ajax 시작하기

Ajax?

✔️ Asynchronous Javascript And XML

• 브라우저에서 엔터를 치는것과 같이 자바스크립트에서 서버를 요청하는것.
• Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
          : 그래서 jQuery가 임포트 되어있지 않은 http://google.com/ 과 같은 화면에서 개발자도구를 열면,
            Uncaught TypeError: $.ajax is not a function(ajax라는 게 없다)는 에러가 뜸.

 

 

✔️ 기본골격

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

      코드해설:

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

     url: ""                                           요청할 URL

     data: {}                                         요청하면서 함께 줄 데이터 (GET 요청시엔 비워둠)

💡GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감.
    http://naver.com?param=value&param2=value2
💡POST 요청은,data : {} 에 넣어서 데이터를 가져감.
    data: { param: 'value', param2: 'value2' },

     success: function(response){}  성공하면, response라는 변수에 서버의 결과 값을 담아서 함수를 실행

console.log(response)                서버에서 준 결과를 이용해서 나머지 코드를 작성

 

 

---

활용예제

 

미세먼지 open API:http://spartacodingclub.shop/sparta_api/seoulair

밑에 같은 row가 여러개 있음

👉 모든 구의 미세먼지 값을 출력하기

$.ajax({
  type: "GET",         // GET방식
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},            // GET방식이기 때문에 비워둠
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];   // 리스트를 RealtimeCityAir의 row에서 가져와라
    for (let i = 0; i < mise_list.length; i++) {  //i가 1씩커지며 위 리스트릐 길이보다 작을때까지 반복문돌리기
      let mise = mise_list[i];         // mise는 mise_list의 i번째 값
      let gu_name = mise["MSRSTE_NM"];  // mise 에서 MSRSTE_NM 값
      let gu_mise = mise["IDEX_MVL"];   // mise 에서 IDEX_MVL 값
      console.log(gu_name, gu_mise);    // gu_name 과 gu_mise값을 보여줘라
    } 
  }
});​

 

⚠️ 1. 데이터(미세 먼지 값)가 어디 있는지 먼저 찾기.    --------    RealtimeCityAir > row 

     2. 반복문으로 구 데이터를 출력해보기 

     3. 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력  -------  구 이름 키 값인 "MSRSTE_NM",

                                                                                                           미세먼지 수치 키값인 "IDEX_MVL"의 밸류를 출력