지금 일하는 곳에서 Ajax form을 섞어서 쓰는데 쓰다보니까
무지성으로 되는거 그때그때 갖다 쓰는 느낌이라 알고서 사용하고 싶었다.
공부한거 토대로 리팩토링도 하고 오류도 잡아보고 싶어서..🫠
그래서 나한테 필요한 내용만 정리할거다 군데군데 빠진게 있어도 이해해주시길

AJAX (Asynchronous JavaScript and XML)

서버와 클라이언트의 데이터 전송 및 처리를 비동기식으로 처리한다.
JS를 활용한 비동기적 통신 기법.
즉, 서버에서 응답을 받기도 전에 다른 작업을 처리한다.

또한 전체 웹 페이지를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있어 시간이 절약된다!
ex) 수백줄로 구성된 웹페이지에서 바꾸고자 하는 데이터만 바꿀 수 있다.

AJAX의 기본 사용 형태

// with jQuery

$.ajax({
  method: "POST", // HTTP 요청 방식
  url: "/user/someFolder/some.do", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
  dataType: "json", // AJax를 통해 호출한 페이지의 return 형식
  data: { name: "John", location: "Boston" } // HTTP 요청과 함께 서버로 보낼 데이터
  error: function() { // 에러났을 때 처리함수
  		console.log('connect fail');
  },
  success: function(data) { // 성공했을 때, 처리함수
        console.log("data : " + data);
  }
});

장점 :
1. 페이지 리로드가 없어 Server 부담이 덜하고 속도도 빨라진다.
2. 그래서 기존 페이지 내 데이터가 초기화 되지도 않는다.

단점 :
1. 화면의 이동없이 Data를 송수신해 보안상 문제 있다.
2. Script 기반이라 디버깅이 어렵다

📃 Ajax reference
1. http://www.tcpschool.com/ajax/ajax_intro_basic
2. https://api.jquery.com/jquery.ajax/
3. https://inpa.tistory.com/entry/AJAX-%F0%9F%93%9A-%EC%84%9C%EB%B2%84-%EC%9A%94%EC%B2%AD-%EB%B0%8F-%EC%9D%91%EB%8B%B5-jQuery#.ajax

Form

서버와 클라이언트의 데이터 전송 및 처리를 동기식으로 처리한다.
그래서 데이터를 주고받을 때 웹 페이지 전체가 reload 된다.

제출 등의 버튼을 누른 후 페이지가 갱신되어야 하는 경우에 사용한다.

Form의 기본형태

<form action="mywebsite.com" method="POST" name="webSite">
    <!--Input of any type and textareas goes in here-->
</form>

action : <form> 태그에 입력된 내용을 처리하는 서버 프로그램의 URI를 지정하는 역할을 한다.
method : 사용자가 입력한 내용을 get, post 중 어떤 방식으로 넘길지를 정하는 역할

• 이때, post방식은 입력된 내용의 크기에 제한을 받지 않고 입력한 내용이 노출되지 않아 보안이 요구되는 기능에 사용된다.
  name : 한 문서에 여러개의 <form>이 있을 때, form을 구분하기 위해 사용된다.

장점 :
1. 직관적임

단점:
1. 전체 페이지를 reload 하기 때문에 서버의 부하가 크고
2. 페이지를 새로 읽어와야 해서 시간도 오래걸린다.

📃 Form reference
1. https://www.freecodecamp.org/korean/news/html-form-input-type-and-submit-button-example/

정리해보니 좋다 나쁘다로 나뉘어 지는게 아니라
상황에 따라 적절한 요소를 골라써야 하는구나 싶었다.