공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

xml - 파싱1

serpiko 2013. 10. 13. 22:51

XML Parsing with jQuery

 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
32
33
34
35
36
37
38
39
40
41
42
 
<?xml version="1.0" encoding="utf-8" ?>
<RecentTutorials>
  <Tutorial author="The Reddest">
    <Title>Silverlight and the Netflix API</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>Silverlight 2.0</Category>
      <Category>Silverlight</Category>
      <Category>C#</Category>
      <Category>XAML</Category>
    </Categories>
    <Date>1/13/2009</Date>
  </Tutorial>
  <Tutorial author="The Hairiest">
    <Title>Cake PHP 4 - Saving and Validating Data</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>CakePHP</Category>
      <Category>PHP</Category>
    </Categories>
    <Date>1/12/2009</Date>
  </Tutorial>
  <Tutorial author="The Tallest">
    <Title>Silverlight 2 - Using initParams</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>Silverlight 2.0</Category>
      <Category>Silverlight</Category>
      <Category>C#</Category>
      <Category>HTML</Category>
    </Categories>
    <Date>1/6/2009</Date>
</Tutorial>
  <Tutorial author="The Fattest">
    <Title>Controlling iTunes with AutoHotkey</Title>
    <Categories>
      <Category>Tutorials</Category>
      <Category>AutoHotkey</Category>
    </Categories>
    <Date>12/12/2008</Date>
  </Tutorial>
</RecentTutorials>

 

AJAX 요청

1
2
3
4
5
6
7
8
9
 
$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "jquery_xml.xml",
    dataType: "xml",
    success: parseXml
  });
});

 

AJAX 요청에 성공했을때 parseXml을 요청하도록 되어있다.

xml의 각 튜토리얼의 저자를 찾는것으로 시작하겠다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
function parseXml(xml)
{
  //find every Tutorial and print the author
  $(xml).find("Tutorial").each(function()
  {
    $("#output").append($(this).attr("author") + "<br />");
  });

  // Output:
  // The Reddest
  // The Hairiest
  // The Tallest
  // The Fattest
}

 

XML을 파싱하는 빠른 방법은 jQuery의 강력한 선택 시스템이다.

(영어 원문 : The quickest way to parse an XML document is to make use of jQuery's powerful selector system,..)

속성 값을 가지고 오려면 단순히 ATTR을 호출하고 내가 원하는 속성의 이름을 전달하면 된다.

다음 예제는 HTML span의 id가 "output"인 개체가 있다. 바로 이 요소에 append호출하여 데이터를 채우는것.

(I have a simple HTML span object with an id of "output". I call append on this element to populate it with data.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
//print the date followed by the title of each tutorial
$(xml).find("Tutorial").each(function()
{
  $("#output").append($(this).find("Date").text());
  $("#output").append(": " + $(this).find("Title").text() + "<br />");
});

// Output:
// 1/13/2009: Silverlight and the Netflix API
// 1/12/2009: Cake PHP 4 - Saving and Validating Data
// 1/6/2009: Silverlight 2 - Using initParams
// 12/12/2008: Controlling iTunes with AutoHotkey

 

다음예제는 값들의 내부 요소들을 텍스트 속성으로 가져온다는 것 을 제외하고 이전 예제와 매우 유사하다.

Tutorial태그에 "find"와 "each"를 사용해서 접근 할 수 있으며, 만약 Date값을 가져오려면 마찬가지로 "find"를 사용해 가져올 수 있다.

XML요소를 텍스트로 얻으려면 텍스트("text")를 호출하면 된다.

Title을 each로 실행시켰기 때문에 가지고있는 요소 만큼 반복되어서 Category함수와Category의 각 하부 요소들을 모두 검색해서

가지고 있는 attributes 들을 text로 변환하여 출력해준다. .... 번역기와 단어찾기 해석의 한계.

 

(영어원문:

The quickest way to parse an XML document is to make use of jQuery's powerful selector system, so the first thing I do is call find to get a collection of every Tutorial element. Then I call each, which executes the supplied function on every element. Inside the function body, this now points to a Tutorial element. To get an attribute's value, I simply call attr and pass it the name of what attribute I want. In this example, I have a simple HTML span object with an id of "output". I call append on this element to populate it with data. You would probably do something a little more exciting, but I just wanted a simple way to display the results.

See how easy that is? Let's now look at a slightly more complicated one. Here I want to print the publish date of each tutorial followed by the title.)

 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
32
33
34
35
36
 
//print each tutorial title followed by their categories
$(xml).find("Tutorial").each(function()
{
  $("#output").append($(this).find("Title").text() + "<br />");

  $(this).find("Category").each(function()
  {
    $("#output").append($(this).text() + "<br />");
  });

  $("#output").append("<br />");
});

// Output:
// Silverlight and the Netflix API
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// XAML

// Cake PHP 4 - Saving and Validating Data
// Tutorials
// CakePHP
// PHP

// Silverlight 2 - Using initParams
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// HTML

// Controlling iTunes with AutoHotkey
// Tutorials
// AutoHotkey

 

* source Files : SOTC-JQueryXML.egg

* source : http://tech.pro/tutorial/877/xml-parsing-with-jquery

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

.eq(index)  (0) 2013.10.13
append() - 마지막 자식 요소 추가  (0) 2013.10.13
mouseenter, mouseleave - 마우스 진입, 벗어남 감지  (0) 2013.10.13
.animate - 움직이기  (0) 2013.10.13
.height() - 높이값  (0) 2013.10.13
댓글