[Ajax] Ajax 속성 정리

프로젝트 중 Ajax가 필요하여 유튜브 기술노트with알렉 채널의 ajax 강좌와 생활코딩 채널의 Ajax 강좌를 참고하여 기본 개념과 문법을 정리해봤다. 이렇게 지식을 나눠주시는 이들의 공헌에 언제나 큰 감사를 드린다.

---

0. Ajax 란? + Ajax를 사용하는 이유

• Ajax 란?

Asynchronous Javascript And XML의 약자
Asynchronous : "비동기" → 응답할 때까지 wait하지 않고 통신만 성공하면 일단 띄운다. 굉장하 빠름.
Javascript : JS 상에서 동작한다.
XML : XML 형식으로 데이터를 주고받는다.

→ 즉 JS기반 프로그래밍 시, XML 형식의 데이터를 주고 받는데 비동기적으로 처리하는 프로그래밍 기법을 말한다.

• Ajax 왜 씀?

web 페이지를 접속한다는 것은, 웹 서버에서 HTML, javascript, img 소스 등...의 소스가 내려와서 browser가 그 소스를 해석하여 화면에 띄우는 것을 의미한다.

이 과정에서 페이지를 읽어올 때 마다 전체 페이지가 Refresh 되게 된다. 이렇게 전체 페이지를 Refresh 하게 되면 서버 리소스가 낭비되기도 할 뿐더러, 유저 입장에서도 집중이 분산되는 등 아무튼 여러모로 불편하다.

그래서 이렇게 전체 페이지를 Refresh 하지 않고 페이지의 일부분만 데이터를 바꾸고 싶다면, 즉 refresh 없이 다른 서버와 통신하여 데이터를 가져와서 띄우고 싶었다. 그리고 이 기능을 하는데 Ajax인 것이다.

1. fetch API

<article>  </article>

<input type = "button" onclick = "
	fetch('css').then(function(response) {
    	response.text().then(function(text) {
        	document.querySelector('article').innerHTML = text;
        })
    });
">

• fetch('css') : 'css'라는 파일을 다운로드하여 응답값을 넘겨줘
• .then( function() { ~ } ) : 서버가 응답할 때까지 기다리는데, 기다리는 동안 다른 거 먼저 하고있을게. 응답오면 function 실행해놔라.
• then(function( )) 속에 response : 위의 fetch에서 받은 응답값 (header + body)
• response.text() : 앞에 오는 요청/응답 객체의 body값을 string 형식으로 반환
• .then(function( )) 속에 response : 위의 text()에서 받은 string 형식의 body값
• document.querySelector('article') : HTML 문서에서 'article' 태그를 찾아 선택하여
• innerHTML : 태그 안에 내용을 get 또는 set할 수 있는 명령어

2. Ajax 프로그래밍 시 유의할 점

Ajax, 즉 fetch를 이용하면 검색 엔진에 검색이 안된다. 이를 포함하여 Ajax의 여러 단점을 보완한 것이 Pjax이다.

3. fetch polyfill

fetch API를 지원하지 않는 웹 브라우저나 버전에서도 브라우저 자체 기능으로fetch의 기능을 사용할 수 있도록 한 것이 polyfill이다. 사용 방법은 fetch polyfill github에서 소스를 clone 해온 후, fetch/fetch.js 파일을 HTML에 연결해주면 된다.

---