hyeonga_code
Ajax_서버의 응답 처리_실습 포함 본문
- 서버의 응답 처리
- XMLHttpRequest 객체의 프로퍼티
- onreadystatechange 프로퍼티
- 상태의 변경이 발생한 경우 해당하는 이벤트를 처리하기 위한 이벤트 핸들러를 기술합니다.
httpRequest.onreadystatechange = callBackFunction;
- readyState 프로퍼티
- 요청 객체의 상태를 리턴하는 것
- 프로퍼티
- UNINITIALIZED
- 객체만 생성되고 아직 초기화되지 않은 상태입니다.
- open 메소드가 호출되지 않습니다.
- LOADING
- open 메소드가 호출되고 아직 send 메소드가 호출되지 않은 상태입니다.
- LOADED
- send 메소드가 호출되었지만 status와 헤더는 도착하지 않은 상태입니다.
- INTERACTIVE
- 데이터의 일부를 받은 상태입니다.
- COMPLETED
- 데이터를 전부 받은 상태입니다.
- 완전한 데이터 이용이 가능합니다.
function callBackFunction(){
if (httpRequest.readyState == 4){
// 서버에서 완전하게 응답이 도착한 경우
}
}
- 2,3 : 웹 브라우저마다 다르게 처리됩니다.
- 오페라에서 요청한 페이지가 존재하지 않는 경우 3으로 변경되지 않습니다.
- 파이어폭스, IE의 경우 요청한 페이지가 존재하지 않더라도 3으로 변경될 수 있습니다.
- 1,4를 주로 사용합니다.
- status 프로퍼티
- 서버로부터 응답을 받는 Http 상태 코드
- 주요 상태 코드
- 200 : OK : 요청 성공
- 403 : Forbbiden : 접근 거부
- 404 : Not Found : 페이지 없음
- 500 : Internal Server Error : 서버 오류 발생
function callBackFunction(){
if(httpReque4st.readyState == 4) {
if(httpRequest.statud == 200){
// 정상적으로 수행
} else {
alert("Error : " + httpRequest.status);
}
}
}
- responseText 프로퍼티
- 문자열로 이루어진 서버의 응답
- 웹 서버는 단순 텍스트 또는 XML 두 가지 형식으로 데이터를 전송할 수 있습니다.
function callBackFunction(){
if(httpReque4st.readyState == 4) {
if(httpRequest.statud == 200){
var txt = httpRequest.responseText;
// txt 변수를 사용하여 알맞은 작업을 수행합니다.
}
}
}
- responseMXL 프로퍼티
- XML로 이루어진 서버의 응답
- responseBody 프로퍼티
- 이진 코드 문자열로 서버의 응답
---- 실습
- dynamic web project : Ajax
- webapp > ch01 폴더 생성
- ch01 > simpleAjaxApp.html 작성
=====
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_SimpleAjaxApp</title>
<script type="text/javascript">
// XMLHttpRequest 객체를 저장하기 위한 변수를 선언합니다.
var httpRequest = null;
// XMLHttpRequest 객체를 생성하는 함수입니다.
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
// 서버에서 데이터를 가져오는 함수입니다.
function load(url) {
// 객체를 얻어옴
httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = viewMessage;
// get 방식으로 url을 오픈합니다.
httpRequest.open("GET", url, true);
httpRequest.send(null);
}
// XMLHttpRequest의 상태 변화 이벤트를 처리하는 함수입니다.
function viewMessage() {
// 서버의 응답이 확인되는 경우
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert(httpRequest.responseText);
} else {
alert("실패: " + httpRequest.status);
}
}
}
</script>
</head>
<body>
<!-- simple2.txt 파일의 글씨가 깨져서 출력됩니다. -->
<input type="button" value="simple.txt" onclick="load('simple.txt')"/>
<input type="button" value="simple2.txt" onclick="load('simple2.txt')"/>
<input type="button" value="simple.jsp" onclick="load('simple.jsp')"/>
<input type="button" value="simple2.jsp" onclick="load('simple2.jsp')"/>
</body>
</html>
|
- ch01 폴더 안에 4개의 파일을 작성합니다.
- simple.txt (UTF-8)
- simple2.txt (EUC-KR)
- simple.jsp (UTF-8)
- simple2.jsp (EUC-KR)
- 내용은 상관 없습니다.
- 인코딩 방식을 변경하여 저장합니다.
- 실행합니다.
- simple2.txt의 파일이 깨져서 출력됩니다.
- JSP의 경우 인코딩 방식을 따로 지정해도 깨지지 않고 출력됩니다.
- XMLHttpRequest의 기본 캐릭터 셋인 UTF-8로 인코딩됩니다.
'Ajax' 카테고리의 다른 글
| Ajax_파라미터에서 한글 처리 방법 (0) | 2023.10.15 |
|---|---|
| Ajax_동기/비동기 방식의 차이 (0) | 2023.10.14 |
| Ajax_웹 서버에 요청 전송하기 (0) | 2023.10.13 |
| Ajax_XMLHttpRequest 프로그래밍 순서 (0) | 2023.10.13 |
| Ajax_주요 구성 요소 (0) | 2023.10.12 |
