XMLHttpRequest 객체

(1)

과목명: 웹프로그래밍응용

교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어

2014년 1학기

Professor Seung-Hoon Choi

Part3. Ajax

Ch20. XMLHttpRequest

(2)

20 XMLHttpRequest



XMLHttpRequest 객체

– 자바스크립트로 Ajax를 이용할 때 사용하는 객체 – 간단하게 xhr 이라고도 부름



서버

– 19장에서 만든 서버를 이용함

 Server.js – 서버 실행

 c:\> node server.js

(3)

20.1 XMLHttpRequest 객체



XMLHttpRequest 객체는 빈 편지지와 같다.

– 배송 방식, 수취인 등을 지정한 후, (open 메소드 이용) – 내용물을 넣고 편지를 보낸다. (send 메소드 이용)

– 답장이 오면 (onreadystatechange 이벤트 핸들러 이용) – 답장을 확인하고 처리한다. (responseText 속성 이용)



XMLHttpRequest 객체의 전송 준비 메소드

– open(전송 방식, 서버 경로, 비동기 사용 여부)

 전송 방식: GET 또는 POST와 같은 전송 방식을 의미함

 서버 경로: 요청을 수행할 위치를 지정함

 비동기 사용 여부: 서버에 요청 시 비동기적으로 요청할 지를 결 정함

(4)

20.1 XMLHttpRequest 객체



클라이언트

– public 폴더에 20-4.html 작성

 코드 20-1, 20-2, 20-3, 20-4

 XMLHttpRequest( ) 객체 request를 생성하고,

– open( ) 메소드로 전송을 준비한 후 – send( ) 메소드로 요청을 보낸다.

– 응답은 responseText 속성을 이용한다.



클라이언트 실행

– 웹 브라우저에서

 http://127.0.0.1:52273/20-4.html – 요소 검사로 확인하면,

 127.0.0.1 요청 후 data.html로 요청이 전송된 것을 확인할 수 있 다.

(5)

20.1 XMLHttpRequest 객체



코드 20-5

– request.responseText 를 document.body.innerHTML에 할당

(6)

20.2 생성



인터넷 익스플로러 6 이하에서는

– 20.1 절의 XMLHttpRequest 객체를 지원하지 않음.

– ActiveX 기술을 이용하면 지원 가능함

 new ActiveXObject(‘Msxml2.XMLHTTP)

(7)

20.3 동기 방식과 비동기 방식



동기 방식

– 편지를 우체통에 넣고,

– 답장이 올 때 까지 우체통 앞에서 기다리는 방식



비동기 방식

– 편지를 우체통에 넣고,

– 답장이 올 때 까지 다른 일을 하는 방식



코드 20-11

– send( ) 메소드에 소비되는 시간 측정

– open( ) 메소드의 세 번째 인자 이용해서 동기/비동기 설정함

(8)

20.3 동기 방식과 비동기 방식



데이터 응답이 오면

– onreadystatechange 이벤트가 발생한다.



사실은, XMLHttpRequest 객체의 상태가 변경될 때 마다

– readyState 속성의 값이 변경되고

– 이 때마다 onreadystatechange 이벤트가 발생한다.



코드 20-12

– onreadystatechange 이벤트 핸들러에서 – readyState의 값을 계속해서 alert함

(9)

20.3 동기 방식과 비동기 방식



표 20-1 readyState 속성의 값

– 0

 request 객체를 만들었지만, 아직 open( ) 로 초기화하지 않았음 – 1

 request 객체를 만들고 초기화했지만, send( ) 메소드를 호출하지 않았음

– 2

 send( ) 메소드를 사용했지만, 아직 응답 데이터를 받지 않았음 – 3

 응답 데이터의 일부만을 받았음 – 4

 모든 응답 데이터를 받았음

(10)

20.3 동기 방식과 비동기 방식



따라서, onreadystatechange 이벤트 핸들러 안에서

– readyState 속성의 값이 4일 때 – 응답 데이터를 처리해 주면 된다.



응답 데이터가 올바른 데이터인지도 검사해 주어야 한다.

– status 속성의 값이 200 인지 검사하면 된다.



코드 20-13, 20-14



지금까지의 응답 데이터는, HTML 태그였다.

