XMLHttpRequest ¿ÀºêÁ§Æ® »ç¿ëÇϱâ
XMLHttpRequest(XHR) °´Ã¼´Â Internet Explore5¿¡¼ ActiveX ÄÄÆ÷³ÍÆ® Çü½ÄÀ¸·Î °¡Àå ¸ÕÀú Á¦°øµÇ¾ú±â
¶§¹®¿¡, ¸ðÁú¶ó¿Í »çÆĸ® À¥ºê¶ó¿ìÀú¿¡¼ ÀÌ °´Ã¼¸¦ µµÀÔÇϱâÀü±îÁö »ç½Ç ¸¹Àº °³¹ßÀÚµéÀÌ
XMLHttpRequest °´Ã¼ÀÇ »ç¿ëÀ» ²¨·ÁÇß´Ù.
XHRÀº W3C Ç¥ÁØÀÌ ¾Æ´Ï±â¶§¹®¿¡ ºê¶ó¿ìÀú¸¶´Ù ÀÛµ¿¹æ½Ä¿¡ ÀÖ¾î¼ ´Ù¼Ò³ª¸¶ Â÷ÀÌ°¡ Á¸ÀçÇß¾úÁö¸¸ ÇöÀç
´ëºÎºÐÀÇ ºê¶ó¿ìÀúµéÀº XHR ±â´ÉÀ» ¼·Î ºñ½ÁÇÏ°Ô ±¸ÇöÇÏ°í ÀÖ´Ù. ÇöÁ¸ÇÏ´Â ºê¶ó¿ìÀúµé Áß¿¡¼ XHRÀ» Áö
¿øÇÏÁö ¾Ê´Â ºê¶ó¿ìÀú´Â °ÅÀÇ ¾øÀ»Á¤µµ·Î ´ëºÎºÐÀÇ ºê¶ó¿ìÀúµéÀº ÇöÀç XHR À» Áö¿øÇÏ°í ÀÖ´Ù.
ajax ±¸ÇöÀÇ ½ÃÀÛÀº XHR °´Ã¼ÀÇ »ý¼º¿¡¼ ½ÃÀÛÇÑ´Ù.
XHR Àº W3C ÀÇ Ç¥ÁØÀÌ ¾Æ´Ï¹Ç·Î, ÀÎÅͳÝÀͽºÇ÷ξ¼´Â ActiveX Component Çü½ÄÀ¸·Î ±¸ÇöµÇ¾ú°í, ±×
¹Û¿¡ ´Ù¸¥ ºê¶ó¿ìÀúµé(FireFox, Safari, Opera)Àº native javascript °´Ã¼·Î ±¸ÇöµÇ¾ú´Ù. ÀÌ·± Â÷ÀÌÁ¡À» °í
·ÁÇؼ XHR °´Ã¼¸¦ ¾ò¾î¿À´Â ÀÚ¹Ù½ºÅ©¸³Æ® Äڵ带 ´ÙÀ½°ú °°ÀÌ ÀÛ¼ºÇÒ ¼ö ÀÖ´Ù.
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
window.ActiveXObject ´Â ActiveXObject¸¦ Áö¿øÇÏ´Â ºê¶ó¿ìÀú¶ó¸é ¿ÀºêÁ§Æ®¸¦ ¸®ÅÏÇÏ°í ±×·¸Áö ¾Ê´Ù¸é
null¸¦ ¸®ÅÏÇÏ°Ô µÈ´Ù. µû¶ó¼ ¿ÀºêÁ§Æ®°¡ Á¸ÀçÇϸé if ±¸¹®Àº true ¸¦ ¹ÝȯÇÏ°í xmlHttp °ªÀº
ActiveXObject °´Ã¼°¡ ÇÒ´çµÇ¾îÁø´Ù. if ±¸¹®ÀÌ false ¸¦ ¹ÝȯÇϸé else if ±¸ºÐÀ¸·Î À̵¿ÇÏ¿© xmlHttp °ª
Àº navtive javascript °´Ã¼°¡ ÇÒ´çµÉ °ÍÀÌ´Ù.
µû¶ó¼ À§ Äڵ带 ÀÌ¿ëÇÏ¸é ºê¶ó¿ìÀú°¡ ´Ù¸£´õ¶óµµ ÇϳªÀÇ ¸Þ¼Òµå·Î XHR °´Ã¼¸¦ »ý¼ºÇÏ¿© »ç¿ëÇÒ ¼ö ÀÖ
´Ù.
±×·±µ¥ ¿Ö ÀÚ¹Ù½ºÅ©¸³Æ®Àϱî? ºñ½ÁÇÑ ³ðÀ¸·Î VBScrptµµ Àִµ¥ ¸»ÀÌ´Ù. ¿©±â¼ cross-browser(ºê¶ó¿ìÀú
°¡ ´Þ¶óµµ ½ÇÇàÇßÀ»¶§ ¿¡·¯¾øÀÌ °°Àº °á°ú°¡ ³ª¿Àµµ·Ï ±¸ÇöÇØ¾ß ÇÏ´Â ÄÚµù ¹æ½Ä)¸¦ °í·ÁÇØ ºÁ¾ß ÇÑ´Ù.
Ajax ¿¡¼ Á¶Â÷ IE ¿¡¼´Â Àß ±¸µ¿µÇ°í ³ª¸ÓÁö ºê¶ó¿ìÀú¿¡¼´Â ¾ÈµÇ´Â Å°íÀû ÄÚµù¹æ½Ä¿¡¼´Â ÀÌÁ¦ ¹þ¾î
³ªº¸ÀÚ. ÀÚ¹Ù½ºÅ©¸³Æ®´Â ÇöÁ¸ÇÏ´Â °ÅÀÇ ¸ðµç ºê¶ó¿ìÀú¿¡¼ Áö¿ø¹Þ°í ÀÖ´Â ½ºÅ©¸³Æà ¾ð¾îÀÌ´Ù. ±×¸®°í ÀÚ¹Ù
½ºÅ©¸³Æ®(Netscape »ç¿¡¼ ¸¸µé¾úÀ½)´Â ÀÚ¹Ù(JAVA, ½ã¿¡¼ ¸¸µç ¾ð¾î)¿Í´Â ÀüÇô ´Ù¸£´Ù. ÀÚ¹Ù½ºÅ©¸³Æ®¿¡
´ëÇؼ °£´ÜÇÏ°Ô Âü°íÇÒ °ÍÀÌ ÀÖ´Ù¸é http://www.crockford.com/javascript/javascript.html ÀÌ ½ÎÀÌÆ®¿¡
Çѹø µé¾î°¡º¸ÀÚ.
À̹ø¿¡´Â XHR ¿ÀºêÁ§Æ®¿¡´Â ¾î¶² ¸Þ¼Òµå°¡ ÀÖ´ÂÁö »ìÆ캸ÀÚ.
void open(string method, string url, boolean asynch, string username, string password) : ¿äûÀ» ÃÊ
±âÈÇÑ´Ù. ÆĶó¹ÌÅÍÁß¿¡¼ method, url µÎ°³¸¸ ÇʼöÇ׸ñÀÌ°í ³ª¸ÓÁö´Â ¼±ÅÃÇ׸ñÀÌ´Ù. method ´Â POST,
GET, PUT 3°¡ÁöÁß Çϳª¸¦ »ç¿ëÇÏ¸é µÇ¸ç, url Àº ¿äûÇÏ°íÀÚ ÇÏ´Â ¼¹öÀÇ url ÀÌ´Ù. asynch ´Â ¿äûÀÌ
ºñµ¿±âÀÎÁö ¿©ºÎ¸¦ ÆÇ´ÜÇÏ´Â Ç׸ñÀÌ´Ù. ÀÔ·ÂÇÏÁö ¾ÊÀ¸¸é µðÆúÆ®·Î true °¡ ¼³Á¤µÇ¾î ¿äûÀº ºñµ¿±â·Î ó¸®
µÈ´Ù. false ·Î ¼³Á¤ÇÏ¸é ¿äûÀº µ¿±â·Î 󸮵DZ⠶§¹®¿¡ ¼¹ö¿¡¼ ÀÀ´äÀ» ¹ÞÀ»¶§±îÁö ÇÁ·Î¼¼½º´Â ±â´Ù¸®°Ô
µÈ´Ù. »ç½Ç XHR À» »ç¿ëÇÏ´Â °¡Àå Å« ÀÌÁ¡ÁßÀÇ ÇϳªÀÎ ºñµ¿±â 󸮸¦ À§Çؼ´Â asynch Ç׸ñÀ» true ·Î
¼³Á¤Çؼ »ç¿ëÇØ¾ß ÇÑ´Ù. false ¸¦ ¼³Á¤ÇÑ´Ù¸é XHR À» »ç¿ëÇÏ´Â ÀÌÁ¡ÀÌ ±×¸¸Å ÁÙ¾îµç´Ù.
void send(content) : ½ÇÁúÀûÀ¸·Î ¿äûÀ» ¼¹ö·Î º¸³½´Ù. ¿äûÀÌ ºñµ¿±âÀ̸é ÀÌ ¸Þ¼Òµå´Â ¹Ù·Î ¸®ÅϵÇÁö¸¸
¿äûÀÌ µ¿±âÀÌ¸é ¼¹ö¿¡¼ ÀÀ´äÀ» ¹ÞÀ»¶§±îÁö °è¼Ó ´ë±âÇÑ´Ù. content ´Â ¼±ÅûçÇ×À̸ç, DOM °´Ã¼(XML
°´Ã¼)À̰ųª input stream, string °ªÀ¸·Î ¼³Á¤ÇÒ ¼ö ÀÖÀ¸¸ç HttpRequest body ÀÇ ÇÑ ºÎºÐÀ¸·Î ¼¹ö·Î Àü
´ÞµÈ´Ù. content ¿¡ °ªÀ» ³Ñ±â·Á¸é open() ¸Þ¼Òµå´Â ¹Ýµå½Ã POST ·Î ¼³Á¤ÇØ¾ß Çϸç, GET ¹æ½ÄÀ¸·Î ¿äû
ÇÏ·Á¸é null À» ¼³Á¤ÇÏ¸é µÈ´Ù.
open(), send() ¸Þ¼Òµå°¡ °¡Àå ¸¹ÀÌ »ç¿ëµÇ´Â ¸Þ¼ÒµåµéÀÌ´Ù. ³ª¸ÓÁö ¸Þ¼Òµå¿¡ ´ëÇؼµµ ¾Ë¾Æº¸ÀÚ.
void setRequestHeader(string header, string value) : header ¿¡ ÇØ´çÇÏ´Â value °ªÀ¸·Î HttpRequest
Çì´õ¿¡ °ªÀ» ¼³Á¤ÇÏ´Â ¸Þ¼Òµå·Î½á, ¹Ýµå½Ã open() ¸Þ¼Òµå ´ÙÀ½¿¡ À§Ä¡ÇØ¾ß ÇÑ´Ù.
void abort() : ¿äûÀ» ÁßÁöÇÑ´Ù.
string getAllResponseHeaders() : ¿äû¿¡ ´ëÀÀµÇ´Â ÀÀ´äÀÇ Çì´õÁ¤º¸¸¦ ¸®ÅÏÇÑ´Ù. Áï, Content-Length,
Date, URI µîÀ» Æ÷ÇÔÇÏ´Â Çì´õÁ¤º¸¸¦ string Çü½ÄÀ¸·Î ¹ÝȯÇÑ´Ù.
string getResponseHeader(string header) : ÀÀ´äÀÇ Çì´õÁ¤º¸Áß¿¡¼ header ¿¡ ´ëÀÀµÇ´Â °ªÀ» string Çü
½ÄÀ¸·Î ¹ÝȯÇÑ´Ù.
À̹ø¿¡´Â XHR ÀÇ ¼Ó¼ºÁß¿¡¼ Áß¿äÇÑ ¸î°¡Áö¸¦ ¾Ë¾Æº»´Ù.
onreadystatechange : ÀÚ¹Ù½ºÅ©¸³Æ® ÄݹéÇÔ¼ö(funtion pointer)¸¦ ÀúÀåÇÑ´Ù. ÄݹéÇÔ¼ö´Â readyState °ªÀÌ
º¯ÇÒ¶§ ¸¶´Ù È£ÃâµÈ´Ù. ¿äûÀÌ ¼¹ö·Î º¸³»Áö¸é readyState ´Â 5°¡Áö ¼ýÀÚ°ªÀ¸·Î °è¼Ó º¯È°¡ ÀϾ°Ô µÈ
´Ù.
readyState : ¿äûÀÇ »óŸ¦ ÀǹÌÇÑ´Ù.(0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 =
complete)
responseText : ¼¹öÀÇ ÀÀ´äÀ» string Çü½ÄÀ¸·Î ³ªÅ¸³½´Ù. ´Ü¼ø text¸¦ innerHTML ¼Ó¼ºÀ¸·Î Ç¥ÇöÇϱ⿡
´Â ¾Ë¸ÂÁö¸¸ ³í¸®ÀûÀ¸·Î ÆĽÌÇϰųª µ¿ÀûÀ¸·Î ÆäÀÌÁö ÄÁÅÙÃ÷¸¦ »ý¼ºÇϱâ´Â Èûµé´Ù.
responseXML : ¼¹öÀÇ ÀÀ´äÀ» XML ·Î ³ªÅ¸³½´Ù. ÀÌ ¼Ó¼ºÀº DOM °´Ã¼·Î ÆĽÌÇÒ ¼ö ÀÖ´Ù.
status : ¼¹ö·ÎºÎÅÍÀÇ HTTP »óÅÂÄÚµåÀÌ´Ù.(¿¹ 200(OK), 404(NOT Found), 202(°á°ú °ªÀÌ ¾øÀ» ¶§)µîµî)
statusText : HTTP »óÅÂÄڵ忡 ´ëÇÑ ÅؽºÆ® °ªÀÌ´Ù.(¿¹ OK, NOT Found µîµî)
À̹ø¿¡´Â ¾ÆÁÖ °£´ÜÇÑ ¿¹Á¦¸¦ ½ÇÇàÇØ º¸ÀÚ. ¾Æ·¡ Äڵ带 ½ÇÇàÇØ º¸·Á¸é simpleRequest.html À̸§ÀÇ html
ÆÄÀÏ·Î ¸¸µç ÈÄ¿¡ ¹Ýµå½Ã À¥¼¹ö¿¡¼ ½ÇÇàÇØ¾ß ÇÑ´Ù. ¼Ò½º´Â ´Ù¿î¹Þ¾Æ¼ ½ÇÇàÇØ º¼ ¼öµµ ÀÖ´Ù.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>
</form>
</body>
</html>
<2-1 simpleRequest.html>
Hello from the server!
<2-2 simpleResponse.xml ÀÇ ³»¿ë>
À§ Äڵ带 ½ÇÇàÇØ º¸¸é ¾Ë°ÚÁö¸¸ url ´ë½Å <2-2> ¿Í °°Àº ³»¿ëÀ» ´ã°í ÀÖ´Â simpleResponse.xml ÆÄÀÏÀ»
¿äûÇÑ´Ù. µÇµµ·Ï ´Ü¼øÇÏ°Ô XHR ÀÇ ±¸µ¿¿ø¸®¸¦ ÀÌÇØÇÏ´Â ¸ñÀû¿¡¼ ¼¹ö¿¡ ¿äûÀ» ÇÏ°í ÀÀ´äÀ» ¹Þ´Â°Í ó
·³ ²Ù¸ìÀ» »ÓÀÌ´Ù. À§ ¿¹Á¦ÀÇ ±¸µ¿¼ø¼´Â ¾Æ·¡¿Í °°´Ù.
<2-3 Start Basic Asynchronous Request ¹öÆ°>
ù°, »ç¿ëÀÚ°¡ ±×¸² <2-3> ¹öÆ°À» Ŭ¸¯Çϸé À̺¥Æ®°¡ ¹ß»ýÇؼ startRequest() ¸Þ¼Òµå°¡ ½ÇÇàµÈ´Ù.
µÑ°, XHR °´Ã¼°¡ »ý¼ºµÇ°í handleStateChange() ÄݹéÇÔ¼ö°¡ XHR °´Ã¼ÀÇ onreadystatechange ¼Ó¼º¿¡
ÀúÀåµÈ´Ù.
¼Â°, GET/ºñµ¿±â ¹æ½ÄÀ¸·Î ¼¹ö¿¡ ¿äûÀ» º¸³»´Âµ¥, À̶§ XHR °´Ã¼´Â ¼¹öÀÇ simpleResponse.xml ÆÄÀÏ
À» ¿ä±¸ÇÑ´Ù.
³Ý°, ¼¹ö´Â Ajax Ŭ¶óÀ̾ðÆ®ÀÇ ¿äû url ÀÎ simpleResponse.xml À» ã¾Æ¼ ÀÐÀº ÈÄ¿¡ string Çü½ÄÀ¸·Î
XHR °´Ã¼·Î º¸³½´Ù.
´Ù¼¸Â°, Äݹé¸Þ¼Òµå´Â XHR ÀÇ state °¡ º¯ÇÒ¶§ ½ÇÇàµÇ¹Ç·Î readyState=4 ÀÌ°í stat=200 À϶§ °á°ú°ªÀ»
ºê¶ó¿ìÀú¿¡ º¸³½´Ù. °á°ú ȸéÀº ¾Æ·¡ ±×¸²°ú °°´Ù.
<2-4 simpleRequest.html °á°ú>
Á÷Á¢ ½ÇÇàÇغ¸¸é ¾Ë°ÚÁö¸¸ Internet Explore ¹× FireFox ¿¡¼ °°Àº °á°ú°ªÀ» ¾ò´Â´Ù.
À̹øÀå¿¡¼ ¸¶Áö¸·À¸·Î »ìÆ캼 °ÍÀº Ajax ÀÇ º¸¾È¹®Á¦ÀÌ´Ù. XHR °´Ã¼´Â ¿äûÇÒ ¼ö ÀÖ´Â ¼¹öÀÇ ¸®¼Ò½º
url ¿¡ Á¦ÇÑÀÌ °É·ÁÀÖ´Ù. Áï, Á¢±Ù ÇÒ ¼ö ÀÖ´Â ¼¹ö ¸®¼Ò½º url Àº XHR °´Ã¼°¡ Á¸ÀçÇÏ´Â µµ¸ÞÀο¡ ÀÖ¾î¾ß
ÇÑ´Ù´Â Àǹ̴Ù. ´Ù¸¥ ¸»·Î ¹Ù²Ù¸é XHR °´Ã¼¿Í ¼¹ö ÇÁ·Î±×·¥Àº °°Àº µµ¸ÞÀο¡ ÀÖ¾î¾ß¸¸ ÇÑ´Ù. ±×·¸´Ù¸é
XHR °´Ã¼°¡ ÀڱⰡ ¼ÓÇØÀÖ´Â µµ¸ÞÀÎÀÌ ¾Æ´Ñ ±× ¹Û¿¡ ÀÖ´Â ¼¹öÀÇ url À» È£ÃâÇÏ¸é ¾î¶»°Ô µÉ±î? ÀÌ°ÍÀº
ºê¶ó¿ìÀú ¸¶´Ù Â÷ÀÌ°¡ ÀÖ´Ù. IE ÀÇ °æ¿ì¿¡´Â alert âÀ» ¶ç¿ì¸é¼ º¸¾È À§ÇØ¿ä¼Ò°¡ ÀÖÀ¸´Ï °è¼Ó ÁøÇàÇÒ °Í
ÀÎÁö ¾Æ´ÑÁö¸¦ »ç¿ëÀÚ°¡ ÆÇ´ÜÇÒ ¼ö ÀÖ°Ô µÇ¾îÀÖ°í, FireFox ÀÇ °æ¿ì´Â ¿¡·¯¸¦ º¸¿©ÁÖ¸ç ¿äûÀÚü¸¦ ºê¶ó¿ì
Àú¿¡¼ Â÷´ÜÇØ ¹ö¸°´Ù.
Ajax ±¸µ¿¹æ½ÄÀÌ ÀϹÝÀûÀÎ À¥ÀÇ ¹æ½Ä°ú´Â ¸¹ÀÌ ´Ù¸£°í ¶ÇÇÑ ±× ³»ºÎ·ÎÁ÷À» ÀÌÇØÇϴµ¥ ¾î·Á¿òÀÌ ÀÖÀ» ¼ö
µµ ÀÖ´Ù. ÇÏÁö¸¸ XHR ÀÇ ÁÖ¿ä ¸Þ¼Òµå¿Í ÁÖ¿ä ¼Ó¼ºÀ» ÀÌÇØÇÏ´Â µ¥´Â À̱ÛÀ» ÅëÇؼ º¸´Ù ½±°Ô Á¢±ÙÇÒ ¼ö
ÀÖÀ¸¸®¶ó ±â´ëÇØ º»´Ù.
Ãâó: http://uip80.tistory.com/entry/XMLHttpRequest-¿ÀºêÁ§Æ®-»ç¿ëÇϱâ?category=199706 [¿©¸íÀÇÁý]