티스토리 뷰

IT 이야기/프로그래밍

AJAX 예제. XML 파일 읽어서 출력하기

하늘과 나b 2010. 8. 15. 20:56

AJAX 이야기

AJAX 예제. XML 파일 읽어서 출력하기


이 예제는
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_xml에서 퍼온 예제입니다.


Get XML data 버튼을 누르면 XML 파일의 정보를 화면에 출력합니다. 

1. ajax_ex2.html 파일 만들기

<html>
<head>
<script type="text/javascript">
	function loadXMLDoc(url)
	{
	// XMLHttpRequest 객체 생성
	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById('A1').innerHTML=xmlhttp.status;
			document.getElementById('A2').innerHTML=xmlhttp.statusText;
			document.getElementById('A3').innerHTML=xmlhttp.responseText;
		}
	}

	xmlhttp.open("GET",url,true);

	xmlhttp.send();
	}
</script>
</head>

<body>

<h2>Retrieve data from XML file

<p>Status:

<p>Status text:

<p>Response:


<button onclick="loadXMLDoc('note.xml')">Get XML data

</body>
</html>

2. note.xml 파일 만들기

<xml version="1.0" encoding="ISO-8859-1"?> 
<!-- Edited by XMLSpy?--> 

<note> 
    <to>Tove</to> 
    <from>Jani</from> 
    <heading>Reminder</heading> 
    <body>Don't forget me this weekend!</body> 
</note>


실행해서 Get XML data 버튼을 누르면 아래와 같이 보이게 됩니다.  




'IT 이야기 > 프로그래밍' 카테고리의 다른 글

AJAX #1. AJAX 소개(AJAX Introduction)  (0) 2010.08.16
AJAX 예제(AJAX Example)  (0) 2010.08.16
HTML 그 두번째 이야기  (0) 2010.08.15
HTML 글씨에 효과주기  (0) 2010.08.15
AJAX 예제. 파일 읽어서 화면에 출력하기  (0) 2010.08.15
[Javascript] 마우스 금지 소스  (0) 2010.08.15
[HTML] HTML5 문서타입(doctype)  (0) 2010.08.09
[Javscript] innerHTML 예제  (2) 2010.08.09
[Javascript] 즐겨찾기 추가 스크립트 소스  (0) 2010.08.09
[Javascript] GetElementById 예제  (0) 2010.08.09
공유하기 링크
댓글