Ajax technology can do magic, but its all about handling ajax the right way! Industry have two wings of browsers (FF and IE) which behaves differently when manipulating DOM. A Ajax programmer need to handle certain "issues" so that you can get same results on both these browsers. One such thing is parsing of XML. You can find lot of XML parsers written in java script but when you are into building custom application that don't make use of Dojo,GWT or any other ajax library. Here I will explain the proper technique to parse XML response and render it on screen. Using this method you will get the same output in FF and IE.
First lets take a look and the wrong code. I have simple set of java script functions to do login, Any server side scripting (I used servlet) may be used.Its just a simple authentication code at the server side, but the important part is the response. We are going to get a XML response which we will try to parse and display the result on the web page. Here is the code:
function getConnection() {
var cObject;
if(window.XMLHttpRequest) {
cObject = new XMLHttpRequest;
} else if(window.ActiveXObject) {
cObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return cObject;
}
function doLogin() {
conObject = getConnection();
conObject.onreadystatechange = displayResult;
conObject.open('GET','/dctmfx/LoginServlet',true);
conObject.send(null);
}
function displayResult() {
if(conObject.readyState == 1){
document.getElementById('result').innerHTML="Loading...";
}
if(conObject.readyState == 4) {
var xmlDoc = conObject.responseXML;
var root = xmlDoc.getElementsByTagName("action");
var tempData = root.getElementsByTagName("message")[0].text;
document.getElementById('data').innerHTML=tempData;
document.getElementById('result').innerHTML="done";
}
}
The HTML page is given below:
<body>
A sample web application...
<a href="#" onclick="doLogin()" > Click to Login >/a>
<div id="result">
</div>
<div id="data">
</div>
</body>
A XML response is given below:
<action>
<message>OK</message>
<action>
When you work on IE, everything is smooth and runs good. Your application will start acting weired when you try access the same web application using FF. And the reason for this is : The way we parser the XML response.
The solution, is to parse the XML using DOM and the basic way is to use the properties in DOM. If we make use of the DOM properties, you can achieve a must robust application. Here is the right code:
function getConnection() {
var cObject;
if(window.XMLHttpRequest) {
cObject = new XMLHttpRequest;
} else if(window.ActiveXObject) {
cObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return cObject;
}
function doLogin() {
conObject = getConnection();
conObject.onreadystatechange = displayResult;
conObject.open('GET','/dctmfx/LoginServlet',true);
conObject.send(null);
}
function displayResult() {
if(conObject.readyState == 1){
document.getElementById('result').innerHTML="Loading...";
}
if(conObject.readyState == 4) {
var xmlDoc = conObject.responseXML;
var docRoot = xmlDoc.getElementsByTagName("action")[0];
var tempData = docRoot.childNodes[0].firstChild.data;
document.getElementById('data').innerHTML=tempData;
document.getElementById('result').innerHTML="done";
}
}
Here you can see, we have made use of firstChild.data to get the same text data that we obtained using *.text. The first case is proper utilization of DOM properties and you will see things working in any browser.
For your reference to DOM properties, make use of this site.
First lets take a look and the wrong code. I have simple set of java script functions to do login, Any server side scripting (I used servlet) may be used.Its just a simple authentication code at the server side, but the important part is the response. We are going to get a XML response which we will try to parse and display the result on the web page. Here is the code:
function getConnection() {
var cObject;
if(window.XMLHttpRequest) {
cObject = new XMLHttpRequest;
} else if(window.ActiveXObject) {
cObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return cObject;
}
function doLogin() {
conObject = getConnection();
conObject.onreadystatechange = displayResult;
conObject.open('GET','/dctmfx/LoginServlet',true);
conObject.send(null);
}
function displayResult() {
if(conObject.readyState == 1){
document.getElementById('result').innerHTML="Loading...";
}
if(conObject.readyState == 4) {
var xmlDoc = conObject.responseXML;
var root = xmlDoc.getElementsByTagName("action");
var tempData = root.getElementsByTagName("message")[0].text;
document.getElementById('data').innerHTML=tempData;
document.getElementById('result').innerHTML="done";
}
}
The HTML page is given below:
<body>
A sample web application...
<a href="#" onclick="doLogin()" > Click to Login >/a>
<div id="result">
</div>
<div id="data">
</div>
</body>
A XML response is given below:
<action>
<message>OK</message>
<action>
When you work on IE, everything is smooth and runs good. Your application will start acting weired when you try access the same web application using FF. And the reason for this is : The way we parser the XML response.
The solution, is to parse the XML using DOM and the basic way is to use the properties in DOM. If we make use of the DOM properties, you can achieve a must robust application. Here is the right code:
function getConnection() {
var cObject;
if(window.XMLHttpRequest) {
cObject = new XMLHttpRequest;
} else if(window.ActiveXObject) {
cObject = new ActiveXObject("Microsoft.XMLHTTP");
}
return cObject;
}
function doLogin() {
conObject = getConnection();
conObject.onreadystatechange = displayResult;
conObject.open('GET','/dctmfx/LoginServlet',true);
conObject.send(null);
}
function displayResult() {
if(conObject.readyState == 1){
document.getElementById('result').innerHTML="Loading...";
}
if(conObject.readyState == 4) {
var xmlDoc = conObject.responseXML;
var docRoot = xmlDoc.getElementsByTagName("action")[0];
var tempData = docRoot.childNodes[0].firstChild.data;
document.getElementById('data').innerHTML=tempData;
document.getElementById('result').innerHTML="done";
}
}
Here you can see, we have made use of firstChild.data to get the same text data that we obtained using *.text. The first case is proper utilization of DOM properties and you will see things working in any browser.
For your reference to DOM properties, make use of this site.
3 comments :
You made a mistake in the code
"Click to Login >/a>"
Besides that, nice article.
hi...
i could qt follow the xml parsing in the javascript after getting ajax XMl response from the server side.
what is the structure / XML data that you would be receiving.
hhsudhan@gmail.com
Hi,
I have provided the xml in the article. The xml whould be of the form:
<action>
<message>OK</message>
<action>
Post a Comment