[jQuery] ajax를 사용해보자

ajax는 비동기식 자바스크립트와 xml을 이야기하는데, 

대충 말하자면 페이지의 전체적인 로드없이 필요한 부분의 정보만 가져오는걸 말한다.

(참고로 말하자면 ajax의 발음은 아약스, 아작스 등으로 불리지만, 에이젝스가 정확하다고 한다.)

우리가 인터넷 페이지에서 회원가입을 할 때, 자동으로 아이디가 중복인지 체크해주는 기능같은 것이 ajax를 이용한 하나의 예다.

ajax는 보통,

function ajaxCreateRequest() {

var request = false;

if(window.XMLHttpRequest) {

request = new XMLHttpRequest;

}

else if(window.ActiveXObject) {

request = new ActiveXObject("Microsoft.XMLHTTP");

}

if(!request)

alert("This Browser doesn't support AJAX!");

return request;

}

이런 형태로 선언이 되어왔는데, 이 경우 낮은 버전의 IE에서는 ajax 객체를 로드할 수 없다는 에러가 뜬다.

그래서 이용하는게 바로 jQuery에서 지원하는 ajax()다.

기존의 형태로 ajax를 통해 다른 페이지의 데이터를 불러오려면,

i = ajaxCreateRequest();

var url = 'something.php';

var param = 'id=1';

i.onreadystatechange = iStatus;

i.open('POST', url, true);

i.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

i.send(param);

와 같은 형태의 코드를 작성해야 했다.

그러나, jQuery를 이용하면 일련의 코드를 단축시킬 수 있다.

$.ajax({

url:"something.php",

type: "POST",

dataType: "HTML",

data: {id:'1'}

}).done(function(variable) {alert("AJAX LOADED"); });

아주 직관적인 방식으로, 일종의 JSON 표기법으로 명료하게 표현할 수 있다.

이렇게 함으로써 코드의 길이도 줄이고, 여러 브라우저들의 호환성 즉 크로스 브라우징을 가능케 한다.