티스토리 뷰
AJAX ?
Asynchronous JavaScript and XML
자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 방식
브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로고침 하지 않아도 일부의 데이터만 로드 가능 → 비동기 방식
필요한 부분만 불러와 사용하므로 불필요한 리소스 낭비가 발생하지 않는다.
HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받게되면 통신하던 연결이 끊기게 되어 있다.
그래서 다시 화면의 내용을 보기 위해서는 페이지 전체를 다시 로드함으로써 페이지를 갱신하게 된다.
이렇게 되면 자원, 시간 낭비를 초래할 수 있으므로 일부문만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다.
이 경우, JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 자원, 시간 낭비를 하지 않아도 된다.
동기와 비동기
동기 방식
설계가 매우 간단하고 직설적이지만 어떠한 결과가 나올 때까지 대기해야 하는 단점이 발생
비동기 방식
동기보다 복잡하지만 결과가 나올 때까지 시간이 소요되더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용 가능, 여러 개의 요청을 동시에 처리 가능한 장점도 있다.
장점
- 웹 페이지 속도 향상
- 서버에서 데이터만 전달하면 되므로 전체적인 코딩량이 줄어듬
- 서버 처리가 완료될 때까지 기다리지 않고 처리 가능
단점
- 히스토리 관리 안됨
- 연속적으로 요청 시 서버 과부하 우려
- script 작성으로 인하여 디버깅 어려움
- 페이지 이동 없는 통신으로 보안상 문제
- 크로스 도메인 문제
▶ 참고 사이트
https://yunamom.tistory.com/98
'Programming > Front-End' 카테고리의 다른 글
반응형 이미지맵 (jQuery RWD Image Maps) + 이미지맵 사이트 (0) | 2021.09.14 |
---|---|
DOM(Document Object Model) 구조 (0) | 2020.08.21 |
웹 접근성 체크 사항 (0) | 2020.08.05 |
웹 캐시 방지하는 방법 (0) | 2020.08.04 |
JS / CSS 파일 캐시 방지하기 (0) | 2020.08.04 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- redis
- 낙관적락
- GitHub
- 동시성이슈해결방안
- MVC패턴특징
- SpringDataJpa
- Redisson
- db락
- github사용법
- gitlab_merge_request_templates
- 데드락
- mybatis
- 이미지맵
- querydsl
- imgmap
- 블로킹
- JPQL
- redis특징
- 데이터베이스락
- 비관적락
- gitlab_mr_templates
- MVC패턴
- redisson적용
- 반응형이미지맵
- git #git_branch_전략 #gitlab_mr
- redisson분산락
- gitlab
- MVC패턴구조
- 동시성이슈
- MVC패턴정의
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함