[JS] Ajax (jQuery, XMLHttpRequest, fetch API) + 비동기처리

 

 

 

Ajax (Asynchronous JavaScript and XML)

JavaScript와 XML을 이용한 비동기적 정보 교환 기법이다. 과거에는 XML로 데이터를 전달했기 때문에 XML로 정의되어있지만, 요즘에는 JSON을 주로 사용한다. (태그로 이뤄진 xml과 달리 가독성도 높고 데이터도 더 가볍다)

 

HttpRequest를 이용해 페이지를 새로 가져오지 않고도 페이지 일부를 변경할 수 있도록 자바 스크립트를 통해 데이터만을 별도로 요청하거나 전달하는 기술이다.

 

HTTP 프로토콜을 이용한 비동기 통신이며 브라우저는 정적 HTML 파일과 CSS파일, 데이터를 어떻게 요청하면 되는지를 설명한 javascript를 통해 HTML,CSS를 이용해 골격을 먼저 형성하고 ajax 실행 부가 담긴 javascript 영역을 실행하여 데이터를 별도로 가져와 적절한 방법으로 데이터를 끼워 넣은 후 페이지를 로딩한다.

 

 

Ajax 문법

Ajax는 바닐라 자바스크립트(=기본 자바스크립트)에서도 가능하며, jquery, fetch api를 사용한 방식도 가능하다.

 

XMLHttpRequest 사용

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// 요청 초기화 (GET 요청, 요청할 URL, 비동기 여부)
xhr.open("GET", "https://api.example.com/data", true);  // true는 비동기, false는 동기 요청

// 요청 상태가 변화할 때마다 호출되는 콜백 함수 정의
xhr.onreadystatechange = function() {
    // readyState가 4(요청 완료)이고, HTTP 상태 코드가 200(성공)일 때
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 서버로부터의 응답을 콘솔에 출력
        console.log(xhr.responseText);
    }
};

// 요청 전송 (GET 요청에서는 특별한 데이터를 전송하지 않음)
xhr.send();

 

fetch API 사용

// fetch API를 사용해 GET 요청 보내기
fetch("https://api.example.com/data")
    // 응답이 도착하면 JSON 형식으로 변환
    .then(response => response.json())
    // 변환된 데이터를 콘솔에 출력
    .then(data => console.log(data))
    // 요청이나 응답 중 에러가 발생했을 때 처리
    .catch(error => console.error('Error:', error));

 

 

jquery 사용

$.ajax({
	type : "POST", // 요청 메서드
	url : "main.do", // 요청할 URL
	dataType : "text", //받아올 데이터 타입
	data : {id : e.target.value}, //전달할 데이터
	success : function(data){ //데이터를 성공적으로 받아왔을 때 실행할 함수
		if(data == 'true'){
			console.log('아이디 중복');
			$('#show').show();
			}
			else {
				$('#show').hide();
			}
		},
	error : function(error){//데이터를 받아오지 못했을 때 실행할 함수
		console.log("응답 실패...");
		console.log(error);
	}
});

 

 

---

 

비동기 처리

비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다.

java의 멀티 쓰레드를 떠올리면 좋다.

 

Callback 함수

대표적인 비동기처리 방식 중 하나로, 함수를 인자로 다른 함수에 전달하고, 특정 이벤트가 발생했을 때 호출되는 함수다.

이 방식의 문제점은 Callback 함수가 무한으로 반복되는 경우가 생길 수 있고, 에러처리가 어렵다는 단점이 있다.

여러 개의 비동기 작업을 연결할 때 Callback 함수를 중첩하여 사용하게 되면, 코드의 깊이가 깊어지고 복잡해져 유지보수가 어려워진다.

Promise 객체

Promise는 Callback 함수의 단점을 해결하기 위해 ES6에 도입된 비동기 처리 패턴이다. Promise는 비동기 작업의 성공(fulfill)과 실패(reject)를 처리할 수 있는 객체로, then과 catch 메서드를 통해 결과를 쉽게 처리할 수 있다.

Promise는 비동기 작업을 추상화한 객체로, 비동기 작업의 상태를 관리하고 성공 또는 실패 시점에 실행할 함수를 등록하는 방식을 사용한다.

Async/Await

Async/Await는 ES8에 도입된 비동기 처리의 최신 패턴이다. 함수 앞에 async를 붙여 비동기 함수를 선언하고, 내부에서 await 키워드를 사용해 Promise의 결과가 반환될 때까지 함수의 실행을 일시 중지한다. 이 방식은 비동기 코드를 동기 코드처럼 보이게 하여 가독성을 높인다.

 Async/Await는 Promise를 기반으로 동작하지만, 비동기 코드를 동기적으로 작성할 수 있게 해주어 코드의 이해와 디버깅을 용이하게 해준다.