AJAX (Asynchronous Javascript And XML)

AJAX

• javaScript의 라이브러리 중 하나

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

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

• 자바스크립트를 통해서 서버에 데이터를 요청하는 것

  비동기 방식

  • 웹페이지를 리로드하지 않고 데이터를 불러오는 방식
  • Ajax를 통해 서버에 요청을 한 후 멈춰있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포

  비동기 방식 장점

  • 페이지 리로드의 경우 전체 리소스를 다시 불러와야해 재요청할 경우 불필요한 리소스 낭비 발생
  • 비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있음

 

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

여러가지 기술이 혼합적으로 사용되어 이루어짐

• HTML
• DOM
• JavaScript
• XMLHttpRequest
• Etc

 

AJAX로 할 수 있는 것

• AJAX라는 네트워크 기술을 이용해 클라이언트에서 서버로 데이터 요청하고 그에 대한 결과 돌려받을 수 있음

  Client

  • 서버에서 정보를 가져와 사용자에게 보여줄 수 있고 사용자와 상호작용 할 수 있는 소프트웨어 (ex. 브라우저)

  서버

  • 네트워크 상에서 접근할 수 있는 프로그램
  • 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램
  • 일반적으로 사용자가 직접적으로 사용하지 않음

 

AJAX 사용하는 이유

• WEB에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 전체 페이지를 새로고침하지 않기 위해 사용
• 기본적으로 HTTP 프로토콜은 클라이언트 쪽에서 Request를 보내고 서버 쪽에서 Response를 받으면 이어졌던 연결이 끊기게 됨
• 따라서 화면의 내용을 갱신하기 위해서는 다시 request하고 response하여 페이지 전체를 갱신함 -> 자원, 시간 낭비
• AJAX는 HTML 페이지 전체가 아닌 일부만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request함
• JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그 만큼의 자원가 시간 아낄 수 있음

 

AJAX 장점

• 웹페이지 속도 향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
• 서버에서 Data만 전송하면 되므로 전체적인 코드의 양이 줄어듦
• 기존 웹에서는 불가능한 다양한 UI 가능하게 해줌

AJAX 단점

• 히스토리 관리 안됨
• 페이지 이동없는 통신으로 보안상 문제 있음
• 연속으로 데이터 요청하면 서버 부하 증가
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보 안주어짐 (요청이 완료되지 않았는데 사용자가 페이지 떠날 수 있음)
• AJAX를 쓸 수 없는 브라우저에 대한 이슈
• HTTP 클라이언트의 기능이 한정
• 지원하는 Charset 한정
• Script로 작성되므로 디버깅이 용이하지 않음
• 동일-출처 정책으로 인하여 다른 도메인과는 통신 불가능 (Cross-Domain 문제)

 

AJAX의 진행과정

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

 

AJAX가 쓰이는 방법

• XMLHttpRequest 객체를 얻은 뒤, url을 통해 요청하고 응답을 받으면 응답 결과에 맞는 함수를 실행하는 구조
• Ajax가 효율적이지만 이렇게 하게 되면 코드가 길어짐. 따라서 jQuery에서 문제 해결해줌

XMLHttpRequest를 이용해 요청

// 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 요청

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);
    }
});

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

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

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