모달, Ajax 차이점은?

모달, Ajax 차이점은?

QA

모달, Ajax 차이점은?

본문

모달, 실제로 데이타가 출력되지만 display:none 기능으로 보이지 않다가, show 버튼을 누르면 display:block 으로 변경되면서 눈에 보이게 됨. (페이지 용량이 더 늘어남)

 

Ajax

화면에 출력되지 않다가 버튼을 글릭하면 자바스크팁트가 실행되면서 해당 페이지에 내용을 불려와서 출력하는 방식. (페이지 용량이 더 적음)

 

위 내용이 제가 알고 있는건데 맞나요?

이 질문에 댓글 쓰기 :

답변 3

아닙니다.

모달은 말그대로 눈에 보이지않다가. 클릭시 그 내용이 출력된다 비유하자면,

일반 모달의 경우 눈에 보이지않는 내용들도 함께 모달창안에 숨어있지요?

그 내용들은 항상 고정된 텍스트를 출력합니다.

이때 ajax를 연동할 경우, 데이터베이스와 연동하여

모달창에 있는 텍스트 내용을 바꿀 수 있습니다.

 

즉 목록에 10개의 글이있고, 모달보기 버튼이있다면,

일반적으로는 10개의 글에 10개의 모달을 만들겠지만,

ajax를 사용하면 10개의 글에 1개의 모달을 만들어, 그 속의 내용만 동적으로 불러온다 할 수 있습니다.

 

제가 만든 테마의 일 부분입니다.
http://theme.gnuwiz.com/

3554430148_1710996510.496.png

이 부분이 모달은 1개이지만, 내용을 각각 다르게 불러오는 ajax가 적용된 상태입니다.

 

-----------

그 외 다른 동작에서 비유하자면,

상태를 바꾸는 버튼이 있다고 하겠습니다.

보통은 그 버튼을 누르면 <form>에있는 뒷단으로 넘겨서 그 뒷단에서 db에 업데이트 후

다시 원래 있던 페이지로 리다이렉트 시킵니다. 즉 새로고침이 2번은 최소 실행됩니다.

 

하지만 ajax의 경우 바로 뒷단으로 넘겨 동적으로 html의 상태를 완료로 변경하는 겁니다.

'모달'과 'ajax' 는 완전 별개로 생각하는 것이 좋습니다.

 

'ajax' 를 기초부터 다시 개념이해 하는 것을 추천합니다.

=> https://upcake.tistory.com/142

https://www.w3schools.com/jquery/jquery_ajax_intro.asp

 

브라우저 주소창에서

~/a.php 를 입력하면, ~/a.php 페이지가 로딩됩니다.

b.php 내용을 불러오려면, 주소창에서 ~/b.php 를 입력해야 됩니다.

'ajax'는.. a.php 페이지에서,

주소창 ~/b.php 를 입력하지 않고, (링크 클릭하지 않고 / form submit 하지 않고)

b.php 내용을 불러오는 개념입니다. 

=> https://codepen.io/btholt/pen/abLeGa

=> https://marscompany.tistory.com/27

=> https://sir.kr/qa/292943

=> https://homzzang.com/b/jquery-247

 

모달은 UI용어로 aJax는 개발용어로 보면 되지 않을까 싶은데요...
형태는 모달, 내부적인 연결은 ajax 하겠다..

보통 이렇게 말하니까 두개를 비교하는건 좀 다른 의미 같아요.

답변을 작성하시기 전에 로그인 해주세요.
전체 406
QA 내용 검색
filter #ajax ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT