목차
1) 객체 구해오기
2) 웹 서버로 요청 전송
3) 웹 서버에서 응답 받은 뒤 화면 반영
4) 추가 사항
1) http request 만들기 (객체 구해오기)
2) 웹 서버로 요청 전송
(1) open( 1 , 2 , 3 );
1 - 전달 방식 선택
'GET', 'POST', 'HEAD' 중 하나 선택
2 - 접속 URL
접속 URL은 현재 페이지와 같은 도메인 내 위치한 것
3 - 동기/비동기 방식
동기(false), 비동기(true)
(2) send()
3) 서버 응답 처리
* onreadystatechange : 서버로부터 응답이 도착하면 호출될 함수를 지정하는 프로퍼티
* callbackFunction : onreadystatechange 프로퍼티를 통해 지정한 콜백 함수 (응답 도착시 외에도 open, send 메소드 호출시에도 실행된다.)
4) 추가 사항
(1) XMLHttpRequest 객체 상태
* readyState : 4 (데이터 전부 받은 상태)
(2) 서버 응답 상태
* status : 200 (요청 성공)
* statusText : OK (요청 성공)
(3) 응답 데이터 사용
* responseText : 서버가 전송해준 데이터 (단순 응답 텍스트일 경우 그냥 출력 가능)
(4) 코드 실행 순서
출처: https://myeonguni.tistory.com/1526
1) 객체 구해오기
2) 웹 서버로 요청 전송
3) 웹 서버에서 응답 받은 뒤 화면 반영
4) 추가 사항
1) http request 만들기 (객체 구해오기)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var httpRequest = null;
if ( window.XMLHttpRequest ) {
httpRequest = new XMLHttpRequest(); //신규 버전 (IE 제외)
} else if ( window.ActiveXObject ){ //IE일 경우에는 XMLHttpRequest 객체 구하는 방식이 다름
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // 신버전 IE
} catch(e) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //구버전 IE (IE 6 이하)
}
}
| cs |
2) 웹 서버로 요청 전송
(1) open( 1 , 2 , 3 );
1 - 전달 방식 선택
'GET', 'POST', 'HEAD' 중 하나 선택
2 - 접속 URL
접속 URL은 현재 페이지와 같은 도메인 내 위치한 것
3 - 동기/비동기 방식
동기(false), 비동기(true)
(2) send()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
1 - GET
httpRequest = getXMLHttpRequest();
httpRequest.open("GET", "/test.jsp?id=aaa&pw=aaa", true);
httpRequest.send(null); // 파라미터 부재시에는 그냥 null 전달 가능
2 - POST
httpRequest = getXMLHttpRequest();
httpRequest.open("POST", "/test.jsp", true);
httpRequest.send("id=aaa&pw=aaa");
| cs |
3) 서버 응답 처리
* onreadystatechange : 서버로부터 응답이 도착하면 호출될 함수를 지정하는 프로퍼티
* callbackFunction : onreadystatechange 프로퍼티를 통해 지정한 콜백 함수 (응답 도착시 외에도 open, send 메소드 호출시에도 실행된다.)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function processEvent(){
httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = callbackFunction;
httpRequest.open("GET", "/test.jsp", true);
httpRequest.send(null);
}
| cs |
4) 추가 사항
(1) XMLHttpRequest 객체 상태
* readyState : 4 (데이터 전부 받은 상태)
(2) 서버 응답 상태
* status : 200 (요청 성공)
* statusText : OK (요청 성공)
(3) 응답 데이터 사용
* responseText : 서버가 전송해준 데이터 (단순 응답 텍스트일 경우 그냥 출력 가능)
1
2
3
4
5
6
7
8
9
10
11
12
13
|
if ( httpRequest.readyState == 4 ) {
if ( httpRequest.status == 200 ) {
alert( httpRequest.responseText );
} else {
alert( "실패: " + httpRequest.status );
}
}
| cs |
(4) 코드 실행 순서
1
2
3
4
5
6
7
8
9
10
11
12
13
|
1 - 사용자 이벤트 발생시 이벤트 처리 함수 호출
2 - 이벤트 처리 함수 내에서는 XMLHttpRequest 객체의 send() 메소드를 호출
3 - XMLHttpRequest 객체의 send() 메소드가 호출되면 웹 서버에 요청이 전송
4 - 웹 서버가 처리 뒤 응답 결과를 XMLHttpRequest 전송
5 - XMLHttpRequest 객체에 응답 도착시 onreadystatechange 프로퍼티를 통해 지정한 콜백 함수 호출
6 - 콜백 함수 내의 응답 판단 (readyState, status 프로퍼티값으로 확인)
7 - 정상 동작시 응답 데이터를 responseText 프로퍼티를 사용해 처리
| cs |
출처: https://myeonguni.tistory.com/1526
댓글
댓글 쓰기