기본 콘텐츠로 건너뛰기

개발 공부 - javascript에서 XMLHttpRequest 객체 사용 (간단 정리)

목차

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

댓글

이 블로그의 인기 게시물

Ebook - 전자책 drm 상관 없이 pdf로 만들기

yes24와 교보문고에서 ebook을 구매 해야 했는데 너무 불편하고, 필기가 매우 화날 정도로 안 좋아서 원시적으로 사용하기로 했다. 1. 목적 : ebook에서 필기 및 사용이 불편하여 pdf로 변환  2. 용도 : 개인 사용 목적이며 화질이 다소 저하되어도 필기만 용이하면 상관 없음 3. 방법 1) 휴대폰 및 카메라로 동영상을 촬영했다. DRM 때문에 프로그램으로는 촬영이 안 되는 것을 확인했다. (사실 개인 사용 목적이면 기본 화면 캡쳐를 사용해도 된다...) 2) 마우스 클릭 해주는 매크로를 사용했다. (1) key_macro.exe > https://blog.daum.net/pg365/250 듀얼 모니터에서 위치 이탈 현상이 있긴 해도 괜찮았다. (2) AutoClick.exe > http://bestsoftwarecenter.blogspot.com/2011/02/autoclick-22.html 이 걸로 잘 사용했다. 3초마다 한 번 클릭하도록 사용했다. 3) 동영상을 이미지로 변경해주는 프로그램을 사용했다. Free Video to JPG Converter > https://www.dvdvideosoft.com/products/dvd/Free-Video-to-JPG-Converter.htm (240826: 다운로드 시 정상적으로 되지 않아서 URL 수정) 일 하면서 듀얼 모니터에 켜 놨는데 속도가 괜찮았다. * Every frame 으로 사용해야 한다. 4) 중복 사진 제거해주는 프로그램을 사용했다. VlsiPics  > http://www.visipics.info/index.php?title=Main_Page 생각보다 느리니 퇴근시에 걸어놓고 가면 된다. 한번 play가 끝나면 Auto-select 하고 Delete 하면 된다. 5) 이미지를 일괄 Crop 작업 해주는 프로그램을 사용했다. JPEGCrops > https://jpegcrops.softonic.kr/ *...

개발 공부 - PC 카카오톡 작업 표시줄 아이콘 이미지 변경 방법

PC 카카오톡 사용시 작업 표시줄에서 아이콘 이미지를 변경하는 방법이다. 1) 작업 표시줄 내 카카오톡 아이콘에서 마우스 오른쪽 버튼을 누른  뒤 속성에 들어간다. 2) 아이콘 변경에서  C:\Windows\system32\imageres.dll C:\Windows\system32\shell32.dll C:\Windows\system32\DDORes.dll C:\Windows\System32\moricons.dll (MS DOS Icons) 등을 누른 뒤 적당한 것을 선택하여 적용한다. * 사내 메신저 아이콘을 참고해도 된다. 참고 : 기본 아이콘 위치 https://blog.silnex.kr/windowstip-windows-%EA%B8%B0%EB%B3%B8-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%9C%84%EC%B9%98/ 2022. 11. 29.  생각보다 유입이 많아서 놀랐습니다. PC 카톡 사용자 화이팅!

운동 정보 - 어메이즈핏 밴드 5 스마트밴드 나이키 런 클럽(NRC = Nike Run Club) 연동

 나이키 런 클럽 쓰려고 산 어메이즈핏 밴드5 인데 연동이 영 어려워서 찾아보고 써봤다. 1. Zepp 앱은 연동이 되어 있어야 한다. 2.  Zepp 앱 -> 프로필 -> 내 기기 -> Amazfit Band 5 3. 검색 가능 : 켜짐 활동 심박수 공유 : 켜짐 연결 제한 : 꺼짐 (기본) 백그라운드에서 실행 : 제외로 등록 4. NRC(나이키 런 클럽) 앱 -> 설정 -> 러닝 설정 -> 기기 5. 심박수 표시 -> 블루투스에서 AmazFit Band 5 누르고 NRC 즐기면 된다! * 안드로이드 이용자입니다.