비동기 방식(AJAX)을 사용한 웹사이트 구현시 제이쿼리의 ajax()메소드를 많이 사용한다. 이때 AJAX의 요청이 시작 또는 완료될 경우 특정한 메시지나 문구를 방문자에게 알림창 등의 방식으로 보여주기 위하여 ajaxStart() 그리고 ajaxStop()메소드를 사용할 수 있다. 먼저 이 두가지 메소드를 간단하게 설명하면 아래와 같다. ajaxStart() 메소드 - AJAX 요청이 시작되는 시점에 해당 함수를 실행ajaxStop() 메소드 - 실행중인 모든 AJAX 요청이 멈추게되면 해당 함수를 실행 # AJAX 실행시 함수 실행이 필요한 경우비동기 방식은 페이지 reload에 따른 화면 전환이 발생하지 않으므로 사용자가 인지하기 어렵다. 이런 경우 사용자가 쉽게 알아볼 수 있는 UI를 제공하는 것이 좋으며 이 경우 자주 사용되는 방법이 Loading 메시지를 AJAX가 일어나는 콘텐츠 영역이나 화면 중앙에 모달 형식으로 보여주는 경우가 많다. 그럼 아래에는 이를 사용한 자세
2016-06-13 13:31:00비동기 방식으로 새로운 콘텐츠를 불러오는 경우 로딩중이라는 아이콘이나 모달창등을 어디서나 쉽게 볼 수 있다. 오늘 우리가 만들어보려 하는 것은 바로 'Loading...' 문구를 콘텐츠 영역 가까이에 표시해보려고 한다. 아래에는 이를 구현하기 위해 필요한 html, css 그리고 자바스크립트 코드이다. 먼저 비동기 AJAX 구현시 이런 인터페이스가 왜 필요한지부터 간단하게 알아보자.페이지에 AJAX를 사용해 새로운 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 에러라고 생각한 뒤 이탈하려는 유저가 많아질 수 밖에 없을 것이기 때문이다.스크린샷) AJAX 구현시 자주 볼수 있는 로딩관련 인터페이스이런 이유로 로딩중이라는 효과를 가시적으로 나타나기 위해 아이콘 및 이미지
2016-06-13 11:19:36
