-
ajax란?
: Asynchronous JavaScript and XML의 약자로 자바스크립트 라이브러리 중 하나이다.
웹 페이지 전체를 다시 로딩하기 않고도 웹 페이지의 일부분만을 갱신할 수 있으며,
백그라운드 영역에서 서버와 통신하며 그 결과를 웹 페이지의 일부분에 표시할 수 있다.
따라서 비동기식 방법으로 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이다. ( Json이나 Xml 두가지 형태로 데이터를 갱신할 수 있다. )
** 비동기 방식은 웹 페이지에서 요청이 있지 않는 상황에서도 프로그램이 계속 돌아가고 있다.
그렇기 때문에, 처리 방식도 빠르고 화면을 리로드 하는 경우 필요한 부분의 리소스만 가져올 수 있다.
-> JavaScript를 통해 백 그라운드에서 데이터의 처리와 브라우저에 나타내는 것을 모두 처리한다.
- 우리는 여기서 데이터 전송 방법을 상세하게 설정할 수 있다. Ajax는 jquery문법으로 많이 이용됐다.
$.ajax({ type: ' POST ' , // GET, POST, PUT DELETE 4 가지 방식 url: ' /replies/new ' , // Controller 의 value와 동일한 값 data:JSON.stringify(reply) , // 전송하고자 하는 데이터. contentType:"application/json; charset=utf-8", // 요청 컨텐트 타입 ( 생략하면 web Browser 에게 위임 ) dataType: 'json', ( 명시하지 않을 경우 자동으로 추측 ) beforeSend: function(){ HTTP Request를 하기 전에 호출됨 }, success: function(data, status, xhr){ 정상 응답을 받았을 경우 success 콜백 }, error: function(xhr, status, error){ 응답을 받지 못 했거나 데이터 형식을 확일할 수 없을 때 error 콜백 ( 데이터 형식이 다른 응답이 와도 error 콜백 호출 ) }, complete: function(xhr,status) { success와 error 콜백이 호출된 후에 반드시 호출됨 }, async: true , // 요청 시 동기화 여부 ( default : 비동기 ) cache: true , // 캐시 여부 timeout: 3000, // 제한 시간 내에 완료되지 않으면 요청을 취소하거나 error 콜백 호출 })
'Spring' 카테고리의 다른 글
게시판 파일첨부 ( 2. DB에 저장 및 detail에 Attach ) (0) 2023.04.14 게시판 파일 첨부 (1. 파일을 임시 보관소에 저장하기 ) (0) 2023.04.14 회원가입, 로그인, 게시판 백엔드 실습( 댓글 리스트 , pagenation ) (0) 2023.04.06 회원가입, 로그인, 게시판 백엔드 실습( 댓글 작성 ) (0) 2023.04.06 Spring의 동기식 / 비동기식 (0) 2023.04.06