티끌모아 태산

AJAX 본문

CS 지식/인터넷프로그래밍

AJAX

goldpig 2023. 6. 15. 19:16
728x90

AJAX(Asynchronous JavaScript and XML)는 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술이다. 즉, 서버와 통신하는 기술. 쉽게 말해 새로고침 없이(웹 페이지 전환이 부드러워진다) 서버에게 GET 요청하는 JavaScript 코드

  • The use of XMLHttpRequest to communicate with servers
  • Allows Web pages to be updated asychronously -> Exchange data with a server behind the scenes, Update parts of a page without reloading the whole page
  • loads data in the background and display it on the page, without reloading the whole page -> Makes apps faster and more responsive to user actions

Synchronous Web Applications

  1. 사용자는 필드 형식에 맞춰서 form을 제출한다
  2. 브라우저는 서버에 Request를 발생시킨다.
  3. 서버는 요청을 처리하고 Response를 보낸다. 사용자는 그 응답이 올 때까지 기다려야 한다.(a response containing the exact page that the browser will render)
  4. 브라우저는 새로운 페이지를 로드하고 일시적으로 브라우저 화면이 비어진다. (Browser loads the new page and temporarily makes the browser window blank)

사용자가 서버에게 요청을 보내면 서버로부터 응답이 올때까지 기다리고 브라우저가 응답 받은 데이터와 함께 전체 페이지를 reload 한다.

Asynchronous Web Applications

  1. XMLHttpRequest object를 Request 관리를 위해 만든다.
  2. 그리고 XMLHttpRequest를 서버에게 보내고 Response를 기다린다. 
  3. 요청은 비동기적으로 한다. 따라서 사용자는 서버가 그 요청을 처리하는 동안에도 동시에 웹 애플리케이션과 계속해서 상호작용할 수 있다.
  4. 서버에서 응답이 오면, XMLHttpRequest는 콜백 함수를 실행한다. 비동기적으로 처리하면 전체 페이지를 Reload 하는 것이 아니라 부분만 Reload하게 된다. 따라서 부분 업데이트는 웹 앱을 더 반응형으로 만든다.(Partial page updates help make Web apps more responsive)

 

728x90

'CS 지식 > 인터넷프로그래밍' 카테고리의 다른 글

Promise  (0) 2023.06.15
JavaScript Events  (0) 2023.06.15
HTML Document Object Model(DOM)  (0) 2023.06.15