과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi
20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버 19장에서만든서버를이용함 Server.js 서버실행 c:\> node server.js
20.1 XMLHttpRequest 객체 XMLHttpRequest 객체는빈편지지와같다. 배송방식, 수취인등을지정한후, (open 메소드이용 ) 내용물을넣고편지를보낸다. (send 메소드이용 ) 답장이오면 (onreadystatechange 이벤트핸들러이용 ) 답장을확인하고처리한다. (responsetext 속성이용 ) XMLHttpRequest 객체의전송준비메소드 open( 전송방식, 서버경로, 비동기사용여부 ) 전송방식 : GET 또는 POST와같은전송방식을의미함 서버경로 : 요청을수행할위치를지정함 비동기사용여부 : 서버에요청시비동기적으로요청할지를결정함
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로요청이전송된것을확인할수있다.
20.1 XMLHttpRequest 객체 코드 20-5 request.responsetext 를 document.body.innerhtml 에할당
20.2 생성 인터넷익스플로러 6 이하에서는 20.1 절의 XMLHttpRequest 객체를지원하지않음. ActiveX 기술을이용하면지원가능함 new ActiveXObject( Msxml2.XMLHTTP)
20.3 동기방식과비동기방식 동기방식 편지를우체통에넣고, 답장이올때까지우체통앞에서기다리는방식 비동기방식 편지를우체통에넣고, 답장이올때까지다른일을하는방식 코드 20-11 send( ) 메소드에소비되는시간측정 open( ) 메소드의세번째인자이용해서동기 / 비동기설정함
20.3 동기방식과비동기방식 데이터응답이오면 onreadystatechange 이벤트가발생한다. 사실은, XMLHttpRequest 객체의상태가변경될때마다 readystate 속성의값이변경되고 이때마다 onreadystatechange 이벤트가발생한다. 코드 20-12 onreadystatechange 이벤트핸들러에서 readystate의값을계속해서 alert함
20.3 동기방식과비동기방식 표 20-1 readystate 속성의값 0 1 request 객체를만들었지만, 아직 open( ) 로초기화하지않았음 request 객체를만들고초기화했지만, send( ) 메소드를호출하지않았음 2 send( ) 메소드를사용했지만, 아직응답데이터를받지않았음 3 4 응답데이터의일부만을받았음 모든응답데이터를받았음
20.3 동기방식과비동기방식 따라서, onreadystatechange 이벤트핸들러안에서 readystate 속성의값이 4일때 응답데이터를처리해주면된다. 응답데이터가올바른데이터인지도검사해주어야한다. status 속성의값이 200 인지검사하면된다. 코드 20-13, 20-14 지금까지의응답데이터는, HTML 태그였다. 앞으로 JSON 이나 XML 문서를다루는방법을살펴본다.
20.4.1 JSON 요청과조작 응답받은 JSON 문자열을자바스크립트객체로변환 eval( ) 함수를이용함 eval( ) 함수의매개변수로넣을때괄호로둘러싸야함 코드 20-16 /data.json으로요청을보냄 응답데이터를 eval( ) 을이용하여객체로변환함 변환된객체는, 객체들을담고있는배열임 JSON.parse( ) 메소드를이용해도됨 var json = JSON.parse(request.responseText );
20.4.2 XML 요청과조작 응답받은 XML 문서를얻는방법 요청객체의 responsexml 속성이용 코드 20-17 alert(request.responsexml)
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 )
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
20.5 데이터요청방식 GET / POST / PUT / DELETE 요청방식 XMLHttpRequest 객체의 open( ) 호출시첫번째인자로구분함 코드 20-22 GET / POST / PUT / DELETE 요청을위한버튼추가
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);
20.5.2 POST 요청 코드 20-25 request.open('post', '/products', false); 제품을하나추가함 POST 요청시, 요청매개변수전달해야함 setrequestheader( ) 메소드이용해서 Content-type 속성을지정함 send( ) 메소드에매개변수를넣어서호출함 코드 20-26 request.setrequestheader('content-type', 'application/x-wwwform-urlencoded'); request.send('name=' + name + '&price=' + price);
20.5.3 PUT 요청 코드 20-27 request.open( PUT', '/products/0', false); 첫번째제품의속성값을수정함 PUT 요청시, 요청매개변수전달해야함 setrequestheader( ) 메소드이용해서 Content-type 속성을지정함 request.setrequestheader('content-type', 'application/x-wwwform-urlencoded'); send( ) 메소드에매개변수를넣어서호출함 request.send('name=' + name + '&price=' + price);
20.5.4 DELETE 요청 코드 20-28 request.open( DELETE', '/products/0', false); 첫번째제품을삭제함