Saturday, May 9, 2009

Parse XML response in JavaSript

Some time we get response from server as xml.
This blog will show that how you can handle or parse xml in javascript.
1. Suppose you have xml response like this

<Students>
<Student>
<Name>Binod Kumar Suman</Name>
<Hostel>Ganga</Hostel>
<Contact>999999999</Contact>
</Student>
</Students>

2. In JavaScript function


function showResult(){
if(request.readyState == 4){
var response = request.responseXML;
var students = response.getElementsByTagName("Student");
document.getElementById("NamelH1").innerHTML = students[0].getElementsByTagName("Name")[0].text;
document.getElementById("HostelH1").innerHTML = students[0].getElementsByTagName("Hostel")[0].text;
document.getElementById("ContactH1").innerHTML = students[0].getElementsByTagName("Contact")[0].text;
}
}

Second situation: Suppose you have abc.xml file and you want to parse in javascript

abc.xml

<Students>
<Student>
<Name>Binod Kumar Suman</Name>
<Hostel>Ganga</Hostel>
<Contact>999999999</Contact>
</Student>
</Students>

Then your javascript would be

function getName(){
var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
xmlDoc.async="false";
xmlDoc.load("abc.xml");
var students=xmlDoc.documentElement;
var student = students.childNodes(0);
document.getElementById("NamelH1").innerHTML = student.getElementsByTagName("Name")[0].text;
document.getElementById("HostelH1").innerHTML = student.getElementsByTagName("Hostel")[0].text;
document.getElementById("ContactH1").innerHTML = student.getElementsByTagName("Contact")[0].text;
}

Your JSP Page:

<h2>GET STUDENT INFO </h2>
<input onclick="getName();" type="button" value="Get Name">
Name : <span id="NamelH1"></span>
Hostel : <span id="HostelH1"></span>
Contact : <span id="ContactH1"></span>

27 comments:

  1. it is good, if my response xml contains single element like student,but if i have multiple student elements how can i retrieve and place that one on to my jsp page

    ReplyDelete
  2. On your request, I gave one very easy example on how to handle multiple element result of XML file in javaScript. Just you have to use DOM element in javaScript and you can grow your table dynamically. Please see my Parse XML file in JavaScript part 2. http://binodsuman.blogspot.com/2009/05/parse-xml-file-in-javascript-part-2.html).
    Please dont forget your comment on this new post :)

    Thanks,

    Binod Suman
    http://binodsuman.blogspot.com

    ReplyDelete
  3. hi, Thanks for share, but i seems very hard to me. I have a xml file, a webpage html ad i want to make my web is a multi-language . My email is kpopyo@gmail.com. If you have source code about web multi-language by using javascript dom , can you send me? thanks so much!!!!

    ReplyDelete
  4. I find that I can't use getElementByTag if the structure is more complex and there is another level of XML. If you changed your example and contact was another parent node. ie.
    ...
    -contact-
    -email>a@b.com=-/email-
    -email>a2@b.com-/email-
    -/contact-

    the coding becomes more complex. What would you here?
    (I can't enter the xml correctly. your textbox doesn't permit the tag symbol.)

    ReplyDelete
  5. Thi will be really help full thank you

    ReplyDelete
  6. but this is now working in google chrome browser..
    any suggestions for that..

    Thanks

    ReplyDelete
  7. hi thanks it helped me a lot and i want the reverse scenario that is parsing js in through html by xml

    ReplyDelete
  8. How do we handle if the nodes have Urls in XML?

    ReplyDelete
  9. that was very handy stuff

    ReplyDelete
  10. Nice work! how do you display a text and image from xml?

    ReplyDelete
  11. doesn't work in mozilla nor chrome

    ReplyDelete
  12. Hi Binod,

    I applied your sample code to load xml file from client side.when i checked in visual studio 2005 it works fine, but when the project was deployed to iis server it is not reading the xml file which was in client pc.
    I hope you have any idea about

    Dhanushka

    ReplyDelete
  13. this work doesn't work in firefox and google chrome

    ReplyDelete
  14. Hi,

    Do you have code to bring up same functionality for android webkit?

    /Suman

    ReplyDelete
  15. thank you so much,for this useful sharing

    ReplyDelete
  16. Not worked Properly

    ReplyDelete
  17. I have an url: http://atlas.gc.ca/cgi-bin/atlaswms_en?VERSION=1.1.1&REQUEST=GetCapabilities&SERVICE=WMS&

    that result in a xml-file, that i would like to parse, Where do i put the resulting file, have no idea how to do?

    ReplyDelete
  18. thank you, but how do you pass the image file from xml to jsp page?

    ReplyDelete
  19. very useful.

    i really appreciate it!

    ReplyDelete
  20. This way is better than text:

    alert(students[0].getElementsByTagName("Name")[0].childNodes[0].nodeValue);

    ReplyDelete
  21. Thanks a lot, I'm not done implementing it yet but it's the best tutorial I've seen around on the subject!

    ReplyDelete
  22. var students = xmlDoc.getElementsByTagName("Student");
    document.getElementById("NamelH1").innerHTML = students[0].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
    document.getElementById("HostelH1").innerHTML = students[0].getElementsByTagName("Hostel")[0].childNodes[0].nodeValue;
    document.getElementById("ContactH1").innerHTML = students[0].getElementsByTagName("Contact")[0].childNodes[0].nodeValue;

    ReplyDelete

You can put your comments here (Either feedback or your Question related to blog)