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>
Saturday, May 9, 2009
Subscribe to:
Post Comments (Atom)
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
ReplyDeleteOn 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).
ReplyDeletePlease dont forget your comment on this new post :)
Thanks,
Binod Suman
http://binodsuman.blogspot.com
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!!!!
ReplyDeleteI 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.
ReplyDelete...
-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.)
Thi will be really help full thank you
ReplyDeleteThose this works in asp.net?
ReplyDeletebut this is now working in google chrome browser..
ReplyDeleteany suggestions for that..
Thanks
hi thanks it helped me a lot and i want the reverse scenario that is parsing js in through html by xml
ReplyDeleteHow do we handle if the nodes have Urls in XML?
ReplyDeletethat was very handy stuff
ReplyDeleteDoesn't work in mozila D:
ReplyDeleteNice work! how do you display a text and image from xml?
ReplyDeletedoesn't work in mozilla nor chrome
ReplyDeleteHi Binod,
ReplyDeleteI 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
this work doesn't work in firefox and google chrome
ReplyDeleteHi,
ReplyDeleteDo you have code to bring up same functionality for android webkit?
/Suman
thank you so much,for this useful sharing
ReplyDeleteNot worked Properly
ReplyDeleteI have an url: http://atlas.gc.ca/cgi-bin/atlaswms_en?VERSION=1.1.1&REQUEST=GetCapabilities&SERVICE=WMS&
ReplyDeletethat result in a xml-file, that i would like to parse, Where do i put the resulting file, have no idea how to do?
thank you, but how do you pass the image file from xml to jsp page?
ReplyDeletevery useful.
ReplyDeletei really appreciate it!
This way is better than text:
ReplyDeletealert(students[0].getElementsByTagName("Name")[0].childNodes[0].nodeValue);
good one :)
ReplyDeletegood one :)
ReplyDeletegood one :)
ReplyDeleteThanks a lot, I'm not done implementing it yet but it's the best tutorial I've seen around on the subject!
ReplyDeletevar students = xmlDoc.getElementsByTagName("Student");
ReplyDeletedocument.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;