다른 뜻에 대해서는 아래의 문서를 참조하십시오.
목차
1 프로그래밍 기법
1.1 개요
AJAX는 Asynchronous Javascript and XML의 약자로, 말그대로 Javascript와 XML을 이용한 비동기적 정보 교환 기법이다. 이름에 XML이라고 명시되어있긴 하지만, JSON이나 일반 텍스트 파일과 같은 다른 데이터 오브젝트들도 사용 가능하다.
기본적으로 웹사이트가 표시될때는 브라우저가 요청한 시점에 데이타를 웹서버로부터 받아와서 브라우저에 출력시켜 주는 것이 기본적인 방식이다. 나무위키[1]를 예로 들면, 아무리 문서가 서버에서 업데이트 되어도 새로고침 버튼을 누르지 않는 이상, 사용자의 화면에는 업데이트 되지 않는 것이다. 이러한 방식은 웹 서비스들의 구현에 많은 제약을 주게 되는데, 사용자가 입력한 정보를 서버로 전송하기 위해서는 무조건 해당 페이지를 다시 로딩할 필요가 있기 때문이다. [2]
이와 같은 문제점을 해결하기 위해서, Javascript를 이용하여 특정 정보를 받아온 후에 웹페이지에 뿌려주는 방식이 널리 퍼지게 된다. 전체 페이지의 일부분의 데이타만 서버에 요청해서 받아온 후에 해당 부분에 받아온 데이터를 뿌려주는 형식이다.
꽤 오래전부터 있던 기법이지만, 2005년경 구글이 구글 지도를 아무런 플러그인 없이 AJAX로 구현하자 화제거리가 되었다. 특히 국내에서 더욱 두드러졌는데, 당시 한국의 지도 서비스는 열이면 열 ActiveX 기반이었기 때문이다. ActiveX 없이 지도 같은 서비스가 구현된다는 사실이 국내에서는 큰 충격으로 다가왔고, 국내에서는 너도나도 지도를 AJAX 기반으로 바꾸었다.
1.2 PJAX
PJAX는 HTML5의 pushState api와 AJAX 기술을 결합한 jQuery 플러그인이다.
기존에 AJAX로 페이지 이동을 구현 시에 주소 히스토리에 이동 기록이 남지 않는 문제를 해결할 수 있다. 현재 나무위키가 이 기술을 사용하고 있다. nfFuckingPJAX이라는 ID의 버튼이 소스 내에 있다.
<syntaxhighlight lang="javascript" line="1"> $(document).pjax('데이터를 요청할 페이지 주소', '받아온 데이터를 넣을 영역의 jQuery 선택자'); </syntaxhighlight>
pushState를 지원하지 않는 브라우저[3]에서는 사용할 수 없지만, 지원하는 브라우저에서는 PJAX를, 지원하지 않는 브라우저에서는 일반 페이지 이동을 하도록 만들면 문제 없다.
1.3 원리
- 서버에서 특정 데이터를 출력하는 페이지을 만든다.
- 자바스크립트를 이용해서, 클라이언트 측에서 1에서 만든 서버의 페이지에 데이터를 요청하게 만든다.
- 서버에서 데이터를 받아온 후, 그 데이타를 적절히 parse한 후에 웹사이트에 띄워준다. (document.getElementById("ID").innerHTML("DATA") 등등을 이용)
2~3번 내용을 setInterval을 이용하여 일정 시간마다 반복되게 만들어주면, 간단한 채팅 프로그램과 같은 것을 만들 수 있다. 물론 본격적으로 각잡고 웹채팅을 만들려면 웹소켓부터 까고 시작해야한다.
1.4 예제
아래의 예제에서는 모두 "//namu.wiki/raw/틀:틀 모음/" 의 내용을 가져와서 뿌려주는 자바스크립트 코드이다.
1.4.1 Pure Javascript
플러그인 없이, 자바스크립트만을 사용한 예제이다.
var request = new XMLHttpRequest(); // XMLHttpRequest 생성 request.open("GET", "//namu.wiki/raw/틀:틀 모음/"); // 데이터를 GET Method로 요청 request.onreadystatechange = function() { if ( request.readyState === 4 && request.status === 200 ) { // request가 끝났으며(4), 성공적(200)인 경우. document.getElementById("content").innerHTML = resquest.responseText; // #content 태그 내의 내용을 받아온 텍스트로 교체. } }
1.4.2 jQuery
jQuery를 이용한 예제이다. $.ajax 함수를 이용해서 자체적인 AJAX를 지원해주기 때문에, 기본적인 설정과 콜백 함수만 넣어주면 간단히 작동된다.
$.ajax({
url: "//namu.wiki/raw/틀:틀 모음/",
method: "GET",
dataType: "text",
success: function(data) {
$("#content").html(data);
}
})
2 코나미의 슈팅게임
A-JAX 항목 참고
3 그리스 신화 영웅 중 한 명
그리스 신화의 영웅인 아이아스 (Aias / Αἴας)를 라틴어어로 표기한 것이다(Ajax). 읽는 법은 아약스.
대 아이아스와 소 아이아스가 있다. 네덜란드 프로축구팀 AFC 아약스의 팀 이름의 기원이 되었다.