📝 데이터 통신 방법

💡 동기식 데이터 통신

클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기함

💡 비동기식 데이터 통신

클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행 가능함
-> 추후 요청에 대한 응답이 오면 응답에 관련된 작업을 진행

---

📝 Ajax

(Asynchronous JavaScript and XML)

• JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고 받는(통신) 방식
• 데이터 형식은 XML뿐만 아닌 Text, HTML, JSON, CSV 등 다양한 형식 사용 가능

📌 특징

• 전체 페이지를 갱신하지 않고 일부분만 업데이트 가능
• 사용자에게 즉각적인 반응과 풍부한 UI 경험을 제공 가능
• ActiveX나 플러그인 프로그램 설치 없이 이용 가능
• JavaScript 방식, jQuery 방식으로 구현 가능

📌 단점

• Ajax는 JavaScript이므로 브라우저에 따른 크로스 브라우저 처리가 필요함
• 오픈 소스로 차별화가 어려움
• 연속적인 데이터 요청 시 서버 부하 증가하여 페이지가 느려짐
• 페이지 내 복잡도가 증가하여 에러 발생 시 디버깅이 어려움

---

💡 JavaScript방식 Ajax

Ajax는 브라우저 내장 객체인 XMLHttpRequest를 이용하여 비동기식으로 데이터를 송수신함
(IE 브라우저는 ActiveXObject 객체 사용)

1. 객체 생성 -> script문에 요청을 위한 XMLHttpRequest 객체 생성

2. 서버 응답 처리 함수 생성 및 지정 -> onreadystatechange에 함수 지정

   • 지정되는 함수에 포함될 내용
     1) 응답 상태 확인 -> readyState(서버 응답 상태 확인), status(Http 응답 상태 코드 확인)
     2) 응답 완료(서버 응답 데이터 접근) -> responseText / responseXML

3. 요청 방식, 대상(서버), 동기/비동기 지정 -> open() 메소드 호출

4. 대상(서버)에 전송 -> send() 메소드 호출
   
   

💡 jQuery방식 Ajax

• JavaScript 방식보다 구현 방법이 간단함 -> 코드 길이 감소
• 직관적이며 다양한 방법의 코딩이 가능함
• 크로스 브라우저 처리를 jQuery가 자동으로 해결해 줌
  -> JavaScript방식 XMLHttpRequest 객체 생성 시 브라우저 검사 생략 가능

🔎 구현 방법

$.ajax({ 
	url : “요청이 전송되는 url이 포함된 문자열” // 필수 구현 속성
  
	[,settings] // 선택 속성(다수 속성 선택 가능)
});

🔎 주요 속성

속성명	설명
url	요청(request) 데이터를 전송할 URL
data	서버로 전송할 요청 Parameter 설정
type	Http 요청 방식 지정 (GET / POST)
datatype	서버의 응답(response)데이터의 형식(xml,text,json,html 등)을 지정 미작성 시 자동으로 판단하여 지정
success(data)	ajax 통신 성공 시 호출되는 함수를 지정 매개변수로 응답 데이터를 받음(data)
error	ajax 통신 실패 시 호출되는 함수를 지정
complete	ajax통신 성공여부와 관계없이 통신 완료 후 실행되는 함수 지정
async	비동기(true) / 동기(false) 지정

---

📝 JSON

JavaScript Object Notation (자바스크립트 객체 표현법)
Javascript 객체를 {k, v} 형태로 나타내는 언어

• 간단한 포맷
  - 괄호 {} 내에 key : value 쌍으로 구성 -> { “key” : value }
  - key : 반드시 문자열 사용 (쌍 따옴표(“”) 표기 필수)
  - value : String, Number, Boolean, Array, Object, null 데이터 저장 가능
  (단, char 데이터는 저장 불가)
  
  

• 객체{} 또는 배열[] 데이터를 효율적으로 표시 가능

• JSON.parse(문자열)
  문자열 -> JS 객체로 변환

---

📝 GSON

Google JSON
Google에서 만든 오픈 라이브러리로 JSON파일을 쉽게 읽고, 만들 수 있는 메소드 제공

toJSON(Object, Appendable)

• 매개변수 Object를 JSON으로 변환하여 Appendable에 연결된 출력스트림으로
  출력하는 메소드

• 기존 JSON방식으로 변환하기 번거로웠던 List, Map 객체를
  별도의 방법이 아닌 toJson()메소드 하나도 쉽게 JSON으로 변환 가능

• List, Map 뿐만 아닌 모든 Object 변환 가능