<ajax 비동기통신>
- ajax란?
: AJAX는 XML에 기반한 종합 기술로 Asychronous Javascript XML(비동기 자바스크립트 XML)을 줄인 말로 자바스크립트로 HTTP 요청을 보내 XML 응답을 받아 사용하는 기술이다.
-동기 vs 비동기
웹 → 동기 통신. 턴 방식.
(클라이언트와 서버 간의 데이터 교환을 턴 방식으로 운영한다.)
클라이언트가 서버에 요청을 보내고, 응답이 돌아올 때까지 클라이언트는 대기. 응답이 돌아오면, 기존의 결과는 모두 삭제되고, 새 응답을 가지고 다시 전체 출력을 하게 된다.
AJAX → 비동기 통신.
클라이언트가 서버에 요청을 보내고, 응답이 돌아올 때 까지 백그라운드에서 처리된다. 사용자는 AJAX 요청, 응답 과정에서 영향을 받지 않는다. 응답이 돌아오면, 기존의 결과에 응답을 추가하는 형태로 결과를 보여준다.
[장점]
: 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 할 수 있다.
: 전통적인 웹 어플리케이션 방식에 비해서 서버 측의 처리 속도도 빠르고 전송 데이터의 양도 훨씬 적다.
[단점]
: 외부 검색 엔진이 웹 페이지를 검색할 수 없는 문제가 있다.
: AJAX는 클라이언트 풀링 방식(사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식)으로 실시간 서비스를 제공할 수 없다.
: AJAX가 포함된 HTML 페이지가 속해있는 서버가 아닌 다른 서버로 요청을 보낼 수 없고, 클라이언트 PC 파일에 접근할 수도 없다.
- 사용시기
※ AJAX 활용이 필요한 경우
- 웹 페이지를 바꾸지 않고 현재 페이지에서 어떤 동작을 해야 하는 기능이 필요할 때
- 불필요한 팝업을 사용하여 처리하는 작업을 수행할 때
※ AJAX 활용이 필요가 없는 경우
- 여러 번 불필요한 화면을 다시 출력할 때
- 특정한 데이터를 반복 사용하면서 다양한 작업을 수행할 때
[요청 절차]
- XMLHttpRequest 객체 생성
- AJAX 객체 정보 설정 (서버 주소, 데이터 첨부, 방식-비동기, 콜백함수)
- AJAX 요청 (send)
- AJAX 상태 이벤트 확인 콜백 함수 호출
- 서버로부터 응답이 도착하면(이벤트) 결과 출력. DOM 기술.
[작동 방식]
- 웹 페이지에서 이벤트 발생. (페이지가 로드된 이후 버튼 클릭)
- Javascript 에 의해 XMLHttpRequest 객체 생성
- 생성된 XMLHttpRequest 객체가 웹 서버에 요청 전송
- 서버가 이 요청에 대한 처리
- 서버가 웹 페이지로 응답 전송
- Javascript 가 응답을 수신
- Javascript 가 수신한 응답 내용을 바탕으로 액션 처리 (ex. 페이지 업데이트)
ex) 기본적인 ajax예시
$.ajax({
url: '접속할 페이지 주소',
type: '전송 방식 (GET / POST)',
contentType: '전송할 데이터 타입',
data: '전송할 데이터 - 파라미터 문자열 key=value&key=value',
dataType: '요청한 데이터 형식 (html / xml / json / jsonp)',
timeout : '밀리세컨드단위 제한시간',
cache : '이전요청에대한 캐쉬저장여부 (true=사용함, false=사용안함)',
succes: function(data){
// 전송에 성공하면 이 콜백 함수를 실행 (data 에는 응답받은 데이터가 저장된다)
},
error: function(){
// 전송에 실패하면 이 콜백 함수를 실행
},
complete: function(){
// success후에 콜백함수 실행
}
})
.done(function() { // 서버요청이 성공시의 콜백함수
alert( "success" );
})
.fail(function() { // 서버요청이 에러시의 콜백함수
alert( "error" );
})
.always(function() { // 항상 실행 (finally 같은느낌)
alert( "complete" );
});
- type: GET 또는 POST 등을 지정
- url: 대상 URL 지정
- contentType:서버로 보내는 데이터타입
- (디폴트:application/x-www-form-urlencoded;charset=utf-8 / json: application/json; charset-utf-8)
- async: 동기, 비동기 지정(boolean)
- data: 요청 매개변수 지정(object, string)
- dataType: 서버에서받는 데이터타입
- success(data, status, xhr): ajax 성공 이벤트 리스너 지정(function, array)
- error(xhr, status, error): ajax 실패 시 이벤트 리스너 지정(function)
- complete(xhr, status): ajax 완료 시 이벤트 리스너 지정(function)
: object형식으로 보낼땐 키값만 잘 맞춰주면 벨류값은 알아서 들어가기 때문에 키값만 적어줘도 된다.
따로 변수 만들어서 값 넣어서 ajax안에는 변수명만 넣어주면 보기 편하다.
- ajax로 데이터 전송 후 controller에서 받을 때(어노테이션)
: @requestBody
1. 객체생성가능
2. getter와 setter역할을 해주는 것이 없는 map이나 일반변수일 때 getter, setter역할을 대신해 주는 어노테이션
3. Http요청 body에 데이터(객체)를 붙여서 보내는 post방식(json)
: @requestParam
1. 객체생성불가능
2. getter와 setter역할을 해주는 것이 없는 map이나 일반변수일 때 getter, setter역할을 대신해 주는 어노테이션
3. Http요청 header에 데이터를 붙여서 보내는 get방식이나 formData방식일 때 사용
: 공통 json형식으로 보낼 때는 header든 body든 각 위치에 맞는 어노테이션을 붙여줘야 한다.
: dto dto를 선언할 때 getter, setter를 같이 선언하기 때문에 getter와 setter가 parameter를 받아주는 기능을 해서 request어노테이션을 붙여줄 필요가 없다.
: ajax의 contenttype을 선언을 안 할 시 'application/x-www-form-urlencoded;charset=UTF-8'로 적용