{"id":2914,"date":"2010-05-30T03:10:41","date_gmt":"2010-05-29T18:10:41","guid":{"rendered":"http:\/\/hyunsik.me\/wordpress\/?p=2914"},"modified":"2015-01-31T00:58:20","modified_gmt":"2015-01-30T15:58:20","slug":"jquery%ec%99%80-prototype%ec%9d%84-%ec%9d%b4%ec%9a%a9%ed%95%9c-ajax-%ea%b5%ac%ed%98%84","status":"publish","type":"post","link":"http:\/\/hyunsik.me\/wordpress\/?p=2914","title":{"rendered":"jQuery\uc640 prototype\uc744 \uc774\uc6a9\ud55c AJAX \uad6c\ud604"},"content":{"rendered":"

\"\"<\/p>\n

\ud604\uc2dd\ub85c\uadf8\uc758 100\ubc88\uc9f8 \ud3ec\uc2a4\ud2b8\uc785\ub2c8\ub2e4.
\n100\uac1c\uc758 \ud3ec\uc2a4\ud2b8\ub97c \uc791\uc131\ud55c\ub2e4\ub294\uac8c \uc5b4\ub835\uc9c0 \uc54a\uc744 \uac83\uc774\ub77c\uace0 \uc0dd\uac01\ud588\uc5c8\ub294\ub370
\n\uaf64 \ub9ce\uc740 \uc2dc\uac04\uc774 \uac78\ub838\ub358 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

100\ubc88\uc9f8\uc784\uc744 \uac00\ubccd\uac8c \ucd95\ud558\ud558\uba70 \ud3ec\uc2a4\ud305\uc744 \uc2dc\uc791\ud569\ub2c8\ub2e4.
\n\uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc758 \uc8fc\uc81c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cd\uc778
\n jQuery<\/span><\/span>\uc640 <\/span>prototype<\/span>\uc744 \uc774\uc6a9\ud55c <\/span>A<\/span>JAX(Asynchronous JavaScript and XML)<\/span> \uc785\ub2c8\ub2e4.<\/p>\n

AJAX\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \uc704\ud0a4\ud53c\ub514\uc544\uc758 \ub9c1\ud06c\ub85c \ub300\uc2e0\ud558\uaca0\uc2b5\ub2c8\ub2e4.
\nhttp:\/\/ko.wikipedia.org\/wiki\/Ajax<\/a><\/p>\n

AJAX\ub97c \ud504\ub808\uc784\uc6cd \uc5c6\uc774 \uc21c\uc218\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud574\uc11c \ub9cc\ub4e4 \uacbd\uc6b0,
\n\ud504\ub85c\uadf8\ub798\uba38\ub294 \ubcf5\uc7a1\ud55c \ucf54\ub4dc\uc5d0 \uc758\ud574 \ubd80\ub2f4\uc744 \uac00\uc9c8 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/p>\n

\ubb3c\ub860 \uc9c1\uc811 AJAX\ub97c \ud568\uc218\ud654, \ud074\ub798\uc2a4\ud654 \ud558\uc5ec \uad6c\ud604\ud560 \uc218 \uc788\uc73c\ub098
\njQuery \ub098 prototype \uc640 \uac19\uc774 \ub9ce\uc740 \uc804\ubb38\uac00\ub4e4\uc774 \ucc38\uc5ec\ud55c \ub110\ub9ac \uc54c\ub824\uc9c4 \ud504\ub808\uc784\uc6cd\uc744 \uc0ac\uc6a9\ud558\uac8c \ub418\uba74<\/span>
\n\uc6f9 \ud45c\uc900\uc744 \uc0dd\uac01\ud558\uc9c0 \uc54a\uace0, AJAX\ub97c \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc744 \ubfd0\ub9cc \uc544\ub2c8\ub77c
\n\ud504\ub808\uc784\uc6cd\uc758 \uc5ec\ub7ec\uac00\uc9c0 \ud655\uc7a5\uae30\ub2a5, \ud655\uc7a5 \ud50c\ub7ec\uadf8\uc778\uc744 \uc0ac\uc6a9\ud558\uc5ec
\n \uc6f9 \uc0ac\uc774\ud2b8\ub97c <\/span>\ubcf4<\/span>\ub2e4 \uc9c4\ubcf4\uc801\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ub429\ub2c8\ub2e4.<\/span><\/p>\n

\ud3ec\uc2a4\ud305\uc758 \ubaa9\uc801\uc740 jQuery\uc640 prototype, EXT, dojo, YUI, Jindo \ub4f1\uc758 js\ud504\ub808\uc784\uc6cd\uc744
\n\uc0ac\uc6a9\ud574\ubcf4\uc790 \ub77c\ub294 \uc815\ub3c4\uc785\ub2c8\ub2e4.<\/p>\n

\ud504\ub808\uc784\uc6cd \uc5c6\ub294 \uc0c1\ud0dc\uc5d0\uc11c\uc758 AJAX \uad6c\ud604 \ubc29\uc2dd\uacfc
\nprototype, jQuery\ub97c \uc774\uc6a9\ud55c AJAX \uad6c\ud604\ubc29\uc2dd\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.
\nprototype\uacfc jQuery\ub97c \uc774\uc6a9\ud55c AJAX \uad6c\ud604\uc740 \ub85c\uc6b0 \ub808\ubca8 \uc2a4\ud0c0\uc77c\ub85c \ud558\ub098\uc529\ub9cc \ub2e4\ub904\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.
\n
\n1. \ud504\ub808\uc784\uc6cd \uc5c6\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\uc758 AJAX<\/strong><\/span><\/p>\n

<script type=\"text\/javascript\">\r\n <\/span>var xmlHttp = false;\r\n <\/span>function<\/span> ajax() {\r\n <\/span>var h_query;\r\n <\/span>var url = ''; \/\/ URL\r\n <\/span>var pars = ''; \r\n <\/span>\/*@cc_on @*\/\r\n <\/span>\/*@if (@_jscript_version >= 5)\r\n <\/span>try {\r\n <\/span>xmlhttp = new ActiveXObject(\"Msxml2.XMLHTTP\");\r\n <\/span>} catch (e) {\r\n <\/span>try {\r\n <\/span>xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n <\/span>} catch (e2) {\r\n <\/span>xmlhttp = false;\r\n <\/span>}\r\n <\/span>}\r\n <\/span>@end @*\/\r\n <\/span>if (!xmlhttp && typeof XMLHttpRequest != 'undefined')\r\n <\/span>{\r\n <\/span>xmlhttp = new XMLHttpRequest();\r\n <\/span>}\r\n <\/span>xmlhttp.onreadystatechange = ajax_result;\r\n <\/span>var url = url + \"?\" + pars;\r\n <\/span>xmlhttp.open('GET', url, true);\r\n <\/span>xmlhttp.setRequestHeader('Content-Type', 'application\/x-www-form-urlencoded; charset=UTF-8');\r\n <\/span>xmlhttp.send(null);\r\n <\/span>}\r\n <\/span>function<\/span> ajax_result() {\r\n <\/span>if(xmlHttp.readyState == 4)\r\n <\/span>{\r\n <\/span>alert(xmlHttp.responseText);\r\n <\/span>}\r\n <\/span>}\r\n <\/span><\/script><\/pre>\n
\ubcf4\ud1b5 \uc21c\uc218\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub85c\ub294 \ub300\ub7b5\uc801\uc73c\ub85c \uc704\uc640 \uac19\uc740 \ubc29\ubc95\uc73c\ub85c AJAX\ub97c \uad6c\ud604\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
\ube0c\ub77c\uc6b0\uc800\uc758 \uc0c1\ud0dc\uc5d0 \ub530\ub978 xmlHttp\uc758 \uc0dd\uc131\uc5d0 \ub300\ud55c \ubd80\ubd84\uacfc \uac12\uc744 \ub0a0\ub9ac\ub294 \ubd80\ubd84\uae4c\uc9c0\uac00
\najax() \ud568\uc218\uc758 \uc5ed\ud560\uc774 \ub418\uaca0\uace0, ajax_result() \ud568\uc218\uc5d0
\nxmlhttp.readyState\uc758 \uac12\uc740 \ub2e4\uc74c\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/p>\n
0 : xmlhttp \uc0dd\uc131
\n1 : xmlhttp \uc5f4\uae30
\n2 : \uc694\uccad \uc2dc\uc791
\n3 : \uc218\uc2e0 \uc911
\n4 : \uc218\uc2e0\uc644\ub8cc<\/p>\n
<script type=\"text\/javascript\">\r\nfunction<\/span> ajax() {\r\n <\/span>var url = \"\"; \/\/ URL\r\n <\/span>var pars = \"\"; \r\n <\/span>var httpObj = new Ajax.Request(\r\n <\/span>url,\r\n <\/span>{\r\n <\/span>method: \"get\",\r\n <\/span>parameters: pars, <\/span>\r\n <\/span>onComplete: function(msg) {\r\n <\/span>alert(msg);\r\n <\/span>} <\/span>\r\n <\/span>});\r\n}\r\n<\/script><\/pre>\n
prototype\uc758 AJAX \uad00\ub828 \ubc29\uc2dd \uc911
\nAjax.Request \ucabd\ub9cc \ub2e4\ub8e8\uc5b4\ubd24\uc2b5\ub2c8\ub2e4.<\/p>\n
post \ubc29\uc2dd\uc73c\ub85c \uac12\uc744 \ub118\uae38 \uacbd\uc6b0,
\nForm.serialize(\ud3fcID) \ub85c Form\uac12\uc744 \uc744 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n( \uc608) Form.serialize($(‘formid’)) )<\/p>\n
\uc608\uc804\uc5d0 Form.serialize \ub97c \uc54c\uc544\ub0b4\ub294\ub370 \ud55c\ucc38 \uace0\uc0dd\ud55c \uae30\uc5b5\uc774 \uc788\ub124\uc694.
\n\uc544\ub798\uc758 \uc8fc\uc18c\uc5d0\uc11c \ub354 \uc790\uc138\ud55c \uc608\uc81c\uc640 \ud568\uaed8 protype\uc744 \uc0ac\uc6a9\ud55c
\n\ub2e4\uc591\ud55c AJAX \ubc29\uc2dd\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
<script type=\"text\/javascript\">\r\nfunction<\/span> ajax() {\r\n <\/span>var url = \"\"; \/\/ URL\r\n <\/span>var pars = \"\";\r\n <\/span>$.ajax({\r\n <\/span>type : \"get\",\r\n <\/span>url : url,\r\n <\/span>data : pars,\r\n <\/span>success :  <\/span>function(msg) {\r\n <\/span>alert(msg);\r\n <\/span>}\r\n <\/span>});\r\n}\r\n<\/script><\/pre>\n
jQuery\uc758 AJAX \uad00\ub828 \ubc29\uc2dd \uc911
\n$.ajax\ub97c \uc0ac\uc6a9\ud55c Low Level\uc758 \ucf54\ub529\uc774\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n
post \ubc29\uc2dd\uc73c\ub85c \uac12\uc744 \ub118\uae38 \uacbd\uc6b0,
\n$(\ud3fcID).seriallize() \ub85c Form\uac12\uc744 \uc744 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n( \uc608) $(‘#formid’).serialize())<\/p>\n
prototype\uc758 Form.serialize \ub9cc\ud07c\uc740 \uc544\ub2c8\uc5c8\uc9c0\ub9cc,
\n\uc54c\uc544\ub0b4\ub294\ub370 \uc870\uae08 \uace0\uc0dd\ud55c \uae30\uc5b5\uc774 \uc788\ub124\uc694.
\n
\n\"\"<\/a><\/p>\n
\uc774\ub807\uac8c \uc21c\uc218\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8, prototype, jQuery \uc5d0\uc11c\uc758
\nAJAX \uad6c\ud604 \ubc29\uc2dd\uc744 \ub2e4\ub8e8\uc5b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub300\uccb4\uc801\uc73c\ub85c \ub85c\uc6b0\ub808\ubca8\uc758 \ucf54\ub529\uc744 \uc54c\uc544 \ubcf4\uc558\uace0, API\ub97c \uacf5\ubd80\ud558\uc5ec \uc775\ud78c\ub2e4\uba74,
\n\ub354 \uc27d\uac8c AJAX\ub97c \uad6c\ud604\ud560 \uc218 \uc788\uc744 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
AJAX\ub97c \ud3ec\ud568\ud558\uc5ec \ud504\ub808\uc784\uc6cd\uc758 \ub2e4\uc591\ud55c \uae30\ub2a5\ub4e4\uc740
\n\uac01 \uc0ac\uc774\ud2b8\uc758 API \uad00\ub828 \ubb38\uc11c\ub4e4\uc744 \ucc38\uc870\ud574\uc8fc\uc138\uc694.
\njQuery : http:\/\/jquery.com\/<\/a>
\nprototype : http:\/\/www.prototypejs.org\/<\/a>
\ndojo : http:\/\/dojotoolkit.org\/<\/a>
\njindo : http:\/\/dev.naver.com\/projects\/jindo\/<\/a>
\nYUI : http:\/\/developer.yahoo.com\/yui\/<\/a>
\nEXT : http:\/\/www.extjs.com\/<\/a><\/p>\n
\uc11c\ud0dc\uc9c0 \uc2ec\ud3ec\ub2c8\uc758 \ud2f1\ud0c1\uc744 \ub4e4\uc73c\uba70 \ub9c8\uce58\uaca0\uc2b5\ub2c8\ub2e4.
\n\uc88b\uc740 \uc2dc\uac04 \ub418\uc2ed\uc2dc\uc624.
\n\uac10\uc0ac\ud569\ub2c8\ub2e4.
\n<\/embed><\/object><\/p>\n","protected":false},"excerpt":{"rendered":"
\ud604\uc2dd\ub85c\uadf8\uc758 100\ubc88\uc9f8 \ud3ec\uc2a4\ud2b8\uc785\ub2c8\ub2e4. 100\uac1c\uc758 \ud3ec\uc2a4\ud2b8\ub97c \uc791\uc131\ud55c\ub2e4\ub294\uac8c \uc5b4\ub835\uc9c0 \uc54a\uc744 \uac83\uc774\ub77c\uace0 \uc0dd\uac01\ud588\uc5c8\ub294\ub370 \uaf64 \ub9ce\uc740 \uc2dc\uac04\uc774 \uac78\ub838\ub358 \uac83 \uac19\uc2b5\ub2c8\ub2e4. 100\ubc88\uc9f8\uc784\uc744 \uac00\ubccd\uac8c \ucd95\ud558\ud558\uba70 \ud3ec\uc2a4\ud305\uc744 \uc2dc\uc791\ud569\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc758 \uc8fc\uc81c\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cd\uc778 jQuery\uc640 prototype\uc744 \uc774\uc6a9\ud55c AJAX(Asynchronous JavaScript and XML) \uc785\ub2c8\ub2e4. AJAX\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \uc704\ud0a4\ud53c\ub514\uc544\uc758 \ub9c1\ud06c\ub85c \ub300\uc2e0\ud558\uaca0\uc2b5\ub2c8\ub2e4. http:\/\/ko.wikipedia.org\/wiki\/Ajax AJAX\ub97c \ud504\ub808\uc784\uc6cd \uc5c6\uc774 \uc21c\uc218\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc774\uc6a9\ud574\uc11c \ub9cc\ub4e4 \uacbd\uc6b0, \ud504\ub85c\uadf8\ub798\uba38\ub294 \ubcf5\uc7a1\ud55c \ucf54\ub4dc\uc5d0 \uc758\ud574 \ubd80\ub2f4\uc744 \uac00\uc9c8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[1266,176,75],"tags":[49,914,919,907,118,808,806,812,913,910,906,813,921,923,908,915,242,163,912,911,916,918,922,917,909,119],"jetpack_featured_media_url":"","views":"","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2914"}],"collection":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2914"}],"version-history":[{"count":4,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2914\/revisions"}],"predecessor-version":[{"id":6780,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2914\/revisions\/6780"}],"wp:attachment":[{"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2914"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hyunsik.me\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\uc544\ub798\uc758 \uc8fc\uc18c\uc5d0\uc11c \ub354 \uc790\uc138\ud55c \uc608\uc81c\uc640 \ud568\uaed8 jQuery\ub97c \uc0ac\uc6a9\ud55c
\n$.get, $.post\uc640 \ud568\uaed8 \ub2e4\uc591\ud55c AJAX \ubc29\uc2dd\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\nhttp:\/\/api.jquery.com\/category\/ajax\/<\/a><\/p>\n
http:\/\/www.prototypejs.org\/api\/ajax<\/a>
\n
\n3. jQuery\uc640 \ud568\uaed8 \ud558\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\uc758 AJAX<\/span><\/strong><\/p>\n
\uc544\ub798 \ub450 \ud3ec\uc2a4\ud2b8\uc758 \uc608\uc81c\uac00 \uc704\uc640 \uac19\uc740 \ubc29\ubc95\uc73c\ub85c \uad6c\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
\n‘\uc78a\uc9c0\ub9d0\uc790’ \ucc28\uc6d0\uc5d0\uc11c\uc758 \uc21c\uc218\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub529\uc774\uc5c8\uc2b5\ub2c8\ub2e4.
\n[OPEN API]DAUM \uc9c0\ub3c4 API \ud14c\uc2a4\ud2b8<\/a>
\n[OPEN API]DAUM \uc8fc\uc18c-\uc88c\ud45c API + GOOGLE MAP API<\/a>
\n
\n2. prototype\uacfc \ud568\uaed8 \ud558\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\uc758 AJAX<\/strong><\/span><\/p>\n