BBS > jqeury

jquery xml parsing

작성자 : 이창우 (x1wins) | 등록일 : 2011-11-02 | 목록
첨부 파일이 없습니다.
첨부 이미지가 없습니다.
첨부 코드가 없습니다.
To begin this tutorial I will take these few liberties:
You've downloaded the JQuery core
You've already learned some of the basics of JQuery
You know and understand how XML works
If you feel you might be missing one of these go check out the JQuery website ( or w3schools ( on learning XML. If you've got these bases covered, continue.

Let's say we have an XML document filled with books and we wish to parse it for using on a website. The XML document might look something like the snippet below.

<?xml version="1.0" encoding="UTF-8"?>
<book id="1">
<title>The Murders In The Rue Morgue</title>
<author>Poe, Edgar Allen</author>
<book id="2">
<title>The Boys From Brazil</title>
<author>Levin, Ira</author>

Using this XML in JQuery is really simple, we simply do an AJAX call to retrieve the document:

url: "books.xml",
dataType: "xml",
success: function(data){
// Parsing happens here

This AJAX call retrieves our XML document and on success performs the function under "success", because we've specified the dataType to be "xml", the parameter passed to this function will already be of the correct build-up for us to parse.

To parse the document we have two main functions available "each" and "find". The function "each" will loop over all the tags with a specific name, the function "find" will search for a certain tag.

$(data).find("book").each(function() {
alert("found a book");

This code, placed inside the parsing function, will go over the XML and for each "book" alert "found a book". Which means it will alert this twice, once for the book by Poe and once for the book by Levin. Let's add some detail to it.

$(data).find("book").each(function() {

This code will look for a "title" tag inside the found book XML and alert its text. So in our case it alerts "The Murders In The Rue Morgue" and "The Boys From Brazil". You could also look for attributes, our books in the example have an "id", which we can look up like this.

$(data).find("book").each(function() {

As you can see, parsing XML with JQuery is very easy. There are some problems that you need to be aware of though. Firstly, I have to mention that JQuery is not yet very good at multi-browser XML parsing. You will have to do this yourself. The problem mainly is the dataType you give in the AJAX call. You can make a switch, using an if-statement like this:

dataType: ($.browser.msie) ? "xml" : "text/xml"
This will use the dataType "xml" for Internet Explorer and "text/xml" for all others.

On simple XML structures this will probably not be of great deal, but when adding CDATA blocks in your XML it will cause problems, big ones. If the wrong dataType is given, the AJAX call might still process the XML and pass it to the success function as HTML. HTML does not have CDATA blocks and they will be wiped away, content and all. If you have any control over the XML documents, don't use CDATA blocks, but rather URL encode the content.

Also note that some browser will require valid XML data, anything that will invalidate your XML will break your code. This includes not having the <?xml ?> tag at line 1 (line 1, not line 2 or 3, even if line 1 is empty and your <?xml ?> tag is on line 2. This wil not work).

로그인 하셔야 댓글을 사용하실수 있습니다.
댓글쓰기를 누르면 로그인 페이지로 이동 후 돌아옵니다.
총 댓글 겟수 0
번호 제목 등록일 작성자 조회수
662 JQuery date 타입 (0) 2014-03-20 이창우 2587
564 spring form with ajax (0) 2012-08-02 이창우 2376
370 ajax 통신 로딩중 이미지 처리 (0) 2011-11-03 이창우 6184
369 jquery json parsing 배열 예제 (1) 2011-11-03 이창우 11855
367 jqeury json paring (0) 2011-11-02 이창우 2618
-> jquery xml parsing (0) 2011-11-02 이창우 4285
125 gallery (0) 2011-05-25 이창우 2501
124 Banner menu 배너 매뉴 (0) 2011-05-25 이창우 2589
< 1 >
글쓰기 검색