Ajax

Ajax (Asynchronous Javascript And XML)

• JavaScript의 라이브러리중 하나 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자

• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지 일부만 데이터를 로드 하는 기법

• JavaScript를 사용한 비동기 통신 , 클라이언트와 서버간 XML 데이터를 주고 받는 기술

비동기 방식

• 웹 페이지를 리로드를 하지 않고 데이터를 불러오는 방식

• Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 동작 한다는 의미

• 장점으로는 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

Ajax를 사용 가능하게 만드는 것

• HTML

• DOM

• JavaScript

• XMLHttpRequest

• Etc

AJAX로 할 수 있는 것

• 클라이언트에서 서버로 데이터 요청 하여 그 결과를 돌려받을 수 있다.

AJAX 장점 과 단점

AJAX 장점

• 웹페이지의 속도향상

• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.

• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.

• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

AJAX 단점

• 히스토리 관리가 되지 않는다.

• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.

• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)

• AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.

• HTTP 클라이언트의 기능이 한정되어 있다.

• 지원하는 Charset이 한정되어 있다.

• Script로 작성되므로 디버깅이 용이하지 않다.

• 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

AJAX 사용 하는 이유?

• JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다

JavaScript를 통한 Ajax 사용법

// 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();

• 위 예제 에서 자바스크립트를 이용하여 특정 서버에 요청을 보내고 그에 대한 자료를 성공적으로 받아올 수 있음을 확인할 수 있다.

jQuery를 통한 Ajax 사용법

$.ajax({
            url: "${pageContext.request.contextPath }/guestbook/api/list",
            dataType: "json",
            type: "get",
            data: "no=" + page,
            success: function(response){
                response.data.forEach(function(vo){
                    html =
                        "<li data-no='" + vo.no + "'>" + 
                            "<strong>" + vo.name + "</strong>" +
                            "<p>" + vo.message + "</p>" +
                            "<strong></strong>" + 
                            "<a href='' data-no='" + vo.no + "'>삭제</a>" + 
                        "</li>";
                    $("#list-guestbook").append(html);    
                });
            }
        });    

• Github mysite03 방명록 기능 구현 참고

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를 얻었을 때 작동하는 함수 (callback 함수)

• xhr.onreadystatecjange : AJAX Request에 어떠한 변화라도 있으면 작동한다. (callback 함수를 포함하고 있다고 생각하면 된다.)

• xhr.readyState : response가 돌아왔는지 아닌지를 추적하는 property