.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
Ajax란?
•
JS를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
•
Web Api인 XMLHttpRequest 객체를 기반으로 동작하며 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공
•
Ajax 통신의 장점
◦
필요한 데이터만 서버로부터 전송 받아서 효율적
◦
변경할 필요가 없는 부분 재 랜더링X -> 순간적으로 깜박이는 현상 없음
◦
클라이언트와 서버의 통신이 비동기적으로 동작하여 요청을 보낸 후에 블로킹 발생 X
JSON
•
JSON은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
JSON의 표기 방식
•
JS의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트
•
키는 무조건 큰 따옴표로 묶고, 값 중에서 문자열은 반드시 큰 따옴표로 묶어야함.
{
"name": "식빵",
"family": "웰시코기",
"age": 1,
"weight": 2.14
}
JSON
복사
JSON.stringify
•
객체를 JSON 포맷의 문자열로 변환
•
직렬화 : 클라이언트가 서버로 객체를 전송하려고 할 때 객체를 문자열화 시키는 것
•
JSON.stringify(value[, replacer[, space]])
◦
value
▪
JSON 문자열로 변환할 값.
◦
replacer - Optional
▪
문자열화 동작 방식을 변경하는 함수, 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.
◦
space - Optional
▪
가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 String 또는 Number 객체. 이것이 Number 라면, 공백으로 사용되는 스페이스(space)의 수를 나타낸다; 이 수가 10 보다 크면 10 으로 제한된다. 1 보다 작은 값은 스페이스가 사용되지 않는 것을 나타낸다. 이것이 String 이라면, 그 문자열(만약 길이가 10 보다 길다면, 첫번째 10 개의 문자)이 공백으로 사용된다. 이 매개 변수가 제공되지 않는다면(또는 null 이면), 공백이 사용되지 않는다.
JSON.parse
•
JSON 포맷의 문자열을 객체로 변환
•
서버로부터 받은 JSON 데이터를 객체로 사용하려면 JSON문자열을 객체화 하여 사용
•
JSON.parse(text[, reviver])
◦
text
▪
JSON으로 변환할 문자열.
◦
reviver - Optional
▪
함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.
깊은 복사
•
JSON.parse(JSON.stringify(객체))
XMLHtppRequest
•
JS를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용
•
이 객체는 HTTP 요청 전송 및 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공
XMLHttpRequest 객체 생성
•
Web API 이므로 브라우저 환경에서만 정상적으로 실행
const xhr = new XMLHttpRequest();
Plain Text
복사
XMLHttpRequest 객체의 프로퍼티와 메서드
•
XMLHttpRequest 객체의 프로토타입 프로퍼티
프로토타입 프로퍼티 | 설명 |
readyState | HTTP 요청의 현재 상태를 나타내는 정수. (UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4) |
status | HTTP 요청에 대한 응답 상태를 나타내는 정수 |
statusText | HTTP 요청에 대한 응답 메시지를 나타내는 문자열 |
responseType | HTTP 응답 타입 |
response | HTTP 요청에 대한 응답 몸체. responseType에 따라 타입이 다름 |
•
XMLHttpRequest 객체의 이벤트 핸들러 프로퍼티
이벤트 핸들러 프로퍼티 | 설명 |
onreadystatechange | readyState 프로퍼티 값이 변경된 경우 |
onerror | HTTP 요청에 에러가 발생한 경우 |
onload | HTTP 요청이 성공적으로 완료한 경우 |
•
XMLHttpRequest 객체의 메서드
메서드 | 설명 |
open | HTTP 요청 초기화 |
send | HTTP 요청 전송 |
abort | 이미 전송된 HTTP 요청 중단 |
setRequestHeader | 특정 HTTP 요청 헤더의 값을 설정 |
•
XMLHttpRequest 객체의 정적 프로퍼티
정적 프로퍼티 | 값 | 설명 |
DONE | 4 | 서버 응답 완료 |
HTTP 요청 전송
1.
open 메서드로 HTTP 요청 초기화
2.
setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값 설정
3.
send 메서드로 HTTP 요청 전송
const xhr = new XMLHttpRequest();
xhr.open('GET', '/users');
xhr.setRequestHeader('content-type', 'application/json');
xhr.send();
JavaScript
복사
•
XMLHttpRequest.prototype.open
-> 서버에 전송할 HTTP 요청 초기화
•
xhr.open(method, url[, async])
◦
method --> GET/POST/PUT/DELETE (HTTP 요청 메서드)
◦
url --> HTTP 요청을 전송할 URL
◦
async --> 비동기 요청 여부, 옵션은 기본값은 true
•
HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법
HTTP 요청 메서드 | 종류 | 목적 | 페이로드 |
GET | index/retrieve | 모든/특정 리소스 취득 | X |
POST | create | 리소스 생성 | O |
PUT | replace | 리소스의 전체 교체 | O |
PATCH | modify | 리소스의 일부 수정 | O |
DELETE | delete | 모든/특정 리소스 삭제 | X |
XMLHttpRequest.prototype.send
•
send 메서드는 open 메서드로 초기화된 HTTP 요청을 서버에 전송한다.
◦
GET 요청 메서드의 경우 데이터를 URL의 일부분인 쿼리 문자열로 서버에 전송한다.
◦
POST 요청 메서드의 경우 데이터(페이로드)를 요청 몸체에 담아 전송한다.
•
페이로드가 객체인 경우 반드시 JSON.stringify 메서드를 사용하여 직렬화한 다음 전달!
•
HTTP 요청 메서드가 GET 인 경우 send 메서드에 페이로드로 전달한 인수는 무시되고 요청 몸체는 null로 설정
•
XMLHttpRequest.prototype.setReuqestHeader
◦
특정 HTTP 요청의 헤더 값을 설정
•
Content-type은 요청 몸체에 담아 전송할 데이터의 MIME 타입의 정보를 표현
•
자주 사용 되는 MIME(식별) 타입
MIME 타입 | 서브타입 |
text | text/plain, text/html, text/css, text,javascript |
application | application/json, application/x-www-form-urlencode |
multipart | multipart/formed-data |
•
HTTP 클라이언트가 서버에 요청할 때 서버가 응답할 데이터의 MIME 타입을 accept로 지정 가능
만약 설정되지 않으면 send 메서드 호출 시 */* 로 설정
HTTP 응답 처리
•
readystatechange 이벤트 활용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
console.log(JSON.parse(xhr.response));
} else {
console.error('Error', xhr.status, xhr.statusText);
}
};
</script>
</body>
</html>
HTML
복사
예제 실행 결과 아래와 같은 상태를 확인할 수 있음
load 이벤트 사용시 HTTP 요청이 성공적으로 완료된 경우 발생하므로 xhr.readyState가 XMLHttpRequest.DONE인지 확인할 필요 X
