01 ajax

1. AJAX

1. AJAX

• Asynchronous JavaScript and XML의 약자
• 웹 페이지에서 서버와 비동기적으로 데이터를 주고받는 기술
• 페이지를 새로고침하지 않고 서버에서 데이터를 받아오거나 서버로 데이터를 보낼 수 있게 해주는 방법

2. 주요 특징

• 비동기 처리 (Asynchronous)
  • 서버 요청 후 바로 결과를 기다리지 않고, 다른 작업을 계속할 수 있어.
  • 예를 들어, 사용자가 페이지를 스크롤하거나 버튼을 클릭하는 동작은 서버 응답을 기다리지 않고 그대로 수행됨.
• 서버와 데이터 통신
  • 서버에 요청(request)을 보내고 응답(response)을 받아서 화면을 업데이트할 수 있어.
  • 전통적인 방식은 페이지 전체를 새로고침해야 하지만, AJAX는 필요한 부분만 갱신 가능.
• 다양한 데이터 포맷 지원
  • 이름에 XML이 들어가지만, 요즘은 JSON이 가장 흔히 쓰임.
  • 텍스트, HTML, JSON 등 여러 포맷을 주고받을 수 있음.
• JavaScript 기반
  • AJAX는 브라우저의 JavaScript와 XMLHttpRequest 객체 혹은 최신 fetch() API를 이용해서 구현됨.
• UI/UX 향상
  • 페이지 전체를 새로고침하지 않아 사용자 경험이 부드러워짐.
  • 실시간 검색, 댓글, 채팅, 데이터 필터링 등에서 많이 사용됨.

3. 기타 옵션

1. traditional 옵션

  $.ajax({
      url: '/api/test',
      type: 'GET', //get방식기준으로 url파라미터로, post는 바디값
      data: data,
      traditional: true
  });

2. true (전통 방식) / False

• True : ids=1&ids=2&ids=3 패턴으로 전송되어 @RequestParam List ids등으로 받음.
• false : ids[]=1&ids[]=2&ids[]=3 패턴으로 전송되어 일부 서버에서는 ids[] 형태를 매핑하지 못할 수 있음

2. JSON

1. JSON

• JSON은 데이터의 “표현 형식” 또는 “송수신 포맷”
• 서버와 클라이언트가 데이터를 주고받는 약속된 문자열 구조
• JSON 자체는 언어나 로직이 아니라 단순한 텍스트 규격이고, 서버에서는 Map, DTO, List 등으로 변환해서 사용하고, 클라이언트에서도 JS 객체나 배열로 변환해서 사용함

2. JSON 예시

  //송수신 방식으로 내용이 어떻게 구성되는지는 크게 중요하지 않음!
  {
    "userId": "user01",
    "userName": "홍길동",
    "roles": ["ADMIN", "USER"],
    "preferences": { "theme": "dark", "language": "ko" },
    "friends": [
      {"userId": "user02", "userName": "김철수"},
      {"userId": "user03", "userName": "이영희"}
    ]
  }

3. ES6 MAP

1. ES6 MAP

• JavaScript ES6에서 추가된 자료구조
• Key-Value 쌍으로 데이터를 저장
• 객체({})와 비슷하지만, 다른구조

2. 특징

특징	설명
Key 유형 제한 없음	객체는 문자열과 심볼만 키로 가능하지만, Map은 모든 타입(객체, 함수, 숫자 등) 가능
삽입 순서 유지	Map은 아이템이 들어온 순서를 기억
크기 확인 가능	map.size로 요소 개수 확인 가능
반복 가능	map.keys(), map.values(), map.entries()로 반복 가능
성능	많은 데이터를 추가/삭제할 때 객체보다 성능이 좋을 수 있음

3. 사용법

  // Map 생성
  const map = new Map();
  
  // 값 추가
  map.set('name', '홍길동');
  map.set(123, '숫자 키');
  map.set(true, '불린 키');
  
  // 값 조회
  console.log(map.get('name')); // 홍길동
  console.log(map.get(123));    // 숫자 키
  
  // 값 존재 확인
  console.log(map.has('name')); // true
  
  // 값 삭제
  map.delete(123);
  
  // 전체 반복
  for (let [key, value] of map) {
      console.log(key, value);
  }
  
  // 크기 확인
  console.log(map.size);

4. ES6 MAP & Spring MVC

   const map = new Map();
    
   JSON.stringify(map)   // Map은 일반 객체가 아니므로 스프링에서 내용이 안 나옴
   
   // JSON 문자열로 변환하여 사용해야함.
   const obj = Object.fromEntries(map);
   JSON.stringify(obj); 

4. AJAX - Jquery

1. 사용방법

  $.ajax({
    url: '/api/data',     // 요청할 서버 주소
    type: 'GET',          // 요청 방식 'POST', ~
    contentType: application/x-www-form-urlencoded), // 전송타입
    dataType: 'json',     // 서버에서 받을 데이터 타입
    success: function(response) {
      console.log('응답 데이터:', response);
      // 여기서 화면 갱신 등 처리
    },
    error: function(xhr, status, error) {
      console.error('오류 발생:', error);
    }
  });

2. JSON 형태 송수신

1. JS

  // 전송할 데이터 객체 - 단일 객체
  var data = {
      userId: 'user01',
      userName: '홍길동',
      age: 25
  };
  
  // 전송할 데이터 객체 - 맵에서 리스트로 변경
  const mapData = new Map();
  mapData.set("SCRN001", "READ");
  mapData.set("SCRN002", "WRITE");
  mapData.set("SCRN003", "NONE");

  const data2 = Array.from(mapData, ([key, value]) => ({
    userNo: userNo,     // 별도 외부값
    key: key-List,     // 맵에서 받은값
    value: value-List  // 맵에서 받은값
  }));
  
  // jQuery AJAX 호출
  $.ajax({
      url: '/api/user',              // 스프링 컨트롤러 매핑 주소
      type: 'POST',                  // POST 방식
      contentType: 'application/json', // 서버에 JSON 형식으로 보낼 것임
      data: JSON.stringify(data),    // 객체를 JSON 문자열로 변환, data2도 동일 패턴
      dataType: 'json',              // 서버에서 받을 데이터 타입
      success: function(response) {
          console.log('응답 데이터:', response);
      },
      error: function(xhr, status, error) {
          console.error('오류 발생:', error);
      }
  });

2. Spring

  @RestController
  @RequestMapping("/api")
  public class UserController {
  
      @PostMapping("/user")
      public Map<String, Object> saveUser(@RequestBody UserDTO user) {
          System.out.println(user); // {userId=user01, userName=홍길동, age=25}
          Map<String, Object> result = new HashMap<>();
          result.put("status", "success");
          return result;
      }
  }

3. JSON내에 MAP + LIST

  var data = {
      userId: 'user01',
      userName: '홍길동',
      age: 25,
      roles: ['ADMIN', 'USER'],              // 리스트 전송
      preferences: { theme: 'dark', lang: 'ko' } // 맵 전송
  };
  
  $.ajax({
      url: '/api/user',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(data),
      dataType: 'json',
      success: function(response) {
          console.log('응답:', response);
      },
      error: function(xhr, status, error) {
          console.error('오류:', error);
      }
  });