HTTP 통신

HTTP(Hyper Text Transfer protocol)
브라우저와 서버가 통신할 수 있도록 만들어주는 여러 프로토콜 가운데 한 종류로 웹 브라우저와 웹 서버 사이에 HTML(웹 문서를 만들기 위한 언어) 문서를 주고받는데 쓰이는 통신 규약이다.

원래는 HTML 문서를 주고 받기 위함이었지만 지금은 이미지나 json파일 등도 주고 받는다.

---

Ajax

Asynchronous JavaScript and XML의 약자로
빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분을 갱신할 수 있다.
즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분만 표시할 수 있다.

👀 페이지 전체를 로딩하지 않고도 검색어와 비슷한 검색어를 실시간으로 보여준다.

✅ 구성 요소

• 웹 페이지의 표현을 위한 HTML과 CSS

• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델

• 데이터의 교환을 위한 JSON이나 XML

• 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체

• 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트

✅ 동작 원리

Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신하기 때문에 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신할 수 있다.

1. 사용자 요청으로 이벤트가 발생한다.

2. 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출되고

3. 자바스크립트는 XMLHttpRequest 객체 생성 -> 서버로 요청을 낸다

( 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업 처리 가능)

4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리하고

5. 그 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다.

( 이때 전달되는 응답은 새로운 페이지 전부 X, 필요한 데이터만 O )

7. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출하면

8. 웹 페이지의 일부분만이 다시 로딩되어 표시된다.

---

XMLHttpRequest 객체

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
	if(xhr.readyState === xhr.DONE){
    	if( xhr.status === 200){
        	console.log(xhr.response);
        }else{
        	console.error('error');
        }
    }
}

xhr.open('GET','https://jsonplaceholder.typicode.com/todos/1');
xhr.send(); 

// 결과
VM597:6 {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

위처럼 XMLHttpRequest 객체를 이용해서 json 형식의 정보를 불러 올 수 있다.

---

Fetch API

XMLHttpRequest의 단점을 보완해서 나온 api로 훨씬 간단하게 작성해서 사용할 수 있다.

fetch('http://example.com/movies.json') // 1. URL fetch 요청
  .then((response) => response.json()) // 2. Fetch 응답 객체를 받아옴
  .then((data) => console.log(data)); // 3. 응답 객체가 JSON => 순수 JS 객체로 변환

네트워크 통신을 하고 json 형식으로 데이터를 받아오면 javascript 객체로 바꿔서 다루는 과정을 코드로 작성한 것이다.

---

JSON

Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷이다.
JSON은 문자열 형태로 존재하며 네트워크를 통해 전송할 때 유용하다.

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

JOSN은 Javascript 객체 리터럴 문법을 따르는 문자열이다.

데이터에 억세스하기 위해서는 네이티브 JSON 객체로 변환될 필요가 있어서 Javascript가 JSON 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원한다.

# JSON.stringify( )

자바스크립트 객체를 JOSN 문자열로 변환하는 메서드로
서버로 데이터를 보낼 때 시용한다.

const obj = {x : 5, y: 6};

const jsonObj = JSON.stringify(obj);

console.log(jsonObj); // {"x":5,"y":6}

# JSON.parse( )

JSON 문자열을 다시 javascript 객체로 반환하는 메서드로
서버에서 데이터를 가져올 때 사용한다

const obj = {x : 5, y: 6};

const jsonObj = JSON.stringify(obj);

const jsonParse = JSON.parse(jsonObj);

console.log(jsonParse); // { x: 5, y: 6 }

정리: 우리는 HTTP 통신을 활용하고 ajax로 통신을 하는데
사용할 수 있는 API는 XMLHttpRequest, fetch API 가 있고
주고 받는 데이터는 XML이 아니라 JSON 형식이며 자바스크립트 객체로 바꾸어 다룬다.