AJAX

wldls·2023년 4월 26일

javascript

목록 보기

26/33

여기서 서버?? 란 무엇인지 알고가자

간단하게 말해 사용자가 데이터를 요청했을때 서버에서 데이터를 보내주는 프로그램이다
하지만 사용자가 서버에게 요청할 때 유의사항이 있다
1. 어떤 데이터인지 (데이터 url)
2. 어떤 방법으로 요청 (GET/POST)

GET : 데이터를 읽을 때, POST : 데이터를 보낼 때
GET/ POST 요청하게 되면 브라우저가 렌더링 되며 화면이 하얗게 변한다
-> AJAX 사용 하게 되면 새로고침 없이 요청 가능해진다

AJAX(Asynchronous JavaScript and XML)

마이크로 소프트로 인해 탄생한 JS의 새로운 객체로 ActiveXObject다
이후 업데이트 되어 XMLHttpRequest -> 비동기적으로 서버와 통신할 수 있는 방법들을 묶어 AJAX로 부르게 되었다
빠르게 동작하는 동적인 웹페이지를 만들기 위한 개발 기법이다

AJAX의 장점과 단점?

👉 장점 - 웹 페이지 전체를 다시 로딩 하지 않고도 일부분만을 갱신할 수 있다
= 백그라운드 영역에서 서버와 통신하여 -> 웹 페이지의 일부분에만 표시할 수 있다
즉, 서버로 부터 웹페이지의 변경에 필요한 데이터만 비동기 방식으로 전송받아 변경 필요 부분만 렌더링하는 방식이 가능해진다 -> 빠른 퍼포먼스와 부드러운 화면 전환 가능

👉 단점 - 클라이언트 풀링(client pooling) 방식이라 서버 푸시 방식의 실시간 서비스는 만들 수 없다
바이너리 데이터를 보내거나 받을 수 없다

클라이언트 풀링(client pooling) 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미

서버와 주고 받는 다양한 형태의 데이터는
JSON, XML, HTML, text파일이 있다
AJAX를 이용하여 손쉬운 개발을 위해 여러기능을 넣은 개발환경 -> AJAX 프레임워크 라고 한다
Prototype, script.aculo.us, dojo, jQuery 등이 존재한다

동기 vs 비동기

자바스크립트는 기본적으로 순서(동기)대로 실행 된다
하지만 비동기는 순서를 지키지않고 setTimeout으로 콜백함수 코드를 작성하면 비동기적으로 일정시간 뒤에 실행된다 (setInterval, addEventListener )


console.log(1);
setTimeout(() => console.log(2), 100);
[3, 4, 5].forEach(i => console.log(i));
console.log(6);
  1
  3
  4
  5
  6
undefined
  2

XMLHttpRequest

서버와의 비동기 통신을 가능하게 하는 여러 기능을 가진 자바스크립트 객체이다
즉 XMLHttpRequest는 AJAX 를 통해 데이터를 비동기적으로 처리한다.
XMLHttpRequest 객체는 다양한 프로퍼티와 메서드를 제공한다.

✍️ 다음은 200 상태 코드를 사용해 응답이 성공적으로 완료 되었는지의 확인 코드로 동작원리를 살펴보자

// XMLHttpRequest객체는 웹브라우저에서 제공 , 서버와 통신 가능할 수 있다
const xhr = new XMLHttpRequest();

// open() 메서드는 서버와의 통신을 준비
xhr.open('GET', '/data.json'); // (HTTP 요청 방법 지정, 요청할 URL) -> GET 메서드로 json url 로 데이터를 요청

xhr.onreadystatechange = function() { // onreadystatechange -> 서버와의 통신 상태가 변경될 때마다 호출
 
 // readyState와 status를 사용해 서버로부터 응답이 완료됐는지 확인
 // readyState은 현재 상태를 나타내는값
 // XMLHttpRequest.DONE은 요청이 완료 되었음을 나타낸다
 // status 는 HTTP 상태 코드를 나타낸다
 // HTTP 상태 코드가 200인 경우에만 JSON 데이터를 가져오고 출력
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
     const response = JSON.parse(xhr.responseText);// 응답 받은 데이터는 responseText 를 사용하여 문자열 형태로 얻는다 // JSON형식의 데이터를 받기 때문에 JSON.parse() 함수로 자바스크립트 객체로 변환
    console.log(response);
  }
}
console.log(xhr.send()) // send() 메서드는 요청을 서버로 보낸다. 
// open() 메서드에서 지정한 URL로 데이터를 요청한다

-> XMLHttpRequest 객체의 open() 메서드를 사용하여 GET 요청을 생성하고 send() 메서드를 사용하여 서버에 요청을 전송한다