AJAX는

Asynchronous (비동기식)
JavaScript (자바스크립트)
And (그리고)
XML (XML데이터형식)
이라는 뜻으로
서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 의미함.

AJAX를 이해하기 위해 필요한 사전지식 : 서버

서버란 유저를 데이터를 요구하는 대로 유저가 필요로 하는 데이터를 보내주는 프로그램.
예시)
네이버 웹툰서버 => 유저가 네이버 웹툰을 요청하면 네이버 웹툰을 유저에게 보내주는(응답하는) 서버
유튜브 서버 => 유저가 유튜브 컨텐츠를 요청하면 유튜브 컨텐츠를 유저에게 보내주는(응답하는) 서버

단, 서버에게 데이터를 요청할 때 아래 순서에 따라 정확한 방법을 지켜서 해야 함.

1. 데이터의 정확한 URL(엔드포인트 라고도 함.) << 서버 개발자가 결정함.
2. 해당 URL로 GET요청을 보내야함.
3. GET요청이 서버로 도달 시 서버는 사용자로부터 요청받은 데이터를 반환.
(GET요청이 뭔지 모르겠다? 👉REST API가 뭔가요👈)

GET요청을 보내는 법
case 1 : 브라우저(Edge, Chrome, Firefox, Safari 등..)의 주소표시줄에 직접 엔드포인트를 작성한다.
case 2 : form태그를 이용해서 원하는 엔드포인트로 GET요청을 보내는 form을 구성하고 해당 form태그에 연결된 submit 버튼을 누르면 된다.(브라우저가 새로고침 됨.)
case 3 : ajax로 GET요청을 보내면 됨.(마찬가지로 버튼 연결해서 동작도 가능)

- case 3번(ajax)의 장점

장점 :

새로운 데이터를 서버에게 요청할 때, 새로고침이 되지 않고 해당 코드블럭 부분만 데이터를 불러와서 표시한다.
그래서, 다른 부분에 임시로 입력되어있는 데이터들이 유실되지 않고 입력 중인 상태 그대로 보존된다.(예를 들면 제품 등록이나 회원 가입 등)

JavaScript로 ajax요청을 보내는 방법
case 1 : 기존 js방식

var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        console.log(ajax.responseText)
          }
    };
	ajax.open("GET", "https://cdingapple1.github.io/price.json", true);

case 2 : fetch함수 사용

fetch("https://cdingapple1.github.io/price.json")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Error:", error);
  });

case 3 : 제이쿼리 사용

$.ajax({
  url: "https://cdingapple1.github.io/price.json",
  method: "GET",
  dataType: "json",
  success: function (data) {
    console.log(data);
  },
  error: function (xhr, status, error) {
    console.error("Error: " + status, error);
  }
});

결론

ajax는 새로고침 없이도 서버에게 GET요청을 보내는 JS코드이다. ajax는 데이터 통신방식이며, 주로 새로고침 없이 데이터 통신이 필요할 때 사용된다(회원가입화면에서 이메일 인증코드 전송, 쇼핑몰 상품페이지에 상품 좋아요 등..)