[JavaScript] XML, JSON

💖 XML, JSON

🔥 XML

: XML = Extensible Markup Language(확장 표시 언어)
: 데이터를 저장하고 전달할 목적으로 만들어졌으며 사용자 지정 태그를 사용한다.

예시

<?xml version="1.0" encoding="UTF-8"?>
<students>
  <student>
    <name>홍길동</name>
    <age>24</age>
    <address>서울시</address>
    <birth>2001/02/25</birth>
  </student>
  <student>
    <name>일지매</name>
    <age>26</age>
    <address>서울시</address>
    <birth>1998/05/01</birth>
  </student>
</students>

🔥 JSON

: JSON = JavaScript Object Notation(표기법)
: 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
: 현재는 xml보다 자주 쓰임

예시

[
	{	// object (key:value)
		"name":"홍길동",
		"age":24,
		"address":"서울시",
		"height":171.1
	},
	{
		"name":"성춘향",
		"age":16,
		"address":"남원시",
		"height":156.9
	},
	{
		"name":"일지매",
		"age":22,
		"address":"부산시",
		"height":182.3
	}
]

🔥 파싱(parsing)

: 웹페이지에서 원하는 데이터를 추출하여 가공하기 쉬운 상태로 바꾸는 것
: 파싱 역할을 하는 것 -> 파서(parser)

• XML : XML -> XML Document

// xml
let xmltext = '<books>' + 
				'<book>' +
					'<title>탈무드</title>' +
					'<author>man</author>' +
					'<year>2001</year>' +
				'</book>' +
				'<book>' +
					'<title>이솝이야기</title>' +
					'<author>woman</author>' +
					'<year>2004</year>' +
				'</book>' +
			   '</books>';

let xmlParsed = new DOMParser();
let xmlDoc = xmlParsed.parseFromString(xmltext, "text/xml");

• JSON : JSON -> Object

const obj = {
	"name":"홍길동",
	"age":24,
	"address":"서울시",
	"height":171.1
};

// 객체를 JSON 포맷의 문자열로 변환
// json -> string
let json = JSON.stringify(obj);	// 직렬화(serializing)

// JSON 포맷의 문자열로 객체로 변환
// string -> json(object)
let jsonParsed = JSON.parse(json);	// 역직렬화(serializing)

🔥 XMLHttpRequest

: 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다

프로토타입 프로퍼티
readyState : HTTP 요청의 현재 상태를 나타냄

• unset : 0
• opend : 1
• received : 2
• loading : 3
• done : 4

status: HTTP 요청의 응답 상태를 나타냄

• sucess : 200
• 접근금지 : 403
• 없음 : 400
• 구문에러, 문법 틀림 : 500

responseType : HTTP 응답 타입 ex ) document, json...
responseText : 서버가 전송한 HTTP 요청에 대한 응답 문자열
responseXML : 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 저장

이벤트 핸들러 프로퍼티

• onreadystatechange : readyState 프로퍼티 값이 변경된 경우

메서드

• open : HTTP 요청 초기화
• send : HTTP 요청 전송

HTTP 요청 전송

1. XMLHttpRequest.prototype.open 메서드로 HTTP 요청 초기화
2. 필요에 따라 특정 HTTP 요청의 헤더 값 설정
3. XMLHttpRequest.prototype.send 메서드로 HTTP 요청을 전송

예시

// XMLHttpRequest 객체의 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open('GET', '/users');

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정 : json
xhr.setRequestHeader('content-type', 'application/json');

// HTTP 요청 전송
xhr.send();

📌 XMLHttpRequest.prototype.open

xhr.open(method, url, async)

• method : HTTP 요청 메서드("GET", "POST", "PUT", "DELETE" 등 -> crud 구현)
• url : HTTP 요청을 전송할 URL
• async : 비동기 요청 여부. 기본값 true(비동기)

📌 XMLHttpRequest.prototype. send

• GET : 데이터를 url의 일부분인 쿼리 문자열로 서버에 전송
• POST : 데이터를 요청 몸체(payload)에 담아 전송

// payload가 객체인 경우 반드시 JSON.stringify 메서드 사용하여 직렬화한 다음 전달
xhr.send(JSON.stringify({id:1, content: 'HTML', completed: false}));

// GET
xhr.send();

🔥 HTTP 응답 처리

: 서버가 전송한 응답을 처리하려면 XMLHttpRequest 객체가 발생시키는 이벤트를 캐치해야 한다.
: HTTP 요청의 현재 상태를 나타내는 readyState 프로퍼티 값이 변경된 경우 발생하는 readystatechange 이벤트를 캐치하여 다음과 같이 처리할 수 있다.

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
// https://jsonplaceholder.typicode.com은 Fake REST API를 제공하는 서비스
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');

// HTTP 요청 전송 -> 서버는 응답을 반환
xhr.send();

// readystatechange 이벤트는 HTTP 요청의 현재 상태를 나타내는 readyState 프로퍼티가
// 변경될 때마다 발생
xhr.onreadystatechange = () => {
	// readyState 프로퍼티는 HTTP 요청의 현재 상태를 나타낸다.
  	// readyState 프로퍼티 값이 4(XMLHttpRequest.DONE)가 아니면 서버 응답이 완료되지 않은 상태다.
  	// 만약 서버 응답이 아직 완료되지 않았다면 아무런 처리를 하지 않는다.
	if(xhr.readyState !== XMLHttpRequest.DONE) return;
  
 	// 정상 처리와 에러 처리를 구분
	if(xhr.status === 200) { // 200 : 정상적으로 응답한 상태
		console.log(JSON.parse(xhr.response));
	} else {
		console.log('Error', xhr.status, xhr.statusText);
	}
};