본문으로 바로가기

[Ajax] 기본 예제 소스 + 설명

category Program/JavaScript 2015. 12. 18. 17:49

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>

</title>

<script>

var xmlHttp;

window.onload=function()

{

// 1. 브라우저에 따른 XMLHttpRequest 생성

xmlHttp = createXMLHTTPObject();

// 2. 요청에 대한 응답 처리 이벤트 리스너 등록

xmlHttp.onreadystatechange=on_ReadyStateChance;

// 3. 서버로 보낼 데이터 생성

var data = "key=value1&key2=value2";


// 4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)

// 4-1 서버로 보낼 데이터 전송 방식 설정, 대부분 [ GET,POST ] 둘중 하나를 지정

// 4-2 서버 측 응답 방식 설정 [ 동기 , 비동기 ] 중 선택

// 5. 실제 데이터 전송(send() 메서드 이용)

// T. 동기/비동기 실행 테스트를 위한 부분

alert("전송시작!")

}


// 1. 브라우저에 따른 XMLHttpRequest 생성

function createXMLHTTPObject() {

var xhr = null;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

return xhr;

}

// 6, 웅답 처리

function on_ReadyStateChange() {

// 4 = 데이터 전송 완료. ( 0 =초기화 전, 1=로딩중. 2=로딩됨, 3,대화 중 상태)

if (xmlHttp.readyState == 4) {

// 200은 에러없음 404는 페이지가 존재하지 않음

if (xmlHttp.status == 200) {

}

//7. 이제 이 부분에서 서버에서 보낸 데이터를 XML,JSON,CSV에 따라 처리함.

}

else {

alert("처리 중 에러 발생")

}

}

</script>

</head>

</html>