AJAX에 대하여

정의

• Asynchronous Javascript And Xml의 약자

• Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법중 하나

• 자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
  즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것

  종류는 GET, POST, PUT, DELETE가 있다.

AJAX의 장단점

1. AJAX의 장점

• 웹페이지의 속도향상
• 웹 페이지 전체를 다시 로딩하지 않고도 일부분만을 갱신할 수 있음
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 감소
• 기존 웹에서는 불가능했던 다양한 UI/UX를 가능케 함

2. AJAX의 단점

• 히스토리 관리가 되지 않음
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 연속으로 데이터 요청 시 서버 부하 발생
• AJAX를 사용 할 수 없는 브라우저 존재
• HTTP 클라이언트의 기능이 한정되어 있음
• 한정적인 디버깅 환경

AJAX 실행 과정

1. XMLHttpRequest Object를 만든다
   • request를 보낼 준비를 브라우저에게 시키는 과정
   • 이것을 위해서 필요한 method를 갖춘 object가 필요함
2. callback 함수를 만든다
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
3. Open a request
4. send the request

AJAX를 왜 쓸까

• 단순하게 윕에서 무언가를 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용함
• 일반적으로 HTTP 프로토콜은 단방향 통신이다. 그렇기 때문에, 클라이언트에서 요청을 보내고, 서버 쪽에서 응답을 받으면 연결이 끊어짐. 그래서 화면의 내용을 갱신하기 위해서는 다시 요청을 보내고 응답을 받으며 페이지 전체를 갱신해야함. 다만, 이러한 경우에는 엄청난 자원낭비와 시간낭비를 겪게 됨.
• Ajax는 HTTP 페이지 전체가 아닌 일부만 갱신 가능하도록 XMLHttpRequest 객체를 통해서 서버에 요청함. 이 경우에는 JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있음.

AJAX 예제

예제-1

// This function gets invoked when server sends the response
function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

위의 예제는 XMLHttpRequest를 이용하여 요청을 보냈지만 일반적으로는 아래와 같이 jQuery나 기타 AJAX 기능이 내장되어 있는 라이브러리를 이용하여 AJAX 요청을 처리한다.

예제-2

var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

var xhr= new XMLHttpRequest();

xhr. onreadystatechange = function(){
	if(xhr.readyState===4){
    	document.getElementById(‘ajax’).innerHTML= xhr.responseText;
    }
}

xhr.open(‘GET’,”sidebar.html”);  // html메소드와 URL을 보낸다. (open함수는 준비를 시키는것이지 보내는 것은 아니다.)
xhr.send(); 

위의 예제는 AJAX가 XHR객체를 형성하고 이 객체의 콜백을 만들고 HTML메소드와 URL을 결정한 뒤, XHR 객체의 메소드로 정보를 보내는 방식

• var xhr=new XMLHttpRequest(); : browser response를 얻었을 때 작동하는 함수
• xhr.onreadystatechange : Ajax Request에 어떠한 변화라도 있으면 작동함
• xhr.readyState : response가 돌아왔는지 아닌지를 추적하는 property