AJAX(Asynchronous Javascript And XML)

vvinter·2024년 4월 9일

목록 보기

25/28

AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 로드하지 않고 필요한 일부 페이지의 데이터만을 로드하는 기법이며, JavaScript를 사용하여 웹 서버와 클라이언트 간 비동기적으로 XML 데이터를 교환하고 조작하기 위한 웹 기술이다. 다만 요즘은 XML보다는 JSON을 주로 사용한다.

즉, JavaScript를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것

비동기 방식?

웹페이지를 리로드하지 않고 데이터를 불러오는 방식

AJAX를 통해서 서버에 요청한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미 내포
필요한 부분만 불러와 사용할 수 있음

사용 이유

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 요청한다. 이 경우, JSON 이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

주요 기술

XMLHttpRequest
- 서버와 상호작용하기 위해 사용
- 웹 브라우저와 웹 서버 간의 메서드가 데이터를 전송하는 객체 폼의 API
JavaScript
XML (eXtensible Markup Language)
DOM (Document Object Model)
XSLT (eXtendsible Stylesheet Language Transformaions)
HTML (HyperText Markup Language)
CSS (Cascading Style Sheets)

➡️ 위와 같은 기술들이 혼합적으로 사용되며, 서버와 [JSON, XML, HTML, 텍스트 파일] 등을 주고받을 수 있게 된다.

장단점

📍 장점

웹페이지 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
서버에서 데이터만 전송하면 되므로 전체적인 코딩의 양 줄어듦
기존 웹에서는 불가능했던 다양한 UI 가능

📍 단점

히스토리 관리 X
페이지 이동 없는 통신으로 인한 보안 문제 O
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
XMLHttpRequest를 통해 통신하는 경우, 사용자에게 진행 정보를 아무것도 주지 않음
⇒ 요청이 완료되지 않았는데, 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 됨)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈 O
HTTP 클라이언트의 기능 및 지원하는 Charset 한정
스크립트로 작성되므로 디버깅이 쉽지 않음
동일-출처 정책으로 인하여 다른 도메인과는 통신 불가

AJAX의 진행 과정

XMLHttpRequest Object 생성

quest를 보낼 준비를 브라우저에게 시키는 과정
이것을 위해서 필요한 method를 갖춘 Object가 필요함
```
const xhttp = new XMLHttpRequest();
```

처리 결과를 받을 이벤트 리스너 등록
서버로 보낼 데이터 생성
클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)
4-1. 서버로 보낼 데이터 전송방식 설정(Get, Post 중 선택)
4-2. 서버 응답 방식 설정 (동기, 비동기)
실제 데이터 전송(send() 메서드 이용)
응답 처리
데이터 처리

🎲 open() 메소드
open() 메소드는 서버로 보낼 Ajax 요청의 형식을 설정

🎲 send() 메소드
send() 메소드는 작성된 Ajax 요청을 서버로 전달

🎲 GET : 데이터를 읽거나 검색할 때 주로 사용되는 메소드
     POST : 새로운 리소스를 생성할 때 주로 사용되는 메소드
     PUT : 리소스를 생성/업데이트할 때 주로 사용되는 메소드
     DELTE : 지정된 리소스를 삭제할 때 주로 사용되는 메소드