728x90
반응형
Ajax : 웹 비동기 통신 !
= 전체 페이지가 아닌, "필요한 데이터"만 전송받는다!
장점
1) 속도가 빠르다
2) 사용자는 페이지 변경 없이 필요한 데이터만 응답받으므로, 응답 여부와 무관하게 작업 지속 가능
기술
- XML : 1) 설정 정보 2) 데이터 전송 역할
- JSON : JavaScript Object Notation - 구조화된 데이터 응답을 위한 기술 더 많이 씀 !
JSON (JavaScript Object Notation)
- JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
- Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
- JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
- JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
JSON 특징
- 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다.
- 자바스크립트 객체 표기법과 아주 유사하다.
- 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다.
- JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다.
- 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다.
- 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있다.
- 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.
JSON 문법
{ "employees": [ { "name": "Surim", "lastName": "Son" }, { "name": "Someone", "lastName": "Huh" }, { "name": "Someone else", "lastName": "Kim" } ] }
- JSON 형식은 자바스크립트 객체와 마찬가지로 key / value가 존재할 수 있으며 key값이나 문자열은 항상 쌍따옴표를 이용하여 표기해야한다.
- 객체, 배열 등의 표기를 사용할 수 있다.
- 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수도 있다.
- JSON형식에서는 null, number, string, array, object, boolean을 사용할 수 있다.
JSON 형식
1. name-value형식의 쌍
- 여러가지 언어들에서 object등으로 실현되었다.
- { String key : String value }
{ "firstName": "Kwon", "lastName": "YoungJae", "email": "kyoje11@gmail.com" }
2. 값들의 순서화된 리스트 형식
- 여러가지 언어들에서 배열(Array) 등으로 실현되었다.
- [value1, value2, ...]
{ "firstName": "Kwon", "lastName": "YoungJae", "email": "kyoje11@gmail.com", "hobby": ["puzzles","swimming"] }
[ 활용 코드 ]
1. JSON object
/TestJSONObject.java
package test.json;
import org.json.JSONObject;
import model.CarDTO;
public class TestJSONObject {
public static void main(String[] args) {
JSONObject json1 = new JSONObject();
json1.put("model", "소나타");
json1.put("price", "200");
System.out.println(json1.toString());
//DTO 혹은 VO 계열의 객체를 JSONObject로 변환
// -> JSONObject의 생성자를 이용하면 된다
CarDTO car = new CarDTO("K5", 500);
JSONObject json2 = new JSONObject(car);
System.out.println(json2.toString());
/* 출력값
* {"price":"200","model":"소나타"}
* {"pirce":500,"model":"K5"}
*/
}
}
2.JSON array
/TestJSONArray.java
package test.json;
import java.util.ArrayList;
import org.json.JSONArray;
public class TestJSONArray {
public static void main(String[] args) {
ArrayList<String> list = new ArrayList<String>();
list.add("초코빵");
list.add("딸기빵");
list.add("바나나빵");
//list 객체를 JSONArray로 변경하기 위해 생성자를 이용한다
JSONArray ja = new JSONArray(list);
System.out.println(ja.toString());
/* 출력값
* ["초코빵","딸기빵","바나나빵"]
*/
}
}
728x90
반응형
'Java Web Programming > 5. JavaScript | Ajax | jQuery (JSON)' 카테고리의 다른 글
[Ajax/JSON] JSON을 이용한 Ajax 통신 2 (JSON Array + JSON Object) (0) | 2020.10.06 |
---|---|
[Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array) (2) | 2020.10.06 |
[JSP/Ajax] Ajax 방식으로 정보 검색 - get / post 방식 (응답 대기중) (0) | 2020.10.05 |
[JSP/Ajax] 동기적 방식과 비동기적 방식(ajax) (0) | 2020.10.05 |
[JSP/Ajax] Ajax basic 기본 개념과 문법 (+ xml, json 설명) (2) | 2020.10.05 |