백엔드 Back-end/플라스크 Flask

플라스크Flask Ajax 예제 프로젝트

Tap to restart 2022. 1. 2. 08:00
반응형

Ajax란?

Asynchronous JavaScript + XML의 앞 글자를 따온 것. 

 

mozilla.org에 나온 소개

"Asynchronous JavaScript + XML(AJAX)은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, HTML 또는 XHTML, CSS, JavaScript, DOM, XML, XSLT, 그리고 제일 중요한 XMLHttpRequest 객체를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.
이렇게 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케이션은 전체 페이지를 새로 고칠 필요 없이 사용자 인터페이스에 빠르고 점진적인 업데이트를 적용할 수 있습니다. 덕분에 어플리케이션은 보다 빨라지고, 사용자 행동에 대한 반응성도 좋아집니다."

(출처: 개발자를 위한 웹 기술 > 웹 개발자 안내서 > AJAX)

 

정리하면 XMLHttpRequest 객체를 활용해서 전체 페이지를 새로 고칠 필요 없이 일부분만 빠르게 업데이트를 적용하는 방식이다. 

 

Flask로도 Ajax를 구현할 수 있다. 일부분만 업데이트를 해줄 GET Method를 추가해주면 된다. 

 

두 사진이 있는 상태에서

새로 고침 없이 사과를 누르면 아이폰이 등장하게 하는 예제다. 

로봇을 누르면 안드로이드폰이 아래쪽에 나온다. 

 

Flask Ajax Example Project 로 가면 예제 코드 전체를 볼 수 있다. 

 

 

반응형