티스토리 뷰
43장. Ajax
43-1. Ajax란?
- Ajax(Asynchronous JavaScript and XML)란 JS를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.
전통적인 방식 단점
- 변경할 필요가 없는 부분까지 포함된 HTML을 매번 다시 전송받기에 불필요한 데이터 통신이 발생한다.
- 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 화면 전환이 일어나면 화면이 순간적으로 깜빡임.
- 서버로부터 응답이 있을 때까지 다음 처리는 블로킹된다.
Ajax 방식 장점
- 변경할 부분을 갱신하는 데 필요한 데이터만 서버로부터 전송받기에 불필요한 데이터 통신 발생하지 않는다.
- 변경할 필요가 없는 부분 다시 렌더링 하지 않아서 깜빡임 없음.
- 서버에게 요청을 보낸 이후 블로킹 발생하지 않는다.
43-2. JSON
- JSON(JavaScript Object Notation)은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다.
- Key 값은 반드시 큰따옴표(””)로 묶어야 한다.
- 문자열은 반드시 큰따옴표(””)로 묶어야 한다.
JSON.stringify
- 객체를 JSON 포맷의 문자열로 변환한다.
- 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)이라 한다.
JSON.parse
- JSON 포맷의 문자열을 객체로 변환한다.
- 서버로부터 전송받은 JSON 데이터는 문자열이다. 이 문자열을 객체로 사용하려면 객체화해야 하는데 이를 역직렬화(deserializing)라 한다.
43-3. XMLHttpRequest
- 브라우저는 주소창이나 HTML의 form태그 또는 a태그를 통해 HTTP 요청 전송 기능을 기본 제공한다.
- JS를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.
- Web API인 XMLHttpRequest 객체는 HTTP 요청전송, 응답수신을 위한 다양한 메서드와 프로퍼티를 제공한다.
XMLHttpRequest 객체의 프로퍼티와 메서드
HTTP 요청 전송
const xhr = new XMLHttpRequest();
// xhr.open(method, url[, async])
// async default: true
xhr.open('GET', '/users');
xhr.setRequestHeader('content-type', 'application/json');
xhr.send();
- payload가 객체인 경우 반드시 직렬화한 다음 전달한다.
- HTTP method가 GET인 경우 send 메서드에 페이로드로 전달한 인수는 무시되고 요청 몸체는 null로 설정된다.
HTTP 응답 처리
const xhr = new XMLHttpRequest();
// request
xhr.open('GET', '<https://jsonplaceholder.typicode.com/todos/1>');
xhr.send();
// event ex1
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);
}
}
// event ex2
xhr.onload = () => {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.response));
} else {
console.error('Error', xhr.status, xhr.statusText);
}
}
자세히 볼 거 까진 없을 거 같다 생각했는데 다른 라이브러리에서도 비슷한 네이밍으로 쓰는 게 많아 보여 한 번은 쭉 보는 게 좋을 듯
'책 > 모던 자바스크립트 딥다이브' 카테고리의 다른 글
28장. Number (0) | 2022.06.12 |
---|---|
37장. Set과 Map (2) | 2022.06.08 |
42장. 비동기 프로그래밍 (0) | 2022.05.22 |
41장. 타이머 (0) | 2022.05.22 |
46장. 제너레이터와 async/await (0) | 2022.05.15 |
링크
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- HTTP 완벽가이드
- REST API
- http
- js promise
- 프로그래머스
- 이펙티브자바 스터디
- 김영한 http
- 백준
- BOJ
- ㅇㄷㅇㅈ
- GCP
- JS 딥다이브
- 이펙티브자바
- 프로그래머스 SQL
- 김영한 JPA
- Spring Security
- 드림코딩
- 이펙티브자바 아이템59
- 킹수빈닷컴
- java
- 백기선 스터디
- 이펙티브자바 아이템60
- dreamcoding
- js api
- JPA 연관관계 매핑
- 모던자바스크립트
- 패스트캠퍼스 컴퓨터공학 완주반
- 가상 면접 사례로 배우는 대규모 시스템 설계 기초
- HTTP 완벽 가이드
- js array
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
글 보관함