빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도
웹 페이지의 일부를 갱신할 수 있고
백 그라운드 영역에서 서버와 통신하여
그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
이 때 서버와 아래와 같은 데이터를 주고 받을 수 있다.
- JSON
- XML
- HTML
- 텍스트 파일 등
(1) Ajax의 장점
- 페이지 전체를 다시 로딩하지 않고도 일부부만의 갱신이 가능
- 페이지가 로드된 후 서버로 데이터 요청을 보내거나 받을 수 있음
- 다양한 UI(동적 페이지) 구현이 가능
(2) Ajax의 단점
- 페이지 이동이 없기 때문에 히스토리 관리가 안됨
- 반복적인 데이터를 요청하면 느려지거나 작동하지 않는다.
- 페이지 이동이 없으므로 보안상 문제가 발생할 수도 있음
(3) Ajax의 구성 요소
- 웹 페이지 표현을 위한 HTML, CSS
- 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위한 DOM
- 데이터 교환을 위한 JSON, XML
- 웹 서버와 비동기식 통신을 위한 XMLHttpRequest 객체
- 위에서 언급한 모든 기술을 결합하여 작업 흐름을 제어하는 데 사용하는 Javascript
(4) XMLHttpRequest 객체
Ajax의 핵심
Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터 교환시 사용한다.
웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 이 객체를 사용하기 때문
(5) XMLHttpRequest 객체 생성
var 객체명 = new XMLHttpRequest();
(6) 서버에 요청(request)하기
Ajax에서는 객체 생성 후 open(), send() 메서드를 사용하여 요청을 보낼 수 있다.
(7) open()
서버로 보낼 Ajax 요청의 형식을 결정
open(전달방식, URL주소, 동기 여부);
전달방식 : GET, POST 등 선택 URL주소 : 요청을 처리할 서버의 파일 주소 동기 여부 : 요청을 동기식으로 전달 또는 비동기식으로 전달 선택
(8) send()
작성된 Ajax 요청을 서버로 전달 전달 방식에 따라 인수를 가질 수도 있고 그렇지 않을 수도 있다.
send(); // GET 방식 send(문자열); //POST 방식
(9) XMLHttpRequest의 readyState
처음에는 readtState가 0(객체명.UNSENT, 보내지 않음) open 메서드를 호출하는 순간 1(객체명. OPENED) send 메서드를 호출하면 순차적으로 2(객체명.HEADERS_RECCEIVED), 3(객체명.LOADING), 4(객체명.DONE) 최종적으로 readyState가 4가 되면 상태코드(객체명.status)가 200, 201일 때 응답을 확인
'개발 > 정리 내용' 카테고리의 다른 글
| 쿠키(Cookie) (0) | 2023.01.14 |
|---|---|
| JSON (0) | 2023.01.14 |
| GET과 POST (0) | 2023.01.14 |
| 내장 객체 (0) | 2023.01.14 |
| 자바빈즈(자바객체) (0) | 2023.01.14 |