Ajax 처리 프로세스
XMLHttpRequest 객체 생성 -> 웹 서버에 요청 전송 -> 응답을 브라우저에 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 개요 및 작성법(XHR객체))</title>
<script>
var xhr = null;//전역변수의 성격
function getXHR(){
if(window.XMLHttpRequest){//브라우저가 XHR객체를 가지고 있다면
return new XMLHttpRequest();
}
}
function load(url){
//XHR객체 생성
xhr = getXHR()
//(a)
xhr.onreadystatechange=viewMessage
//(b)
xhr.open("GET",url,true)
//(c)
xhr.send(null)
}
//콜백함수
function viewMessage(){
//(d)
if(xhr.readyState==4){
//(e)
if(xhr.status==200){
//(f)
alert(xhr.responseText)
}else{
alert('실패: '+xhr.status)
}
}
}
</script>
</head>
<body>
<input type="button" value="t1.txt" onclick="load('t1.txt')">
</body>
</html>
* t1.txt
요청하는 텍스트 파일(단순 텍스트 파일형태)
*(a)
readystate 프로퍼티 값이 변할때마다 호출할 함수를 지정.
(AJAX 요청 시, xhr객체는 상태에 따라 readyState의 값이 변경된다)
xhr객체명.onreadystatechange=콜백함수명
콜백함수: 서버로부터 응답을 받으면 자동으로 호출되는 함수
주의) 함수에 ()쓰면 안된다
*(b)
요청을 열고, 요청 url, 방식 등을 설정.
xhr객체명.open(p1,p2,p3)
p1 : 요청방식(get/post)
p2 : 요청문서명(url)
p3 : 처리방식(비동기방식(true)/동기방식(false))-> 실질적으로 true만 사용
*(c)
요청을 서버로 보냄.
xhr객체명.send()
*(d)
xhr객체.readyState 값에 따라 클라이언트의 요청이 완료되었는지 여부를 확인할 수 있음.
readyState가 4인 경우 요청완료,
1,2,3인 경우는 일부만 완료된 경우이다.
*(e)
xhr객체.status 값에 따라 톰캣서버가 클라이언트에게 데이터를 다 전송했는지 확인할 수 있다.
즉, 응답이 성공적으로 완료된 경우를 의미한다.
status값이 200인 경우 정상 완료된 경우이고,
그 외, 404(페이지 없음 에러), 500(문법 에러), 403(접근 불가 에러) 등의 값이 있다.
*(f)
responseText : 데이터를 텍스트로 보낸 경우
responseXml : 데이터를 xml로 보낸 경우
'Ajax' 카테고리의 다른 글
| [Ajax] Ajax 개요, 특징, 사용예시, 자바스크립트 객체 생성(json) (0) | 2021.03.03 |
|---|