AJAX 대 양식 제출
서버에서 데이터를 꺼내고 이를 위해 Struts를 사용하는 경우 MVC Architecture나 AJAX에서 호출하는 페이지를 제출하여 꺼낼 수 있지만 규약은 양식과 렌더 응답을 사용하는 것이지만 풍부한 사용자 경험을 제공해야 하는 어려움도 있기 때문에 규약을 절충하고 과도한 AJAX를 사용하기 시작합니다.그래서 우리는 어떻게 둘 사이의 균형을 맞출까요?
저는 개인적으로 디스플레이 업데이트를 위해 AJAX를 사용해야 하고 페이지 재로드를 통해 양식 제출을 해야 한다고 생각합니다.추리?
양식을 제출할 때 응용 프로그램에 수행할 작업을 지시하는 것입니다.사용자들은 그것이 이루어졌다고 느끼고 싶어하는 경향이 있습니다.페이지가 다시 로드되지 않을 때 사용자들은 종종 "그게 가능했나?"라는 의문을 갖게 됩니다.그런 다음 그들은 자신들이 한 일이 옳은지 확인해야 합니다.
반면, 차트 등을 표시할 때 사용자가 "2011 데이터를 표시하라"고 말하는 경우(예를 들어, "2011 데이터를 표시하라"고 하는 경우), 사용자는 어떤 작업(새로운 엔티티 생성, 이메일 전송 등)을 수행하지 않습니다.따라서 AJAX는 이 경우 좋은 사용자 인터페이스를 제공할 수 있습니다.여기서 페이지를 다시 로드하는 것은 귀찮을 것입니다.
결론적으로 폼 제출은 페이지 재로드(사용자가 작동하는 것을 볼 수 있도록 함)를 통해 수행되어야 한다고 생각합니다. 반면 디스플레이 업데이트는 AJAX(귀찮음 페이지 재로드 방지)를 사용해야 합니다.
물론, 이것은 선호하는 것입니다.우리 회사의 애플리케이션 중 일부는 AJAX를 사용합니다.하지만 이러한 애플리케이션은 유지보수 및 디버깅이 가장 어려운 애플리케이션입니다. ;)
일반적인 오래된 HTML 양식 제출과 화려한 아약스 양식은 상호 배타적이지 않습니다.
먼저, 평이한 HTML 양식을 올바르게 작동시킵니다.그러면 javascript를 추가해서 양식을 가로채고 ajax 요청을 보냅니다.
컨트롤러와 모델은 사용자의 브라우저가 javascript를 지원(또는 활성화)하는지 여부를 신경 쓰지 않습니다.렌더링 된 뷰는 자바스크립트로 통화가 이루어졌는지 단순한 양식 제출로 결정됩니다.이는 MVC 패턴의 강점 중 하나이며, 제약 조건이 아닙니다.
저는 이 둘 사이의 선택이 어느 정도 본질적이라고 생각합니다.
양식 제출은 동기식이며 페이지를 다시 로드합니다.
ajax 호출은 비동기적이며 페이지를 다시 로드하지 않습니다.
어떤 조치가 많은 UI 요소를 변경하거나 많은 데이터를 폴링하여 렌더링해야 한다면 양식 제출로 진행하겠습니다.반면에 선택 상자를 채우거나 사용자 경험을 개선하는 등의 간단한 작업에 특정한 작업이 사용된다면, 저는 AJAX 호출을 시도할 것입니다.
필요한 만큼의 아약스 콜이나 양식 제출을 사용하는 것을 피할 수 없기 때문에 결국은 사용자에게 달려 있습니다.
요즘 같은 시대에는 (순수한 향수를 제외하거나, 어쩌면 모를 수도 있는) 오래된 표준 HTML 양식 제출 방법을 사용하는 경우가 사실상 없습니다.
<form>태그 자체는 양식 내의 모든 이름과 데이터 쌍을 쿼리 문자열로 끌어모으는 .czize() 함수의 이점을 이용하고 싶을 때 여전히 유용할 수 있지만, 그 외에는 사용할 필요가 없습니다.<form>요즘엔 아예 꼬리표를 달고 있네요.
개발자는 AJAX를 사용하여 보다 압축된 코드 기반으로 전체 프로세스를 더 많이 제어할 수 있습니다.하지만 더 중요한 것은, 우리는 더 이상 그런 식으로 일을 하지 않는다는 것입니다.
고려 사항:
(Style -이 제출하는 ( 필드(form field) (① ③ - ②) HTML 양식: (a) 양식을 수집합니다.name=속성 값(이들은 사실상의 변수 이름이 됨) (b) 양식 필드에 사용자가 입력한 데이터와 함께 (이들은 변수 값이 됨) PHP 파일에 이러한 데이터 쌍을 게시합니다 (에 명시됨).action=폼 태그)에 속성을 입력합니다.그러면 페이지가 다른 페이지로 변경되어 화면이 눈에 띄게 새로고침되고 이전에 입력된 모든 사용자 데이터가 손실됩니다.속임수를 쓰는 것 조차도action=""한 페이지로 , 재설정/재설정됩니다. 가 한 에 되는 됩니다 는 됩니다 는 가 되는 .
(New Style) 페이지가 새로 고쳐지지 않는 것을 제외하고는 javascript/jQuery를 사용하여 동일한 프로세스를 쉽게 프로그래밍할 수 있습니다.이전에 입력한 모든 사용자 데이터/텍스트를 방해받지 않고 유지할 수 있습니다.
다시 질문으로 돌아갑니다.
기존 방식의 HTML 양식 제출을 사용하면 페이지가 변경되므로 필드 유효성 검사를 수행하려면 javascript/jQuery를 사용하여 제출 프로세스를 자릅니다.
$('myform#btnSubmit').click(function(){
var some_fields_failed = false;
//check form field values here, set: some_fields_failed = true
if (some_fields_failed){
return false; //halts the HTML Form Submit process and returns control to the user
}
});
이 경우 HTML 양식 제출 프로세스를 대체할 대부분의 AJAX Construct를 이미 사용하고 있습니다.
AJAX에 대한 간단한 소개는 기존 방식의 HTML 양식 제출 프로세스 대신 AJAX를 사용해야 하는 몇 가지 설득력 있는 이유를 제공합니다.
AJAX는 개발자의 꿈입니다. 왜냐하면 다음과 같은 것을 할 수 있기 때문입니다.
페이지를 다시 로드하지 않고 웹 페이지 업데이트
서버에서 데이터 요청 - 페이지가 로드된 후
서버에서 데이터 수신 - 페이지가 로드된 후
백그라운드에서 서버로 데이터 전송
ajax 코드는 순수 자바스크립트로 작성할 수 있지만, 최근까지 jQuery(자바스크립트) 라이브러리를 사용하는 것이 훨씬 더 간단했습니다.따라서 위의 모든 예에서는 jQuery를 사용합니다.프로젝트에 jQuery를 포함하려면 jQuery 라이브러리에 대한 참조만 포함하면 됩니다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
StackOverflow maven, Shabse Laks, 단계별로 살펴볼 가치가 있는 간단한 jQuery 튜토리얼을 만들었습니다. (중요: 아래쪽 화살표를 사용하여 페이지를 살펴봅니다.)
데이터 제출 사이에 오류가 있는 경우 서버에서 확인할 수 있는 유일한 양식 방법입니다.반면에 Ajax 전화를 걸면 클라이언트 측에서 해당 오류를 확인할 수 있습니다.따라서 데이터를 전송하는 다양한 기술 중에서 서로 다른 목적을 달성한다는 결정을 따를 수 있습니다.
AJAX와 함께 양식을 보낼 때 브라우저가 아닌 POST 요청을 생성하기 때문에 더 많은 제어가 가능합니다.처음에는 이러한 제어 기능이 필요하지 않더라도 나중에는 필요하게 될 수도 있습니다.
양식에 대한 CSRF 공격에 대한 보호가 한 가지 경우입니다.양식 데이터와 함께 전송되는 CSRF 토큰이 포함된 숨겨진 양식 입력 필드를 추가하여 구현할 수 있습니다.그러나 바람직한 구현은 제출된 POST 요청에 사용자 정의 헤더를 추가하는 것입니다.그러나 이전 양식 제출 방법을 사용하는 경우 후자를 수행할 수 없습니다. 브라우저는 요청을 구성하고 자신의 헤더를 추가할 수 없습니다.
언급URL : https://stackoverflow.com/questions/13293375/ajax-vs-form-submission
'programing' 카테고리의 다른 글
| 첫 번째 '/'(슬래시)에서 줄을 분할하고 그 일부를 ''에서 둘러싸는 방법은? (0) | 2023.09.06 |
|---|---|
| 도커로 mariaDB 컨테이너 및 시작 스크립트 시작 (0) | 2023.09.06 |
| 그라디언트 배경과 함께 CSS3 전환 (0) | 2023.09.06 |
| 배시 셸에서 Python 인라인을 실행하는 방법 (0) | 2023.09.06 |
| 사용자 지정 루트 디렉터리의 하위 폴더 및 파일 순환 (0) | 2023.09.06 |