1. Ajax
Asynchronous JavaScript and XML의 약자로
JavaScript를 이용해서 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는 통신 방식이다.
XML, Text, HTML, JSON, CSV 등 다양한 형식이 사용 가능하다.
특징
전체 페이지를 갱신하지 않고 일부분만 업데이트가 가능하다.
사용자에게 즉각적인 반응과 풍부한 UI 경험을 제공한다.
ActiveX나 플러그인 프로그램 설치 없이 이용 가능하다.
JavaScript, jQuery 방식으로 구현이 가능하다.
단점
Ajax는 JavaScript이기 때문에 브라우저에 따라 크로스 브라우저 처리가 필요하다.
오픈 소스이기 때문에 차별화가 어렵다.
연속적인 데이터를 요청할 경우 서버 부하가 증가하고 페이지가 느려진다.
페이지 내 복잡도가 증가하여 에러 발생할 경우 디버깅이 어렵다.
동기식 데이터 통신
클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기한다.
비동기식 데이터 통신
클라이언트가 서버가 데이터를 요청한 후, 응답을 기다리지 않고 클라이언트가 다른 작업을 계속 수행 하다가, 응답이 오면 응답에 관련된 작업을 진행한다.
JavaScript 방식 Ajax
GET 방식으로 서버에 데이터 전송 및 응답
브라우저 내장 객체인 XMLHttpRequest 이용하여 비동기식으로 데이터를 송수신한다.
1. XMLHttpRequest 객체 생성
*브라우저 version별 ajax 지원 여부 및 호환성 검사를 해야 한다.
2. 서버 응답 처리 함수 생성 및 콜백 함수로 지정(onreadystatechange에 함수 지정)
- 1) 응답 상태 확인
readyState(서버 응답 상태 확인 (AJAX 통신 진행 상황 확인))
-
- 0 : 요청이 초기화 되지 않은 상태
- 1 : 서버 연결이 설정된 상태
- 2 : 서버가 요청을 받은 상태
- 3 : 서버가 요청을 처리하는 상태
- 4 : 서버가 요청에 대한 처리가 끝났고 응답을 준비하는 상태
status(Http 응답 상태 코드 확인(응답이 정상적으로 이뤄졌는지 확인))
-
- 2) 응답 완료
- - responseText / responseXML
3. open() 메소드 호출
- 서버와 데이터 교환할 때 필요한 정보를 입력한다. (요청 방식, 대상(서버), 비동기/동기 여부(기본 값 : true))
4. send() 메소들 호출
- 서버(대상)에 데이터를 전송(요청)한다.
POST 방식으로 서버에 데이터 전송 및 응답
- XMLHttpRequest 객체 생성
- *브라우저 version별 ajax 지원 여부 및 호환성 검사를 해야 한다.
- 서버 응답 처리 함수 생성 및 콜백 함수로 지정(onreadystatechange에 함수 지정)
- onreadystatechange : AJAX 통신에 대한 응답 상태에 변경이 있을 경우 실행될 함수
- open() 메소드 호출
- POST 방식 데이터 전송 시 send() 호출 전에 MIME TYPE을 설정해야 한다
- 아래의 헤더를 추가하지 않으면 서버에서 전송한 파라미터를 인식하지 못한다.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") - send() 메소들 호출
- 서버(대상)에 데이터를 전송(요청)한다.
jQuery 방식 Ajax
jQuery에 내장되어 있는 Ajax 통신을 위한 기본 함수를 이용한다.
객체 리터럴 안에 속성과 값을 정해서 넘겨주면 된다.
▼ 속성 참고 사이트
https://api.jquery.com/jQuery.ajax/
jQuery.ajax() | jQuery API Documentation
Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available
api.jquery.com
장점
- 코드 길이 감소로 구현 방법이 JavaScript 방식에 비해 간단하다.
- 직관적이며 다양한 코딩이 가능하다.
- 크로스 브라우저 처리를 jQuery가 자동으로 해결한다.
GET 방식으로 서버에 데이터 전송 및 응답
<!-- 값을 입력한 뒤, 버튼을 누르면 다른 곳에 출력되게 만들기 -->
$(document).ready(() => {
$('#button').on("click", ()=>{
let input = $("#input").val();
// ajax로 비동기 통신에 필요한 설정값들을 객체 리터럴로 만들어서 서버에 넘겨준다.
$.ajax({
// 전송 방식 선택(get or post / 대소문자 상관없음)
type: "get",
// 데이터를 전송할 url 필수로 기재(문자열로 기재)
url: "abcd.do",
// 요청 시 전달할 파라미터 설정
data: {
// 속성명과 변수명이 동일하면 네이밍 규칙에 이ㅡ해 한 번만 작성해도 된다.
input: input
},
// AJAX 통신 성공 시 처리할 콜백 함수 지정
success: function(result){
// 매개변수는 서버에서 응답이 왔을 때 그 값이 저장되는 변수(변수명은 임의로 지정 가능)
$("#output").val(result);
},
// AJAX 통신 실패 시 처리할 콜백 함수 지정
error: function(error){
console.log("error", error);
},
// 통신의 성공 여부와 상관없이 실행되는 콜백 함수 지정
complete: function(){
console.log("complete")
}
});
});
});
POST 방식으로 서버에 데이터 전송 및 응답
<!-- 값을 입력한 뒤, 버튼을 누르면 다른 곳에 출력되게 만들기 -->
$(document).ready(() => {
$("#button").on("click", () => {
let input = $("#input").val();
$.ajax({
tyep: "post",
url: "abcd.do",
data: {
input
},
success: function(result){
$("#output").val(result);
},
error: function(error){
console.log(error)
}
});
});
});
2. JSON
JavaScript Object Notation(자바스크립트 객체 표현법)
{"key":value} 로 구성
key는 반드시 문자열을 사용한다.
value는 String, Number, Boolean, Array, Object, null 저장 가능 (단, char는 저장 불가능)
객체 {} 또는 배열 [] 데이터를 효율적으로 표시 가능하다.
Ojbect 타입의 데이터 전송 시, XML 대비 경량 데이터 교환 방식으로 용량이 작고 속도가 빠르다.
데이터를 표시하는 방법 중의 하나로 데이터 포맷이다.
간단한 포맷으로 이해하기 쉽다.
2-1. GSON
Google에서 만든 오픈 라이브러리로, JSON 파일을 쉽게 읽고 만들 수 있는 메소드 제공한다.
JAVA → JSON
JSON → JAVA Object
**toJosn(Object, Appendable)**
: 매개변수 Object를 JSON으로 변환하여, Appendable에 연결된 출력 스트림으로 출력하는 메소드
기존 JSON 방식으로 변환하기 어려운 List, Map 객체를 포함하여 별도의 방법이 아니라 toJson() 메소드로 쉽게 JSON으로 변환한다.
http://mvnrepository.com/search?q=gson
▲ Gson 라이브러리 다운받기
최신버전으로 다운받아보자.
Maven 프로젝트라면 설정값을 추가하면 되지만, 지금 상태에서는 jar 파일을 직접 다운 받아서 WEB-INF > lib 폴더에 라이브러리를 직접 추가했음