Generate UI from XML and Javascript in HTML



I came to one requirement that we have to develop UI page from XML. For this purpose we have to use XML, Javascript(js) and HTML technologies. I am very new to all these technologies.


We have many webservices, in XML file we list all the webservices and the request parameters. In JS we have to parse the XML and then display the form on HTML. The HTML will have two sections one is the form and another is the response section. User can submit the form and the response from webservice will be displayed in response section.


We want simple UI (not a stylish).


The required UI is -


enter image description here


My XML file looks like -



<?xml version="1.0" encoding="UTF-8"?>
<CONTROLLERS>
<CONTROLLER>
<TITLE>User</TITLE>
<ACTIONS>
<LABEL>Create User</LABEL>
<HTTP_METHOD>POST</HTTP_METHOD>
<PARAMS>
<PARAM><NAME>email</NAME></PARAM>
<PARAM><NAME>user_name</NAME></PARAM>
<PARAM><NAME>first_name</NAME></PARAM>
<PARAM><NAME>last_name</NAME></PARAM>
</PARAMS>
</ACTIONS>
<ACTIONS>
<LABEL>Update User</LABEL>
<HTTP_METHOD>POST</HTTP_METHOD>
<PARAMS>
<PARAM><NAME>id</NAME></PARAM>
<PARAM><NAME>email</NAME></PARAM>
<PARAM><NAME>user_name</NAME></PARAM>
<PARAM><NAME>first_name</NAME></PARAM>
<PARAM><NAME>last_name</NAME></PARAM>
</PARAMS>
</ACTIONS>
</CONTROLLER>
</CONTROLLERS>


I tried to parse this XML using following js-



function loadXMLDoc()
{
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmlDoc = xmlhttp.responseXML;
var txt = "";

var x = xmlhttp.responseXML.documentElement.getElementsByTagName("CONTROLLER");
for (var i = 0; i < x.length; i++) {
var y = x[i].getElementsByTagName("TITLE");
for (var j = 0; j < y.length; j++){
}
}
document.getElementById("myDiv").innerHTML = txt;
}
}
xmlhttp.open("GET","console1.xml",true);
xmlhttp.send();
}


So can anybody please suggest me how can I generate UI using above XML? Thanks in advance


No comments:

Post a Comment