jQuery Ajax - jQuery.get() 메서드 (XML파일 로드하기)
.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:25 |
"새 항목 추가"로 "XML" 형식의 파일인 [Company.xml]과 "Html" 형식의 파일인 [jQuery.get.htm]을 만들고 각각 코드를 아래와 같이 작성한다.
[Company.xml]
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Company CompanyType="Private">
<CompanyName>닷넷코리아</CompanyName>
<CompanyNumber>1234</CompanyNumber>
<CompanyAddress>서울</CompanyAddress>
<Name>레드플러스</Name>
</Company>
-------------------------------------------------------------------------------------
[jQuery.get.htm]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XML파일 로드하기</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$.get('04.Company.xml', function (data) {
$('#ctlGrid').empty();
$(data).find('Company').each(function () {
var $entry = $(this); // 현재 시점의 레코드셋
// 특성(Attribute)을 읽어오기
var html = "<div>" + $entry.attr('CompanyType') + "</div>"; // Private
// 하위 엘리먼트 읽어오기
html += "<div>" + $entry.find("CompanyName").text() + "</div>"; // 닷넷코리아
$('#ctlGrid').append($(html));
});
});
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="회사소개" />
<div id="ctlGrid"></div>
</body>
</html>
-------------------------------------------------------------------------------------
[실행결과]
--> 첫 화면. 아래그림에서 '회사소개'버튼을 마우스로 클릭하면...
--> 아래그림과 같이 '회사소개'버튼 아래에 텍스트가 출력된다.
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기 (0) | 2009.11.13 |
|---|---|
| jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행 (0) | 2009.11.13 |
| jQuery Ajax - jQuery.getScript() 메서드 (하나의 완성된 자바스크립트 파일을 동적 로드/실행) (0) | 2009.11.13 |
| JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드) (0) | 2009.11.13 |
| jQuery Ajax - jQuery.load() 메서드 (동적으로 원격 페이지 로드) (0) | 2009.11.13 |