Ajax에 대해서 알아보자

개요

Ajax에 대해서 알아보기 전에, Ajax는 특정 기술이 아닌 웹 페이지에서 웹서버에 접근하는 기술의 묶음(JS,XML등..)을 지칭하는 용어이다.

AJAX란 (Asynchronous JavaScript And XML) 그 이름에서도 알 수 있듯이 비동기 자바스크립트와 XML을 의미한다. [출처]

 

Motivatation & History

기존의 전통적인 웹 어플리케이션은 2가지 문제가 있었는데, 사용자가 새로운 요청을 서버에 보내면 웹 페이지 전체를 서버에서 보내주어, 이로 인해 페이지 단위로 업데이트를 할 수 밖에 없었다. 뿐만 아니라 페이지가 업데이트 되는 동안 브라우저가 먹통이 되는 Synchronous 문제가 있었다.

 

기존 웹 어플리케이션의 synchronous문제

 

사실 Ajax라는 용어가 등장하기 전에도 수 많은 개발자들이 이를 해결하기 위해서 비동기 통신 기법을 활용 하고 있었다. 그 중에 Hidden IFrame을 활용한 방식이 고전기법이였다고 한다. 하지만 직관적이지 못한 방식 때문에 XMLHttpRequest을 사용하는 Ajax로 대체되는데, 여기서, XMLHttpRequest API는 지금도 Ajax의 핵심으로 사용되고 있다. 이는 Microsoft에서 Outlook Web Access 2000를 개발을 위한 하나의 컨셉으로 시작되었다고 한다.

 

처음 XMLHttpRequest을 도입 했을때는 서로 다른 데이터 포맷으로 문제점이 존재했다. 하지만 XML이 데이터 포멧을 나타내는 하나의 표준으로 자리를 잡으면서, 이는 자연스럽게 해결되었다. 요즘은 XML보다 가벼운 용량과 JS의 인기로 JSON를 더 많이 사용한다고 한다.

 

 

Ajax는 어디에서 사용될까?

Ajax를 급부상하게 만든 Google Earth 예시를 보면서 Ajax가 무엇을 해주는 녀석인지 알아보자.

지금 보고있는 지도 화면

 

우리가 지도를 볼 때, 위 시점에서 우측 하단의 지도가 궁금하다고 해보자. 그러면 마우스를 좌측상단으로 드래그를 할 것이다. 그러면 지도는 위 그림에서 아래 그림처럼 변한다. 여기서 필요한 정보는 숫자 10 - 16일 것이다. 여기서 Ajax를 사용하면 1-16번까지 전체 정보를 받아올 필요없이 10-16번까지의 정보만 받아오면 된다.

시점을 이동한 지도 화면

 

이외에도 검색엔진의 자동완성기능이 좋은 예시이다.

 

 

비동기 방식의 Ajax에 대한 시간 순서도

 

이처럼, Ajax 모델을 사용하면 전체 페이지를 새로 고칠 필요 없이 변경해야할 부분만 빠르게 업데이트할 수 있다. 이를 통해 Ajax는 웹 어플리케이션을 보다 빠르게 하고 사용자들에게 보다 나은 UX를 제공한다.

 

Ajax Process / request

그럼 Ajax가 어떻게 동작하는지 알아보자. 먼저 요청을 보내는 단계이다.

먼저, Java Script는 서버로 보낼 HTTP 요청들을 Object로 정의해야 한다. 그리고 XMLHttpRequest은 그러한 Object중 하나이다. 그리고 XMLHttpRequest는 클라이언트단에서 script를 이용하여 서버와 데이터를 주고받을 수 있는 API들을 제공해준다. [XMLHTTPRequest 인터페이스]

 

// 구버전을 위한 호환성 코드입니다. 더 이상 이렇게 작성하지 않아도 됩니다.
var httpRequest;
function getRequestObject(){
	if (window.XMLHttpRequest) { // 모질라, 사파리, IE7+ ...
	    httpRequest = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE 6 이하
	    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

 

위는 예전 코드이지만 브라우저별로 지원했던 Object가 달랐던 것을 보여주기 위해 들고왔다. 요즘은 XMLHttpRequest를 사용하면 된다.

 

function sendRequest(){
	let request = getRequestObject();
	request.onreadystatechange = function() { handleResponse(request) };
	request.open("GET", "http://www.example.org/some.file", true);
	request.send();
}

function sendRequest2(){
	//...
	request.open("GET","http://www.example.org/people?fname=Minje&lname=Cho",true); 
	request.send(); //GET 방식

	request.open("POST","http://www.example.org/people",true);
	request.send("fname=Minje&lname=Cho"); //POST 방식
}

1. 위부터 차례대로 설명하면, HTTP 요청들을 정의할 object를 생성해주고
2. 서버가 응답하면 처리할 이벤트 헨들러를 onreadystatechange 라는 property에 익명함수로 작성해주었다. onreadystaechange는 바로 아래에 나올 readyState 값이 변할때 동작하는 이벤트 핸들러이다. (이벤트 핸들러가 될 함수에는 따로 변수를 전달하지 않을 것이기 떄문에 익명함수를 사용)
   
   
3. open() 을 이용해서 서버와 연결 해준다. 주소와 HTTP method 마지막으로 request를 비동기로 보낼지 체크한다.

open() method
client . open(method, url [, async = true [, username = null [, password = null]]])

   

   4. 마지막으로 send() 를 통해 서버로 요청을 보내준다.

send() method
client . send([body = null])

 

위에 코드예시와 같이 POST에 해당하는 경우 body값을 sen 메서드에 파라미터로 보내줄 수 있다.

 

번외. setRequestHeader 를 활용하면, JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능하다.

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

 

Ajax Process / response

우리는 위에서 서버의 응답을 처리하기 위해 onreadystaechange 에 핸들러를 지정해 놓았다.

이 핸들러는 서버와 정상적으로 통신을 마쳤다면 응답데이터를 처리하고, 비정상적으로 마쳤다면 에러 처리를 해야할 것이다.

즉, 서버와의 통신 상태값이 필요하다. XMLHttpRequest는 총 5가지의 상태값을 readyState에 정의하고 있다.

 

XMLHttpRequest 상태값

상태값	상태	설명
0	UNSENT	request not initialized
1	OPENED	server connection established // open() setRequestHeader(), send() possible
2	HEADERS_RECIEVED	request received
3	LOADING	processing request
4	DONE	request finished and response is ready

 

결국 우리는 readyState값이 4이고 HTTP status 값이 200번대인 경우를 성공적으로 응답이 온 경우라고 볼 수 있다.

 

readyState와 status code 확인해보자.

if(httpRequest.readyState === XMLHttpRequest.DONE){   //XMLHttpRequest.DONE = 4
	// Everything is good, the response was revieved.
} else{
	// Not ready yet.
}

if(httpRequest.readyState === 200){
	// Perfect!
} else{
	// There was a problem with the request.
	// For example, the response may have 404
	// or 500 response code.
}

 

서버의 응답에 대한 상태 코드를 확인 했으면 서버로부터 받은 데이터를 처리해야 한다.

 

데이터를 처리하는 방식

1. httpRequest.responseText
   string 타입의 text로 응답을 받는다.
2. httpRequest.responseXML
   XMLDocument 객체로 응답을 받는다. JS Dom 함수들을 활용할 수 있다.

 

 

Reference

https://morphys.tistory.com/entry/Ajax-Ajax-기술-특징-역사-프레임워크 https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started