Ajax를 알기 전에 HTTP 통신에 대해 알아보자.

✅ HTTP 통신이란?

• Hyper Text Transfer Protocol
• HTML, 데이터(동영상, 음성, 파일) 등을 주고 받기 위한 규약이다.

웹 동작 원리

✅ Ajax란?

• Asynchronous Javascript and XML의 약자
• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다.
• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

이를 한줄로 쉽게 요약하자면, 전체 새로고침이 아닌 일부만 로드하는 방법이다. 이는 비동기 처리이다.

❓Ajax 동작원리

1. 사용자에 의한 이벤트가 발생
2. javascript ajax 호출
3. 서버의 웹 서버로 요청 처리(XMLHttpRequest)
4. 데이터베이스에서 데이터 조회
5. 요청 결과 응답 생성
6. javascript Ajax를 통해 데이터 응답을 받음
7. 웹 페이지 일부만 다시 로드

❓ Ajax를 사용하는 이유는?

1) 전체 로딩이 아닌 일부만 로딩

• 자원 낭비를 X, 시간 낭비를 X

좀 더 깊게 들어가면 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 Request를 하고 Response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간 낭비를 초래한다.

따라서, AJAX는 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 Request한다. 이 경우, JSON 이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

2) 일부만 로딩하기 때문에 속도 향상

• 한줄한줄 실행될 때 까지 기다리는게 아니기 때문에 속도가 향상된다.

3) 코딩 양이 줄어든다.

4) 다양한 UI 구현이 가능하다.

❓ Ajax 장/단점

1) Ajax의 장점

• 웹페이지의 속도 향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다.

2) Ajax의 단점

• 히스토리가 관리가 되지 않는다.
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다.
• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• 지원하는 Charset이 한정되어 있다.
• Script로 작성되므로 디버깅이 용이하지 않는다.
• 동일-출저 정책으로 인하여 다른 도메인과는 통신이 불가능하다.

❓ XMLHttpRequest란?

• Ajax의 핵심
• 서버와 데이터 주고 받을 때 사용한다.
• W3C 표준으로 정의(주요 웹브라우저에 내장)

IE5, IE6와 같은 옛 버전에서는 XMLHttpRequest가 아닌 ActiveXObject를 사용한다.

XMLHttpRequest 사용방법

1) IE7이상, Chrome, Mozila Firefox, Safari, Opera

• var 변수명 = new XMLHTTPRequest();

2) IE5, IE6

• var 변수명 = new ActiveXObject("Microsoft.XMLHTTP")

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('GET', https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

이렇게 XMMLRequest객체를 이용하여 비동기 방식을 처리하는 것은 너무 길고 복잡한 경우가 많다. 따라서 Fetch를 사용하여 더 간편하게 사용할 수 있다. 아래 내용에서 Fetch에 대해 알아보자.

❓ Fetch

• Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다.
• XMLHttpRequest와 같은 비슷한 API가 존재하지만 새로운 Fetch API는 좀 더 강력하고 유연한 조작이 가능하다.
• XMLHttpRequest에서 부족한 부분을 상당부분을 보안했다.
• Promise 기반으로 구성
• 비동기 방식
• JS 기본 기능

fetch 사용 방법

fetch(url, option)
.then(res => res.text())
.then(text => console.log(text))

• url : 요청할 URL
• option
  • http 메서드, headers, body 정의
  • 생략 가능
  • default는 Get 방식이다.

Fetch 예제

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

1. url로 fetch 요청을한다.
2. fetch 응답 객체를 받아온다.
3. 이 응답 객체를 json형태로 되어 있기 때문에 이걸 순수 js 객체로 변환해준다.

Fetch 말고도 jQuery 라이브러리로 Ajax를 사용할 수 있다. 저같은 경우에는 작년까지만 해도 Ajax를 jQuery로 사용을 해서 이 방법이 제일 손에 익어있다.

jQuery를 사용하기 위해서는 cdn으로 jQuery를 추가하면 된다. jQuery 추가 방법은 이 글에서 다루지 않겠다.

$.ajax({
		type: "POST",
		url: url,
		data : data,
		success: function(result)
		{
			//성공시 실행할 코드
		}
});

어떻게 사용했냐면
type: Request Type (GET or POST)
url : url주소
data : 보낼 데이터
success : 성공했을 때 실행할 코드

이렇게 사용을 했다

❓ JSON

• Javascript Object Notation
• 자바스크립트 객체 문법(객체 리터럴) 이다.
• 구조화된 데이터 표현을 위한 표준 형식이다.
• 데이터 전송 시 사용한다.
• 문자열 형태이고, 따옴표를 표시 한다.

우리는 개발을 할 때 어떠한 프로그램을 연계하여 개발을 할 때가 있는데 A프로그램과 B프로그램이 있다고 하면 데이터를 보내거나 받아야하는 상황이 있다. 이때 데이터를 보낼 때 JSON 형태로 보낸다. 받을 때도 형태로 받는다.

네트워크를 통해 전송할 때 아주 유용하다.

JSON 형식

• 다양한 데이터 형식 가능하지만 따옴표를 사용해야한다.

1) JSON.parse(변환할 데이터)

• JSON 객체 → 자바스크립트 객체

2) JSON.stringfy(변환할 데이터)

• 자바스크립트 객체 → JSON 객체

const jsonData = {
	"name", "홍길원",
  	"age", 30,
  	"city", "seoul"
}

const jsonStringify = JSON.stringify(jsonData)
console.log(jsonStringfy)

console.log(JSON.parse(jsonStringfy))

이렇게 JSON.stringify로 JSON객체로 변환한 값과 type을 보면 string 인 것을 확인할 수 있고,

JSON객체를 자바스크립트 객체로 변환한 것을 확인할 수 있다.