JS - AJAX

📖 AJAX(Asynchronous Javascript And XML)란

AJAX란 asynchronous Javascript and XML 입니다. 요즘은 XML 보다 HTML이나 JSON을 더 많이 쓰지만, 개발 당시 xml이 주류라서 이름이 그렇게 된 것입니다.

기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다.

AJAX 는 웹페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신할 수 있게 해줍니다. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹페이지의 일부분에만 표시할 수 있습니다.

이처럼 비동기적으로 서버에 요청을 하여 페이지 전환 없이도 새로운 데이터를 가져올 수 있습니다.

AJAX를 통한 웹 브라우저와 웹 서버 간의 통신 절차는 다음과 같습니다.

1. 사용자에 의한 요청 이벤트가 발생
2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냄
4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 요청을 처리
5. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 응답 데이터를 생성 웹브라우저에 전달
6. 이때 전달되는 응답은 새로운 페이지를 전보 보내는 것이 아니라 필요한 데이터만을 전달함
7. 서버로부터 전달받은 데이터를 가지고 웹페이지의 일부분만을 갱신하는 자바스크립트를 호출. 결과적으로 웹페이지의 일부분만이 다시 로딩되어 표시됨

---

📖 XMLHttpRequest 객체

XMLHttpRequest 객체는 브라우저와 서버 간의 데이터를 교환할 수 있도록 도와주는 자바스크립트 객체로, AJAX 요청을 통해 비동기적으로 데이터를 서버에 요청하고, 응답을 받을 수 있습니다. 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다.

1. 기본 사용 방법

1. XMLHttpRequest 객체 생성
2. 요청 준비 (open메서드 사용)
3. 요청 전송 (send메서드 사용)
4. 응답 처리 (onreadystatechange또는 load이벤트)

2. 기본 예제

아래는 XMLHttpRequest를 사용해 서버로 GET 요청을 보내고 응답을 처리하는 예제입니다.

// 1. XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// 2. 요청 준비 (GET 요청 방식, URL, 비동기 여부)
xhr.open("GET", "https://api.example.com/data", true);

// 3. 응답 처리
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 요청 완료
    if (xhr.status === 200) { // 성공
      const data = JSON.parse(xhr.responseText);
      console.log("Response data:", data);
    } else {
      console.error("Error:", xhr.statusText);
    }
  }
};

// 4. 요청 전송
xhr.send();

---

3. 주요 속성

• xhr.readyState : 요청의 상태를 나타내는 값으로, 다음과 같은 상태가 있습니다.
  0: UNSENT - 요청이 초기화 되지 않음
  1: OPEND - open()이 호출된 상태
  2: HEADERS_RECEIVED - 요청이 수신되고, 응답 헤더가 준비됨
  3: LOADING - 응답 본문을 받고 있는 상태
  4: DONE - 요청이 완료되고 응답이 준비된 상태
• xhr.status : 서버 응답의 HTTP 상태 코드 (200, 404, 500 등)
  200 : 서버에 문서가 존재함, 404 : 서버에 문서가 존재하지 않음
• xhr.responseText : 서버로부터 받은 응답 데이터를 문자열 형태로 반환 합니다.
• xhr.responseXML : XML 형태로 응답을 받을 때 사용됩니다.

---

4. POST 요청 예제

POST 요청은 서버에 데이터를 전송할 때 주로 사용됩니다.

// 1. XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// 2. 요청 준비 (POST 요청 방식)
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json"); // 헤더 설정

// 3. 응답 처리
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log("Response:", response);
  }
};

// 4. 요청 전송
const data = JSON.stringify({ name: "Alice", age: 30 });
xhr.send(data);

5. XMLHttpRequest와 Fetch API 비교

XMLHttpRequest는 오래된 방식이지만, 최신 자바스크립트에서는 Fetch API가 대체 기능을 제공하여 코드가 더 간결해졌습니다. XMLHttpRequest는 콜백 기반이라 코드가 복잡해질 수 있지만, Fetch API는 Promise 기반으로 비동기 처리를 보다 간단하게 만듭니다.

---

📖 제이쿼리 AJAX

요즘 대부분은 ajax 요청을 보낼때 fetch()나 axios 라이브러리를 사용하지만, 몇몇 전통이 있는 기업에선 레거시 프로젝트 때문에 jQuery AJAX를 사용하곤 합니다.

1. $.ajax()

jQuery의 $.ajax()메서드는 AJAX 요청을 쉽게 만들 수 있도록 도와주는 메서드 입니다. GET, POST와 같은 HTTP 메서드를 설정하고, 요청에 필요한 데이터를 서버로 보내고, 응답을 받아서 처리하는 방식으로 사용됩니다.

---

2. 기본 문법

$.ajax({
	url : "요청할 URL",
  	method : "GET", //또는 "POST", 기본값은 "GET"
  	data : {key1 : "value1", key2 : "value2"}, // 서버로 보낼 데이터
    success : function(response){
  		// 요청이 성공했을 때 실행될 코드
	},
    error : function(xhr, status, error){
    	// 요청이 실패했을 때 실행될 코드
    }
});

---

3. 주요 옵션

• url : 요청할 서버의 URL을 지정합니다.
• method : HTTP 요청 방식을 설정합니다."GET", "POST", "PUT", "DELETE" 등을 사용할 수 있습니다.
• data : 서버로 보낼 데이터를 객체 형식으로 작성합니다.
• success : 요청이 성공했을 때 실행할 콜백 함수입니다.
• error : 요청이 실패했을 때 실행할 콜백 함수입니다.
• dataType : 서버에서 받을 응답 데이터의 형식을 지정합니다. "json", "xml", "html", "text" 등이 있습니다.

---

4. GET 요청 예제

아래는 GET요청을 사용해 서버에서 데이터를 가져오는 예제입니다.

$.ajax({
	url : "/example/media/request.ajax", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
  	data : {name : "JJS"}, //  HTTP 요청과 함께 서버로 보낼 데이터
  	method: "GET", // HTTP 요청 방식(GET, POST)
  	dataType: "json", // 서버에서 보내줄 데이터의 타입
  	success : function(response){
    	console.log("성공하였습니다.",response);
    },
  	error : function(xhr, status, error){
    	console.error("실패하였습니다.", status, error);
    }
});

---

5. POST 요청 예제

$.ajax({
	url : 'http://example.com/api/user/1',
  	method : 'POST', // POST 요청
  	data : {name : 'JJS'}, //또는 data : formData.serialize(), HTTP 요청과 함께 보낼 데이터
  	success : function(response){
		console.log('성공하였습니다.');
	},
    error : function(error){
    	console.error('실패하였습니다.', error);
    }
});

---

6. 추가 옵션 : beforeSend, complete

• beforeSend : 요청이 서버로 보내지기 전에 실행됩니다. 주로 로딩 애니메이션을 표시할 때 사용됩니다.
• complete : 요청이 완료되면 성공 여부와 상관없이 실행됩니다. 로딩 애니메이션을 종료할 때 사용합니다.

$.ajax({
	url : "https://api.example.com/data",
  	method : "GET",
  	beforeSend : function(){
    	console.log("Loading...");
    },
  	complete : function(){
    	console.log("Request finished.");
    },
  	success : function(){
    	console.log("Success: ", response);
    },
  	error : function(xhr, status, error){
    	console.error("Error:", status, error);
    },
})