Ajax

2022.04 28

 

Ajax란

 

Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나

javascript를 통해서 서버에 데이터를 비동기 방식으로 요청하는것

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신

 

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

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function

→ ajax라는 게 없다는 뜻

 

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: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) }

사용 예시

$.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);
    }
  }
});

 

// 참고

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

AJAX란 무엇인가?