Spring

Spring 프레임워크에서 사용하는 Ajax통신

호ㅁl 2022. 12. 26. 17:46

Ajax

  • 자바스크립트 라이브러리중 하나인 비동기 통신(비동기방식:웹페이지를 리로드하지않고 데이터를 불러오는 방식)
  • 전체페이지를 로드하지않고 일부만을 위한 데이터를 로드하는 기법이다.
  • 클라이언트와 서버간의 데이터를 주고받는 기술이다.
  • 웹페이지의 속도향상
  • 서버의 처리가 완료 될 때까지 기다리지 않고 처리 가능하다.
  • 히스토리가 관리되지않기때문에 보안에 신경써야한다.
  • 연속적으로 데이터를 요청하면 서버부하가 증가할 수 있다.

XMLHttpReauest

  • 웹페이지를 전부 로딩하지않고도 일부만을 갱신하여 쉽게 데이터를 받을 수 있다.
  • 이 객체를 이용해야 ajax를 사용할수 있다.

 

데이터 전송형식(XML)

xml 데이터 : 태그로 이루어진 다목적 마크업 언어.

Json 데이터 : 사람과 기계가 모두 이해하기 쉬운 데이터 표현방식이다.

String 데이터  : 문자열을 주고받음

 

Ajax 예제

다이나믹 프로젝트 생성

 

WebContent 폴더에 제이쿼리 라이브러리 추가

 

index.html페이지 추가

 

텍스트 파일생성

한글깨지기때문에 내용 복사 후 인코딩정보 변경 후 기존내용에 복사한 내용  덮어 씌우고 저장.

 

 

index.html페이지에서 버튼에 onclick 이벤트를 걸어주고 상단에 제이쿼리 라이브러리를 작성해준다.

 

 

 

url : 서버에 요청할 URL

type : 통신타입 설정 (get,post)

success : 요청 및 응답에 성공했을 때 실행할 함수 설정

위의 예제에서 요청이 성공 했을때 'div태그안에 data를 html에 출력해라 라는 의미'

 

 

ajax디버깅

개발자 모드 - 네트워크(외부통신에 대한 기록이 남는곳)

통신 문제 유무확인할때 사용한다.

프리뷰(미리보기) 응답데이터이다.

경로를  잘못 작성하여 페이지 로드시 빨간색으로 오류표시가 뜬다. /  상태 : 404오류라는 것임.

응답데이터인오류페이지가 화면에 나타나지않는 이유는

예외 처리가 되어있기때문이다.

success 되었을때만 데이터를 표시 하라는 것 .

 

 

ajax통신

1. XMLHttpReauest객체생성먼저

2. open() 메소드 정의 : (전송방식 , 경로 , 비동기 사용여부: false : 병렬 사용 X)

3. send() :ajax 수행

4. reponseText : 응답데이터를 받아옴

 

예외처리 

onreadystatechange 메소드

XMLHttpReauest상태가 변할때 메소드 호출됨.

readyState 속성값이 4일때 문서객체와 관련된 처리를 해줌

Status 프로퍼티 : 서버의 문서 상태를 나타냄.

 

 

 

스프링 프레임 워크에서의 ajax

 

String 데이터

resouces하위에  웹페이지에 필요한 자원 자바스크립트 파일 이미지 등등... 넣으면된다.

js파일에 제이쿼리 라이브러리를 넣는다.

home.jsp에 링크를 걸어준다.

링크를 눌렀을때 이동할 페이지

버튼 클릭 시 함수가 호출되고 가상경로로 이동하게된다.

ajaxController를 만들어주고 ResponseBody어노테이션을 반드시 명시해준다.

해당가상경로의 메소드에서 ResponseBody어노테이션을 사용하게되면 forward나 redirect하지않고

ajax요청의 응답데이터를 보여준다.

가상경로로 페이지를 이동하지않고 return값이 출력된것을 확인 할 수 있다.

json데이터

잭슨 라이브러리추가

jackson.txt
0.00MB

pom.xml의 dependencies 안쪽에 작성한다.

잭슨 라이브러리를 추가하면

객체들을 알아서 json으로 만들어 값을 가져와 리턴하기때문에 리턴하고자 하는 값만 생각하면 된다.

 

게시글번호를 입력 후 조회버튼 클릭 시 검색한 게시글의 데이터를 확인 할 수 있게하는 코드 작성.

 

input태그의 입력값을 제이쿼리를 통해 가져온다.

가져온 입력값을 화면에 데이터로 출력하는 것이 아니라 

console.log()로 콘솔창에서 데이터를 확인하게 한다.

게시글 한건을 리턴해야하기떄문에 반환형은 BoardVO이다.

선택한 게시글의 bidx를 매개값으로 넘기고 넘긴 bidx의 내용을 vo에 담아 return한다.

 

boardService를 사용하기위해선 상단에 의존주입을 해준다.

 

검색하고자 하는 글 번호 입력 후 조회버튼을 누르면 검색한 bidx에 해당하는 내용들이 출력되는 것을 확인할 수 있다.

 

선택한 검색타입과 검색어 화면에 list로 출력하기

 

검색타임과 검색어를 입력하여 검색하는 코드작성

검색 버튼에 클릭이벤트를 걸어준다.

 

버튼 클릭 시 form태그가 감싸고 있는 입력양식의 파라미터의 값을 가져온다.

가져온 파라미터를 html에 출력하는 코드를 작성한다.

 

serialize():폼태그 안에있는 입력양식을 한번에 파라미터 문자열로 받아오는 메소드 , 반드시 네임속성이 있어야함.

리스트 형태로 출력할 것이기 때문에 반환값은 List가 되고 검색내용들을 매개변수로 넘긴다.

 

검색한 검색타입과 검색어가 리스트형태로 출력되는것을 확인할 수 있다.