Ajax ( Asynchronous JavaScript and XML)

Ajax를 이용해 서버로부터 데이터를 얻어오면 브라우저의 새로고침없이 화면을 다른데이터로 로드할수 있습니다.

즉, Ajax는 자바스크립트를 이용해 비동기 통신으로 서버와 브라우저가 데이터를 교환할 수 있는 방식을 의미합니다.

Ajax 기술은 왜 나왔을까?

(상) 기존 웹 애플리케이션 라이프사이클 (하) Ajax 라이프사이클 (이미지 출처 - http://thephantomprogrammer.blogspot.com/2016/08/web-fundamentals.html)

기존의 웹 애플리케이션은 서버에 요청을 하면 이에 대한 응답으로 HTML,CSS,Javascript 와 같은 파일들도 동시에 반환을 하여 이미 존재하는 동적인 코드들도 다시 랜더링하여 화면에 출력해야하므로 비효율적입니다. 반면, Ajax는 서버에 요청시 응답으로 필요한 데이터만 JSON 형태로 반환하여 페이지 전체로드가 아닌 일부분만 로드하면 되므로 빠른 화면 전환을 기대할수 있습니다.

기존의 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 서버로 제출하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공해 새로운 웹페이지를 작성하고 응답으로 되돌려줍니다. 이때, HTML 코드를 다시 한번 전송받아 많은 대역폭을 낭비하게 되고 대역폭의 낭비는 금전적 손실을 야기할 수 있으며 사용자와 대화하는 서비스를 만들기도 어렵게 합니다.

반면에 Ajax 애플리케이션은 필요한 데이터만을 웹 서버에 요청해 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있습니다. 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 씁니다. 웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아집니다. 또한 웹 서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 됩니다.
(출처 - https://ko.wikipedia.org/wiki/Ajax)

Ajax와 비동기

function ajax() {
	//XMLHttpRequest 객체의 생성
	var oReq = new XMLHttpRequest();
    
    oReq.addEventListener("load", function() {
    	console.log(this.responseTest);
    });
    //비동기방식으로 request 오픈
    oReq.open("GET", "http://www.example.org/example.txt");
    
    //request 전송
    oReq.send();
}

addEventListener는 익명함수로 open과 send 함수보다 늦게 실행됩니다.

addEventListener함수는 비동기로 실행되며, 이벤트 큐에 보관되다가 서버에서 넘어온 데이터를 브라우저가 받으면 load 이벤트가 발생하는데 이때 call stack에 실행되고 있는 함수가 없어서 비어있다면 stack에 올라와 실행됩니다.

jQuery로 구현한 Ajax 예제

$.get("http://www.example.org/example.txt").done( function(data) {
	console.log(data); // 반환된 텍스트
}).fail( function/(data) {
	console.log("error"+ data); // 요청 도중 에러 발생
});

JSON(JavasSript Object Notation)

JSON은 클라이언트와 서버간의 데이터 교환을 위한 규칙을가진 데이터 포멧입니다.

※ JSON을 사용하는 이유?

일반 텍스트보다 데이터 구조화가 가능해 컴퓨터와 사람 모두에게 가독성이 있고, xml 문서보다 가볍고 사용하기 편해 JSON을 주로 사용합니다.

{
  "title": "알고리즘 문제 해결 전략1",
  "author": "구종만",
  "publisher": "인사이트"
}

Ajax 응답처리

서버에서 받아온 JSON 데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수 없으므로 JSON 문자열을 자바스크립트 객체로 변환해야 데이터에 접근할 수 있습니다.

JSON.parse 메소드는 JSON 객체를 문자열 객체로 변환합니다.

function ajax() {
   var oReq = new XMLHttpRequest();
	
  oReq.addEventListener("load", function() {
  	var data = JSON.parse(oReq.responseText); //JSON 문자열을 객체로 변환
  });
	
   oReq.open("GET", "http://www.example.org/example.txt");
   oReq.send();
}

cross domain 문제

XHR 통신은 다른 도메인 간에는 보안을 이유로 요청이 안 됩니다.

A 도메인에서 B 도메인으로 XHR 통신, Ajax 통신을 할 수 없습니다.

이를 해결하기 위해 JSONP라는 방식이 사용되고 있고 최근에는 CORS라는 표준적인 방법이 제공되고 있습니다.

출처

1. https://poiemaweb.com/js-ajax

2.http://thephantomprogrammer.blogspot.com/2016/08/web-fundamentals.html

3.https://www.edwith.org/boostcourse-web/lecture/16756/

기록

Ajax