Ajax (prototype)을 이용한 XML 통신

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

2008. 10. 11. 13:39 프로그래밍 ------------/코드(프로그래밍)

php와 Javascript를 이용하여 XML 통신을 하는 법은 이미 많은 예시가 있다.
이 글은 공부목적으로 개인적으로 정리한 것이다.

Javascript에 있는 XHR(XMLHttpRequest)를 이용하여 php에서 XML을 동적으로 받는 프로그램을 간단하게 만들었다.

특별히 Javascript에서 XHR을 구현을 위해서는 각종 브라우져마다 다르게 만들어야하는 번거로움이 있어서 나는 prototype.js 라는 Javascript 프레임워크에서 제공하는 XHR 기능을 이용했다.

아주 쉬운 예제이기 때문에 자세한 설명은 생략한다.(사실 귀찮기 때문에.. ㅋ)

index.html (Language : html4strict)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>prototype을 이용한 Ajax 테스트</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function request(group)
{
//alert(group);
new Ajax.Request(
"http://192.168.0.200/~jidolstar/testXML.php",
{
asynchronous:true,
method:"get",
parameters: {"group": group} ,
onSuccess:function(request)
{
var xmlData = request.responseXML;
var members = new Array();
var memberNude = xmlData.getElementsByTagName("member");
var nameNode = xmlData.getElementsByTagName("name");
var companyNode = xmlData.getElementsByTagName("company");
var telnumNode = xmlData.getElementsByTagName("telnum");
var memberCount = memberNude.length;
for ( i=0; i < memberCount; i++ )
{
var name = nameNode[i].childNodes[0].nodeValue;
var company = companyNode[i].childNodes[0].nodeValue;
var telnum = telnumNode[i].childNodes[0].nodeValue;
members.push( {"name":name, "company":company, "telnum":telnum} );
}

var str="";
for ( i=0; i < members.length; i++ )
{
str += "<H1>member : " + (i+1) + "</H1>";
str += "<div>name : " + members[i].name + "</div>";
str += "<div>company : " + members[i].company + "</div>";
str += "<div>telnum : " + members[i].telnum + "</div>";
}
//document.getElementById["divResult").innerHTML = str;
$("divResult").innerHTML = str;

},
onFailure:function()
{
$("divResult").innerHTML = "실패";
}
});
}

</script>
</head>
<body onload="request(document.frm.groupSelect.value)" >
<form name="frm">
<select name="groupSelect" onchange="request(document.frm.groupSelect.value)">
<option value="1">1 Group</option>
<option value="2">2 Group</option>
</select>
</form>
<div id="divResult"></div>
</body>
</html>

textXML.php (Language : php)

<?php
$group = $_GET[group];
header("Content-type: text/xml;charset=utf-8");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

switch($group)
{
case 1:
$xml="<members>
<member>
<name>지돌스타</name>
<company>wecon</company>
<telnum>010-2238-0321</telnum>
</member>
<member>
<name>mira</name>
<company>wecon2</company>
<telnum>010-2222-2333</telnum>
</member>
<member>
<name>mira</name>
<company>wecon2</company>
<telnum>010-2222-2333</telnum>
</member>
</members>";
break;

case 2:
$xml="<members>
<member>
<name>mikoung</name>
<company>uranos</company>
<telnum>010-233-3333</telnum>
</member>
<member>
<name>uram</name>
<company>uranos2</company>
<telnum>010-1111-2323</telnum>
</member>
<member>
<name>deokgon</name>
<company>uranos3</company>
<telnum>010-234-9999</telnum>
</member>
</members>";

break;

default:

break;
}

echo iconv("CP949","UTF-8", $xml);
?>

PHP에서 inconv("CP949","UTF-8",$xml);은 한글을 UTF-8형태로 전송하기 위한 것이다. 서버에서 UTF-8을 지원하지 않는다면 이렇게 해야한다. 그래야 UTF-8로 보낼시 한글이 깨지지 않는다

posted by angelyr

멈추지않아

Tag

Notice

Recent Post

Recent Comment

Archive

My Link

calendar

Category