CODEWITHSUNDEEP
javascriptjquery
Mellon
Mellon

Reputation: 38902

how to handle xml data in javascript

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..

Upvotes: 3

Views: 5455

Answers (5)

Amitabh
Amitabh

Reputation: 61337

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();
}

Upvotes: 3

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146630

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):

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");
    }
})

Upvotes: 1

StuperUser
StuperUser

Reputation: 10850

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);

Upvotes: 0

Pointy
Pointy

Reputation: 413996

The browser will basically handle it for you:

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

Upvotes: 1

Niklas Wulff
Niklas Wulff

Reputation: 3524

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

Example:

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

Upvotes: 0

Related Questions