테스트 사이트 - 개발 중인 베타 버전입니다

모달, Ajax 차이점은? 채택완료

울라프 1년 전 조회 1,963

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

 

Ajax

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

 

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

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
그누위즈

아닙니다.

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

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

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

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

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

 

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

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

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

 

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

http://sir.kr/data/editor/2403/3554430148_1710996510.496.png" width="100%" />

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

 

-----------

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

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

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

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

 

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

울라프
1년 전
게시글이 1,000 개일때 파일 용량을 따지면 모달 vs Ajax 중 어떤 것이 더 큰가요?
그누위즈
1년 전
파일용량은 미세하게 줄겠지만,
1000의 모달을 html로 만드는것 보다야,
ajax가 훨씬 좋습니다..

댓글을 작성하려면 로그인이 필요합니다.

1년 전

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

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

1년 전

'모달'과 '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

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인