티스토리 뷰

 

AJAX ? 

Asynchronous JavaScript and XML

 

자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신 방식

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로고침 하지 않아도 일부의 데이터만 로드 가능 → 비동기 방식

필요한 부분만 불러와 사용하므로 불필요한 리소스 낭비가 발생하지 않는다.

 

HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받게되면 통신하던 연결이 끊기게 되어 있다.

그래서 다시 화면의 내용을 보기 위해서는 페이지 전체를 다시 로드함으로써 페이지를 갱신하게 된다.

이렇게 되면 자원, 시간 낭비를 초래할 수 있으므로 일부문만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다.

이 경우, JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 자원, 시간 낭비를 하지 않아도 된다.

 

 

동기와 비동기

동기 방식

설계가 매우 간단하고 직설적이지만 어떠한 결과가 나올 때까지 대기해야 하는 단점이 발생

 

비동기 방식

동기보다 복잡하지만 결과가 나올 때까지 시간이 소요되더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용 가능, 여러 개의 요청을 동시에 처리 가능한 장점도 있다.

 

 

 

장점
  • 웹 페이지 속도 향상
  • 서버에서 데이터만 전달하면 되므로 전체적인 코딩량이 줄어듬
  • 서버 처리가 완료될 때까지 기다리지 않고 처리 가능

 

단점
  • 히스토리 관리 안됨
  • 연속적으로 요청 시 서버 과부하 우려
  • script 작성으로 인하여 디버깅 어려움
  • 페이지 이동 없는 통신으로 보안상 문제
  • 크로스 도메인 문제

 

 

 

 

 

 

 

 

 

 

 

▶ 참고 사이트

azderica github - AJAX

surim's develog - AJAX

https://yunamom.tistory.com/98