Javascript : Ajax

🧸 HTTP 통신이란?

 HTML 문서를 주고 받는 프로토콜

 HTML(Hyper Text Markup Language)

 HTTP(Hyper Text Transfer Protocol) : HTML 문서를 주고 받을 때 쓰는 문서, HTML 문서를 주고 받는 프로토콜이다.

 프로토콜이란? 일종의 통신 규약 

 

🧸 Ajax란?

 Asynchronous Javascript And XML (요즘은 XML 보다는 JSON 이 더 자주 이용된다)

비동기적인 웹 애플리케이션의 제작을 위해 사용되는 웹 개발 기법이다. 

HTTP 통신에서 페이지 새로고침 없이 간단한 네트워크 호출로 바로 일종의 XML이나 JSON 형태의 통신을 할 수 있는 비동기 통신

 

🧸 XMLHttpRequest

XMLHttpRequest 객체는 서버와 상호작용하기 위해서 사용된다.

전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 

 

🧸 Fetch

Fetch API는 네트워크 동신을 포함한 리소스 취득을 위한 인터페이스가 정의되어있다.

XMLHttpRequest 보다 좀 더 강력하고 유연한 조작이 가능하다.

 

fetch('https://jsonplaceholder.typicode.com/posts/1')
	.then((reponse) => reponse.json())
  	.then((json) => console.log(json));

첫번째는 URL fetch를 요청한거고

두번째는 Fetch 응답 객체를 받아왔다.

응답 객체가 JSON으로 되어있기 때문에 => 순수 JS 객체로 변환 해줘야한다. 

 

네트워크 통신 -> 네트워크 통신해서 가져온 데이터 -> JSON으로 변경 -> 이걸 다시 JS 객체로 변환

 

🧸 JSON

JavaScript Object Notation은 속성-값 쌍 또는 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다.

JSON Parse : JSON -> JS Object로 변환할 때  (서버에서 데이터를 가져올때)

JSON stringify : JS Object -> JSON 로 변환할때  (서버로 데이터를 보낼때)