– 앞으로 JSON이나 XML 문서를 다루는 방법을 살펴본다.

(11)

20.4.1 JSON 요청과 조작



응답받은 JSON 문자열을 자바스크립트 객체로 변환

– eval( ) 함수를 이용함

 eval( ) 함수의 매개변수로 넣을 때 괄호로 둘러싸야 함



코드 20-16

– /data.json으로 요청을 보냄

– 응답 데이터를 eval( )을 이용하여 객체로 변환함 – 변환된 객체는, 객체들을 담고 있는 배열임



JSON.parse( ) 메소드를 이용해도 됨

– var json = JSON.parse(request.responseText );

(12)

20.4.2 XML 요청과 조작



응답 받은 XML 문서를 얻는 방법

– 요청 객체의 responseXML 속성 이용



코드 20-17

– alert(request.responseXML)

(13)

20.4.2 XML 요청과 조작



XML도 문서 객체 모델과 동일하므로 DOM의 속성과 메소 드를 그대로 이용할 수 있다.

– DOM 속성

 nodeValue: 문서 객체의 내부 글자를 얻어옴

 attribute: 문서 객체의 속성을 얻어옴 – DOM 메소드

 getElementById(id): id 속성과 일치하는 문서 객체를 얻어옴

 getElementsByTagName(name): 태그 이름이 일치하는 문서 객체 들을 배열로 얻어옴



코드 20-18

– var xml = request.responseXML

– var names = xml.getElementsByTagName(‘name’)

(14)

20.4.2 XML 요청과 조작



코드 20-19

– var names = xml.getElementsByTagName('name');

– var name = names[i].childNodes[0].nodeValue;



XML to JSON 플러그인

– XML 문서를 JSON 객체로 변경해 주는 플러그인

 http://thomasfrank.se/xml_to_json.html 에서

– xml2json.js 를 다운로드함

 index.html과 같은 폴더에 복사함

 <script src=“xml2json.js”></script> 추가

 var json = xml2json.parser(request.responseText); 실행 – 코드 20-20, 20-21

(15)

20.5 데이터 요청 방식



GET / POST / PUT / DELETE 요청 방식

– XMLHttpRequest 객체의 open( ) 호출 시 첫 번째 인자로 구분 함



코드 20-22

– GET / POST / PUT / DELETE 요청을 위한 버튼 추가

(16)

20.5.1 GET 요청



코드 20-23

– request.open('GET', '/products', false);

 제품 리스트를 얻어옴



GET 요청 캐싱

– 구 버전의 웹 브라우저에서는

 GET 요청을 하면, 그 결과를 미리 임시장소에 복사해 놓음(캐싱)

 같은 형식으로 GET 요청이 오면, 서버로 요청이 가지 않고 이전에 캐싱해 놓았던 결과를 그대로 전달한다.

 이를 방지하기 위해서는, GET 요청 시 현재 시각을 추가해서 항상 다른 GET 요청이 가도록 한다.

– 코드 20-24

• request.open('GET', '/products?dummy=' + new Date().getTime(), false);

(17)

20.5.2 POST 요청



코드 20-25

– request.open('POST', '/products', false);

 제품을 하나 추가함



POST 요청 시, 요청 매개 변수 전달해야 함

– setRequestHeader( ) 메소드 이용해서

 Content-type 속성을 지정함

– send( ) 메소드에 매개 변수를 넣어서 호출함 – 코드 20-26

 request.setRequestHeader('Content-type', 'application/x-www- form-urlencoded');

 request.send('name=' + name + '&price=' + price);

(18)

20.5.3 PUT 요청



코드 20-27

– request.open(‘PUT', '/products/0', false);

 첫 번째 제품의 속성 값을 수정함

– PUT 요청 시, 요청 매개 변수 전달해야 함

 setRequestHeader( ) 메소드 이용해서 Content-type 속성을 지정 함

– request.setRequestHeader('Content-type', 'application/x-www- form-urlencoded');

 send( ) 메소드에 매개 변수를 넣어서 호출함

– request.send('name=' + name + '&price=' + price);

(19)

20.5.4 DELETE 요청



코드 20-28

– request.open(‘DELETE', '/products/0', false);

 첫 번째 제품을 삭제함