🧩 XML vs JSON

항목	XML	JSON
구조	태그 기반	키-값 기반
가독성	복잡함	간결함
용량	큼	작음
사용성	오래된 시스템에서 사용	현대 웹/앱에서 표준
예시	<name>Alex</name>	{ "name": "Alex" }

---

🔄 AJAX란?

AJAX (Asynchronous JavaScript And XML)

→ 페이지 새로고침 없이 서버와 데이터 주고받기 위한 기술

• 반드시 XML을 쓰는 건 아님 → 대부분 JSON 사용
• 핵심은 비동기 요청

✅ 중요: 데이터를 백그라운드에서 요청하고, 완료되면 JS로 처리

---

⚙️ AJAX 동작 과정

1. 브라우저에서 JS가 요청 전송 (GET, POST 등)
2. 서버가 요청을 처리하고 응답(JSON/XML)을 보냄
3. JS가 응답을 받아 화면을 동적으로 업데이트

---

🛠️ XMLHttpRequest 흐름

const req = new XMLHttpRequest();

req.onload = () => {
  // 응답이 왔을 때 처리
  const data = JSON.parse(req.responseText);
  console.log(data);
};

req.open("GET", "<https://example.com/data.json>", true); // true = 비동기
req.send();

---

🧭 XMLHttpRequest 주요 이벤트 속성

속성	설명
onload	요청 성공 시 실행
onerror	요청 실패 시 실행
onreadystatechange	상태 변화 감지 시 실행 (readyState와 status 함께 사용)
onprogress	다운로드 중 로딩 상태 확인
onabort	요청이 중단되었을 때 실행

req.onerror = () => {
  console.error("서버 요청 실패");
};

---

✨ +⍺ fetch / $.ajax 와 XMLHttpRequest 차이

항목	XMLHttpRequest	fetch()	$.ajax()
문법	복잡	간결	간결
지원	전 브라우저	IE 미지원	jQuery 필요
비동기 처리	콜백 기반	Promise 기반	콜백 기반
예외 처리	try-catch 불편	try-catch 가능	에러 콜백 분리
헤더 설정	수동	간편	옵션으로 처리

---

💾 Blob, 이미지 & createObjectURL

🤔 Blob이란?

• 바이너리 데이터를 다루기 위한 파일 객체
• 이미지, 영상, PDF 등 서버에서 받아올 때 사용

const url = URL.createObjectURL(blob); // 가상의 URL 생성
document.querySelector("img").src = url;

📷 이미지를 서버에서 받아오기

• 이미지 파일은 Blob으로!!
• URL.createObjectURL(blob)을 사용해 가상 주소(URL) 생성
• img.src에 이 URL을 넣어 표시

🎥 영상도 마찬가지!

video.src = URL.createObjectURL(videoBlob);

---

🔐 Same-Origin Policy & CORS

---

🌐 Same-Origin Policy (SOP)

• 브라우저 보안 정책
• 다른 출처의 리소스 접근 차단
• 출처(origin) = 프로토콜 + 호스트 + 포트
• JS에서 다른 origin의 쿠키, DOM, Ajax 요청 차단

📌 왜 필요하지?

사용자 정보 탈취, 세션 공격 방지 (예: 은행 로그인 상태에서 다른 사이트 접근 차단)

---

🔁 CORS (Cross-Origin Resource Sharing)

• SOP 때문에 막힌 요청을 서버가 허용하도록 만드는 방법
• 서버가 응답 헤더에 허용 출처 명시

Access-Control-Allow-Origin: <https://example.com>

📌 왜 필요하지?

신뢰된 요청만 허용해서 보안은 유지하면서, 데이터 공유는 가능하게 하기위해

---

🧠 정리

• AJAX는 서버와 데이터를 주고 받는 비동기 기술이다!
• XMLHttpRequest, fetch, $.ajax()는 모두 AJAX 방식이지만 문법과 스타일 차이다
• 이미지/영상은 서버에서 Blob 객체로 받고, 가상 URL을 만들어 표시하기
• SOP는 다른 오리진의 접근을 차단하는 브라우저의 보안 정책이다
• CORS는 SOP 에 의해 막힌 요청을 가능하게 해준다