how to handle xml data in javascript

Question

I am newbie in javascript xml data handling. Currently, my ajax call to a server, and the server returns xml data, I don't know how to parse the xml data to get some values.

My ajax call:

$.ajax({
            url: 'http://localhost:8080/someinterface/the-id',
            type: 'GET',
            async: false,
            dataType: 'application/xml',
            data: {id: 43},
            success: function(data) {

                //handle the data

            },
            error: function(xhr, status, error){
                alert('error happens');
            }
         })

the returned xml data looks like:

<DOCUMENT>
  <AGE>16</AGE>
  <USERNAME>default user</USERNAME>
  <SECURITYID>1111</SECURITYID>
...

how to parse the xml data to get for example "USERNAME" in my javascript ??

------------EDIT------------

I tried to use your proposed ways, but now I got error message:

XML Parsing Error: no element found Location: moz-nullprincipal:{120e8c1d-5174-4e94-9ebb-2bffda80b170} Line Number 1, Column 1: ^

and the ajax call result to the error function

-------------------PARTLY SOLVED------------------------

Finally, I found the reason is that my application is running on jetty server on localhost:8080, while my ajax is requesting xml data on tomcat server which is running on localhost:8085. Because of the domain port are different, I got the weired problem. Now, after I move my application to tomcat server and request tomcat server, I got the xml response successfully.

The ajax call goes to the success function, and I use

success: function(data){
           xmlDoc = $.parseXML(data);
            $xml = $(xmlDoc);
            $userName = $xml.find('USERNAME');  
            var userName = $userName.text();
            alert('1');
            alert(userName);
}

I got alert('1') in my browser, BUT I do not get alert(userName) , I don't know why... So I put here "PARTLY SOLVED", so...why I do not get my userName alert..

@Mallon: which one did you use. What is the jquery version u r using? — Amitabh
– Amitabh, Commented Apr 12, 2011 at 14:10
Hi, I have tried all the suggested ways, also tried directly alert out the data like "alert(data)" in success function, but when run it in browser, it calls the error function and pop up the alert in error function. — Mellon
– Mellon, Commented Apr 12, 2011 at 14:13
Hi, Amitabh, I am sure my server returned an xml, because I copied and pasted the URL with parameter to the browser, and the browser showd the xml data correctly. The only exception is in Firefox, the browswer popup an message "This XML file does not appear to have any style information associated with it." But it still show the xml data in a xml format like what I showed in the above post. — Mellon
– Mellon, Commented Apr 12, 2011 at 14:24

Amitabh · Accepted Answer · 2011-04-12 15:16:17Z

3

You can use the jquery xml parsing.

http://api.jquery.com/jQuery.parseXML/

So in your Success function.

success: function(data) {
    //xmlDoc = $.parseXML( data);
    $xml = $( data);
    $userName = $xml.find('USERNAME');  
    var uName = $userName.text();
}

edited Apr 12, 2011 at 15:16

answered Apr 12, 2011 at 13:55

Amitabh

61.7k43 gold badges114 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2011-04-12 13:54:06Z

1

The browser will basically handle it for you:

success: function(data) {
  var username = $(data).find('username').text();
  // ...
}

answered Apr 12, 2011 at 13:54

Pointy

415k62 gold badges600 silver badges632 bronze badges

Comments

Álvaro González · Accepted Answer · 2011-04-12 15:14:48Z

1

You are misusing the dataType parameter. It's not expected to be a MIME type. Instead, it should one of these: "xml", "html", "script", "json", "jsonp" or "text". In your case, "xml" (or omit it completely and jQuery will guess it for you):

http://api.jquery.com/jQuery.ajax/ (scroll down to "dataTypeString").

Update:

So far, it looks that your problem is that your server side script is crashing and you don't even have valid XML. Whatever, I've put together a small example in case it helps:

$.ajax({
    url: "/test.xml",
    type: "GET",
    async: false,
    dataType: "xml",
    data: {id: 43},
    success: function(data) {
        var output = "Usernames:\n";
        $(data).find("USERNAME").each(function(){
            output += "\n- " + $(this).text();
        });
        alert(output);
    },
    error: function(xhr, status, error){
        alert("error happens");
    }
})

edited Apr 12, 2011 at 15:14

answered Apr 12, 2011 at 14:14

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

4 Comments

Mellon Over a year ago

Sorry, I dont get your point, what do you mean about "misusing" the datatype. I checked your link, I found the text "In particular, XML must be declared by the server as text/xml or application/xml for consistent results." If you check my post, I do use dataType: 'application/xml'. But thank you anyhow :)

Mellon Over a year ago

Hi, I tried omit it, the browser do guessed it for me, but this does not solve my problem, the problem is still there . Thank you.

Álvaro González Over a year ago

@Mellon: Please read my answer carefully. I said you can not use dataType: "application/xml" and you reply that you are using it.

Mellon Over a year ago

Sorry, I misunderstood your answer. I will try it tomorrow and let you know. Thank you:)

Niklas Wulff · Accepted Answer · 2011-04-12 13:53:40Z

0

Use Json data type instead, it's designed to be used with javascript.

Example:

$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});

answered Apr 12, 2011 at 13:53

Niklas Wulff

3,5323 gold badges26 silver badges45 bronze badges

2 Comments

Mellon Over a year ago

Since this project required xml data response, so I can not use json now.

Niklas Wulff Over a year ago

OK, sorry. Didn't think of that.

StuperUser · Accepted Answer · 2011-04-12 13:58:45Z

0

Use the following snippet in your function to put the XML result string in a wrapped jQuery set.

var xmlString = data;

//IE XML parser needs to use an ActiveXObject
if ($.browser.msie) {
    unwrappedXml = new ActiveXObject("Microsoft.XMLDOM");
    unwrappedXml.async = false;
    unwrappedXml.loadXML(xmlString);
    }
else {
    unwrappedXml = xmlString;
}

var xml = $(unwrappedXml);
xml.find(selector);

answered Apr 12, 2011 at 13:58

StuperUser

10.9k14 gold badges85 silver badges143 bronze badges

Collectives™ on Stack Overflow

how to handle xml data in javascript

5 Answers 5

Comments

Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related