AJAX (Asychronous JavaScript And XML)
: 서버로부터 데이터를 가져와서 전체 페이지를 새로고침하지 않고 페이지의 일부만 로드하게끔 하는
비동기식 통신 방식이다.
- 데이터 형식: XML, Text, HTML, JSON, CSV 등
- 구현 방식: JavaScript / jQuery 방식
동기식 / 비동기식
1. 동기식
: 클라이언트가 서버로 데이터를 요청하면 그 요청을 처리한 후 해당 응답페이지가 돌아올 때까지
다른 작업은 대기해야 하는 방식이다.
- 전체 페이지가 새로고침된다.
2. 비동기식
: 클라이언트가 서버로 데이터를 요청하면 해당 응답이 돌아오기를 기다리지 않고 다른 작업을
수행할 수 있다.
- 전체 페이지를 갱신하지 않고 페이지의 일부만 업데이트할 수 있다.
- 단점:
① 현재 페이지에 지속적으로 resource가 쌓여서 페이지 속도가 느려질 수 있다.
② 페이지 내 복잡도가 기하급수적으로 증가하여 에러 발생 시 디버깅이 어려워진다.
③ 데이터 요청 후 응답데이터를 가지고 현재 페이지에 새로운 요소를 만들어서 구현해야 한다.
DOM 요소 작성 구문을 잘 알고 있어야 한다.
jQuery 방식 AJAX
$.ajax({
url : 요청 데이터를 전송할 url
속성명 : 속성값,
속성명 : 속성값,
...
})
1. 주요 속성
- url: 요청값을 전송할 url(필수)
- data: 서버로 전송할 요청 Parameter를 설정
- type: http 요청 방식을 지정(get/post), 이를 생략 시 get 방식으로 요청
- datatype: 서버의 응답(response) 데이터의 형식을 설정(xml, text, json, html 등),
이를 생략 시 알아서 판단하여 지정
① xml: Tree 형태의 구조
② json: Map 형태의 데이터 구조(일반적)
③ script: JavaScript 및 일반 String 형태의 데이터
④ html: html 태그 자체를 return하는 방식
⑤ text: String 데이터
- success: ajax 통신 성공 시 호출되는 함수를 지정, 매개변수로 응답 데이터를 받음
- error: ajax 통신 실패 시 호출되는 함수를 지정
- complete: ajax 통신 성공 여부와 상관없이 통신 완료 후 실행할 함수를 지정
- async: 비동기(true) / 동기(false)를 지정
2. 부수적인 속성
- contentType: 요청 시 데이터 인코딩 방식을 지정(보내는 측의 데이터 인코딩)
- accept: Parameter의 타입을 설정(사용자에 특화된 Parameter 타입을 설정 가능)
- beforeSend: ajax 요청하기 전 실행되는 callback 이벤트 함수(데이터 가공 및 header 관련 설정)
- cache: 요청 및 결과값을 scope에서 가지고 있지 않도록 하는 것(기본값 true)
- contents: jQuery에서 response의 데이터를 parsing하는 방식을 지정
- context: ajax 메소드 내 모든 영역에서 parsing하는 방식을 지정
- crossBomain: 타 도메인 호출 가능 여부를 설정(기본값 false)
- dataFilter: 요청을 받았을 때 정상적인 값을 return할 수 있도록 데이터와 데이터 타입을 설정
- global: 기본 이벤트 사용 여부(ajaxStart, ajaxStop), 버퍼링과 같이 시작과 끝을 나타낼 때, 선처리 작업
- password: 서버에 접속 권한(비밀번호)이 필요할 때
- processData: 서버로 보낸느 값에 대한 형태 설정 여부(기본 데이터를 원하는 경우 false 설정)
- timeout: 서버 요청 시 응답 대기 시간(milisecond)
3. 장점
: JavaScript 방식보다 코드 길이가 짧아 구현하기에 쉽다.
JSON (JavaScript Object Notation)
: Ajax 통신 시 데이터 전송에 사용되는 포맷 중 하나이다.
- https://code.google.com/archive/p/json-simple/downloads
- 배열 형태: JSONArray[value, ...]
- 객체 형태: JSONObject{"key":value, ...}
① key는 반드시 문자열 사용
② value는 char를 제외한 String, Number, Boolean, Array, Object, null로 저장할 수 있다.
- Ajax 통신에서 Object 타입의 데이터 전송 시 xml 대비 용량이 작고 속도가 빠르다.
- 순수 TEXT 기반으로 TEXT 형식이 구조화되어 있다.
- 대부분의 프로그래밍 언어에서 JSON 포맷 데이터를 핸들링할 수 있는 라이브러리를 제공하기 때문에
시스템 간 객체 교환에 용이하다.
GSON (Google JSON)
: Google에서 만든 오픈 라이브러리이다. 이는 JSON 파일을 쉽게 읽고 만들 수 있는 메소드를 제공한다.
- https://mvnrepository.com/artifact/com.google.code.gson/gson/2.8.5
- toJson(Object, Appendable)
① 매개변수 Object(응답할 객체), Appendable(응답할 스트링(연결통로))
② JSON 방식으로 변환하기 번거로운 List, Map 객체를 toJson() 메소드 하나로 쉽게 JSON으로
변환할 수 있다. (모든 Object를 변환할 수 있다.)