목록Ajax (3)

땅콩이 맛난고 먹이자

[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(6. Tab UI 실습 - FE)_Tab UI 만들기를 위한 HTML과 CSS 구조 및 실습

Tab UI란? 상단 메뉴를 누를 때마다, 새 고침 없이 하단 내용이 통째로 변경되는 component이다. #Tab UI 실습해보기 JS bin 을 이용하였다. https://jsbin.com/yebulopatu/edit?html,output JS Bin Sample of the bin: jsbin.com 1. 구조 짜기 코드 TAB UI TEST orange mango banana apple I like orange 👩🏻❤🍊 결과 2. 생명 불어넣기 상단의 Tab menu를 클릭했을 때 Ajax를 불러와 하단의 content를 바꿔보자. 1) click event 추가 2) 불러오기 Using XMLHttpRequest https://developer.mozilla.org/ko/docs/Web/API..
edwith_부스트코스_웹 프로그래밍 2020. 3. 17. 13:04
[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(3. Ajax - FE)_1. Ajax 응답 처리와 비동기

AJAX란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다. #비동기(async)방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식디. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가..
edwith_부스트코스_웹 프로그래밍 2020. 3. 11. 12:26
[부스트코스]{2. DB 연결 웹 앱}(2. WEB UI 개발 - FE)_4. Ajax 통신의 이해

Ajax (XMLHTTPRequest 통신) 이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다. 더 좋은 UX를 제공할 수 있는 기술이다. 아래 탭 UI를 살펴보자. 상단에 탭을 누를때마다 컨텐츠가 달라진다. 누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이다. 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋다. 이 경우가 Ajax기술을 활용할 수 있는 대표적인 경우이다. #Ajax 통신의 이해 Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON 포맷으로 데이터를 주고 받는다. Ajax는 Ja..
edwith_부스트코스_웹 프로그래밍 2020. 2. 21. 20:56
이전 Prev 1 Next 다음