500 에러가 계속 떠서 이유를 찾다가

지금 사용하는 mvc 패턴의 Controller에서 

@ResponseBody를 안써서 값을 돌려받지 못하는 것이었다.

 @ResponseBody

  • view 조회를 무시하고, Http message body에 직접 해당 내용 입력하여
    화면에 return 값 출력
  • viewResolver를 무시하고 화면에 출력하겠다는 의미

즉 view 조회를 무시한다는 말은 view페이지를 통해 가지않고 문자열 메서드를 그대로 반환하려면 @ResponseBody를 달아야한다. 문자열이 아닌 VO 객체를 반환해도 된다. 객체를 반환하게 되면, json 형태로 반환한다.

저작자표시

'수업정리 > JavaScript' 카테고리의 다른 글

Ajax  (0) 2023.03.31

Ajax(Asynchronous JavaScript and XML)

비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 웹 개발 기술

Ajax를 사용하면 웹 페이지가 전체적으로 새로고침 되지 않고도 필요한 부분만 업데이트할 수 있으며,

이를 통해 웹 페이지의 사용성과 반응성을 높일 수 있다고함

 

Ajax의 특징

  • 비동기성: Ajax는 페이지를 전체적으로 새로고침하지 않으므로, 비동기적으로 데이터를 처리할 수 있음
    클라이언트 측 스크립트 기술: Ajax는 자바스크립트를 기반으로 하며, 서버와 데이터를 주고받을 때
    XML, JSON, HTML 등 다양한 데이터 형식을 사용할 수 있음.
  • 서버와의 데이터 교환: Ajax는 서버와 브라우저 간에 데이터를 비동기적으로 교환할 수 있으며,
    이를 통해 서버에서 데이터를 받아와서 페이지를 업데이트할 수 있음.
  • DOM 조작: Ajax는 DOM을 조작하여 데이터를 동적으로 업데이트할 수 있음.

동기 비동기?

더보기

동기적(Synchronous) 작업은 어떤 작업을 수행할 때, 그 작업이 끝나기 전까지는 다른 작업을 수행할 수 없는 방식임

이전 작업이 끝나지 않으면 다음 작업을 시작할 수 없어서,브라우저는 이전 작업이 완료될 때까지 화면을 갱신하지 않고 멈춰있게 됩니다.

따라서, 사용자가 화면의 다른 부분을 조작할 수 없게 되고, 사용자 경험이 저하됩니다.

비동기적(Asynchronous) 작업은 작업을 수행할 때, 해당 작업이 완료되지 않더라도 다른 작업을 수행할 수 있는 방식입니다. 비동기 작업은 백그라운드에서 수행되며, 작업이 완료되면 결과를 반환하거나 콜백 함수를 호출합니다. 이러한 방식으로 작업을 처리하면 브라우저는 작업이 완료되기 전에도 다른 작업을 수행할 수 있으므로 사용자 경험을 향상시킬 수 있습니다.


DOM 이란?

더보기

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

 

Ajax의 주요 속성

  • type: HTTP 요청 메서드 (GET, POST, PUT, DELETE 등)
  • url: 요청을 보낼 서버의 URL
  • data: 요청에 함께 보낼 데이터 (JSON, XML, HTML, 텍스트 등)
  • dataType: 서버에서 받아올 데이터의 타입 (JSON, XML, HTML, 텍스트 등)
  • success: 요청이 성공적으로 완료되었을 때 실행할 콜백 함수
  • error: 요청이 실패했을 때 실행할 콜백 함수
  • complete: 요청이 완료되었을 때 실행할 콜백 함수

Ajax의 추가 속성

  • async: 비동기 요청 여부 (기본값은 true)
  • beforeSend: 요청을 보내기 전에 실행할 콜백 함수
  • timeout: 요청에 대한 제한 시간 (밀리초 단위)
  • cache: 캐시 사용 여부 (기본값은 true)
  • contentType: 요청 본문의 MIME 타입
  • processData: 데이터 처리 여부 (기본값은 true)
  • complete: 요청이 완료되었을 때 실행할 콜백 함수
  • headers : HTTP 헤더를 설정할 때 사용됩니다.

MIME타입 이란?

더보기

MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다.

웹에서 파일의 확장자는 별 의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록,

서버가 정확히 설정하는 것이 중요합니다.

브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다.

application/x-www-form-urlencoded, multipart/form-data, text/plain 등의 값을 가질 수 있으며.
이 속성을 설정하지 않으면 jQuery가 기본적으로 application/x-www-form-urlencoded로 설정합니다.

 

 

Ajax의 성공/실패 여부

Ajax 요청이 성공적으로 수행된 경우에는 success 함수를, 실패한 경우에는 error 함수를 사용하여 결과를 처리가능

추가 예정 사항

상태코드, 

response들

dom구조 추가설명

저작자표시

'수업정리 > JavaScript' 카테고리의 다른 글

AJAX 오류  (0) 2023.06.07

+ Recent posts

티스토리툴바