[JS] AJAX(Asynchronous Javascript And XML) 는 무엇일까 ?

🔍 AJAX (Asynchronous Javascript And XML)

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다.

 

📌AJAX의 약자 XML은 무엇일까?

XML은 EXtensible Markup Language의 약자로, 
HTML과 비슷한 문자 기반의 마크업 언어이지만,
HTML처럼 데이터를 보여주는 목적이 아닌, 
데이터를 저장하고 전달하는 목적으로 만들어졌다. 

수많은 응용 분야에서 데이터를 저장하고 전달하는 중요한 역할을 맡고 있다.

XML 형식

 

📕 AJAX 특징 

1. 웹 페이지 새로고침 없이 (비동기 방식) 동적으로 업데이트가 가능하다. 

2. HTML / CSS / JS / DOM / XML or JSON 등의 여러 기술을 조합하여 사용 됨

3. jQuery가 import 되어야만 사용 가능 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

4. XML or JSON 형태로 필요한 데이터만 받아서 자원과 시간 절약

 

 

🚨 웹페이지 전체를 리로드 하면 불필요한 리소스가 낭비되는데,
비동기 방식을 이용하면 필요한 데이터만 불러와서 리소스 낭비를 줄일 수 있다. 

 

 

📗 AJAX 장/단점

[장점]
1. 서버의 처리가 완료될 때까지 기다리지 않기 때문에 웹페이지 속도가 향상
2. 필요한 데이터만을 주고 받아 전체 페이지 새로고침보다 빠름

[단점]
1.비동기적으로 로드된 콘텐츠는 검색 엔진이 인덱싱 하기 어려움
2. 모든 브라우저가 동일하게 동작하지 않을 수 있어 호환성 문제
3. 클라이언트 측 코드의 복잡도가 증가 

 

 

📘 AJAX 간단 예시

$.ajax({
  type: "GET", //GET 방식으로 요청
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},  // GET 요청시에는 비워두고, POST 요청에 채워넣음
  success: function(response){
    console.log(response) // response는 서버에서 준 결과를 담은 변수
  }
})

해당 url은 "서울시 실시간 미세먼지 상태"를 보여주는 API이다.
ajax로 해당 api를 간단하게 호출해보고 console.log 해본 예시이다.