[KH국비지원 웹개발자 과정] Day_63 키워드 ajax

 

해당 포스팅은 강의 복기용으로 키워드를 기록하는 용도의 포스팅입니다.
--------------------------------------------------------------------------------------------------

세미프로젝트 후 수업

AJAX(Asynchronous Javascript And XML)
:비동기적으로 서버와 요청하고 응답받는 기술.
XMLHttpRequest객체를 이용한다.
전체 페이지를 갱신하는 경우 자원과 시간을 낭비하게 된다.
필요한 부분만 비동기적으로 정보를 갱신하는 기술.
비동기적으로 특정 이벤트가 발생하였을 때 서버를 갔다온다.
페이지를 이동할 때 같이 이동하여야 할 자원들.
기본소스들. 그런 것들을 그대로 둔 채로 필요한 부분만
서버와 통신하여 갱신할 수 있는 비동기식 처리방식.

콜백함수

파이널 때 사용할 것 : 로깅, ajax, 쿠키, 세션

http 응답
200 - 요청성공
400- 쿼리스트링 개수 오류
403-  접근거부
404 - 페이지 , url 없음
500- 서버오류 발생

ajax 실습

1. XMLHttpRequest 을 이용한 바닐라js  ajax 실습
 1) GET방식
  :서버로 데이터를 보낼 때 URL에 쿼리스트링을 이용
 2) POST방식
 :

->바닐라js ajax의 장점은 커스터마이징이 가능하다는 것.

2.jQuery 를 이용한 ajax실습
 1) GET, POST 동일한 사용법
 $.ajax({
  url: "",
  data: (// JSON},
  type : " get또는 post  "
  success: function( data ){},
  error: function(){}
});

ajax서버
@ResponseBody
:뷰리졸버가 아닌 화면단 반환을 위한 어노테이션.

@RequestMapping의 produces 속성 설정
반환형이 json일 경우
produces = "application/json;charset=utf-8"
반환형이 문자열일 경우
produces = "text/plain;charset=utf-8"

json 라이브러리 pom.xml 디펜던시 추가
gson2.8.5
json-simple1.1.1

simple JSONObject 로만든  json객체를 
toString()으로 문자열로 변환하여 반환.

 

ajax실습)
1단계 서버로 데이터 json으로 보내기.
2단계 서버에서 String데이터 받기.
3단계 데이터 주고 받기.
4단계 서버에서 json데이터 받기.