Ajax를 쉽게 구현하기 위해서
보통 써드파티 라이브러리를 이용하면, 간편하게 구현될 수 있는데,
라이브러리를 이용하지 않고, 초간단하게 직접 구현하는 방법입니다.
1. XMLHttpRequest 객체 초기화
분기되는 이유는 크로스-브라우징 때문입니다.
XMLHttpRequest 는 IE, 파폭, 사파리, 오페라에서 지원됩니다
<script language="javascript">
var objXHR;
if (document.XMLHTTPRequest)
{
objXHR = new XMLHttpRequest();
}
else
{
objXHR = new ActiveXObject("Microsoft.XMLHTTP"); // IE 전용
}
</script>
var objXHR;
if (document.XMLHTTPRequest)
{
objXHR = new XMLHttpRequest();
}
else
{
objXHR = new ActiveXObject("Microsoft.XMLHTTP"); // IE 전용
}
</script>
2. 데이터 요청하기
XMLHttpRequest 를 선언하였다면, 서버로 데이터를 요청해야 합니다.
해당 서버의 정보(주소, 전송방식)가 있어야 하구요
첫번째 파라미터는 전송 방식(GET, POST)
두번째 파라미터는 전송 주소
세번째 파라미터는 Ajax처리 방식의 종류입니다. 비동기(true), 동기(false)
objXHR.open("POST", actionURL, true);
3. 결과 전송받기
결과는 콜백함수를 통해서 전송받는데, 아래와 같이 설정됩니다.
다른 함수를 연결시켜도 되는데, 직접 코드를 넣어주셔도 되요. ^^
아래가 가장 기본적인 구조입니다.
objXHR.onreadystatechange = function()
{
if (XHR.readyState == 4)
{
if (XHR.status == 200)
{
var strResult = XHR.responseText;
}
}
}
/*
XMLHttpRequest.readyState
0: 초기화 되지 않음
1: 초기화 완료
2: 연결 완료
3: 데이터를 가져오는 중
4: 결과 전송 완료
XMLHttpRequest.status
200: 성공
404: Page Not found
500: Internal Server Error
*/
{
if (XHR.readyState == 4)
{
if (XHR.status == 200)
{
var strResult = XHR.responseText;
}
}
}
/*
XMLHttpRequest.readyState
0: 초기화 되지 않음
1: 초기화 완료
2: 연결 완료
3: 데이터를 가져오는 중
4: 결과 전송 완료
XMLHttpRequest.status
200: 성공
404: Page Not found
500: Internal Server Error
*/
4. AJAX 실행하기
지금까지의 함수구조가 모두 세팅되었다면, 최종적으로 서버로 데이터를 요청해야 하는데
send 명령어를 통해서 해주시면 됩니다. ^^
objXHR.send();
궁금하신 내용은 댓글로 남겨주세요.
