폼 데이터를 서버로 전송하고 결과를 처리하는 방법 비교 정리 > 웹프로그램

파일 업로드 지원이 쉬움
예전에는 <input type="file">을 포함한 폼을 비동기로 전송하려면 iframe 방식이 거의 유일한 선택지였음. (현재는 FormData + XMLHttpRequest나 fetch로도 가능하지만, 과거 호환성 문제 때문에 자주 사용됨)

페이지 새로고침 없이 결과 확인 가능
결과가 iframe 안에 로드되기 때문에, 메인 페이지를 리로드하지 않고도 결과를 처리 가능.

HTML 응답 그대로 렌더링 가능
서버에서 HTML을 응답하면, 그대로 iframe 안에 렌더링되므로 뷰 조작이 간편한 경우도 있음.

응답 내용의 JS 제어 어려움
iframe 안에 로드된 문서를 제어하려면 cross-origin 문제가 생길 수 있고, DOM 접근도 번거로움.

복잡한 에러 처리 어려움
예외 상황(서버 에러, 인증 실패 등)을 세밀하게 제어하거나 사용자에게 보여주기 어렵다.

UX 개선 어려움
로딩 상태 표시, 에러 메시지 표시, 부분 UI 갱신 등 비동기 UI 개선이 제한적임.

보안 이슈
iframe이 잘못된 외부 도메인을 가리킬 경우 XSS, clickjacking 등 보안 문제가 생길 수 있음.

세밀한 응답 제어 가능
JSON, 텍스트, HTML 등 원하는 방식으로 응답을 받아서 가공할 수 있음. UI 조작이 자유로움.

에러 및 상태 처리 용이
.done(), .fail(), .always() 또는 success, error 콜백 등으로 다양한 상태 처리 가능.

좋은 사용자 경험 (UX)
로딩 표시, 결과 출력, 폼 리셋, 에러 메시지 표시 등 다양한 인터랙션 제공 가능.

현대적인 방식과 호환
SPA 프레임워크(React, Vue 등)와의 궁합이 좋고, JSON API 기반의 현대 백엔드와도 잘 맞음.

파일 업로드 처리 복잡
FormData 객체를 사용해서 직접 파일 데이터를 수집하고 보내야 함. 과거엔 일부 브라우저 호환성 문제도 있었음.

CORS 정책 이슈
다른 도메인으로 요청을 보내는 경우, 서버 측에서 CORS 설정이 필요함.

초기 학습 진입 장벽
ajax()의 동작 흐름이나 에러 처리, 직렬화 방식 등을 이해해야 함.