Reading XML in javascript

[sazzie]

Please pardon me for asking this as this question has probably been asked before.

The following is my simple php based xml file :

[code][color=green]
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<add>
<email><?php echo "<a href=\"www.google.com\"> Google </a>"; ?></email>
</add>
[/color][/code]

And now, my atempts to read that email line in javascript :

[code][color=purple]
var cType = this.getResponseHeader("Content-Type");
alert("Content-Type : "+cType);
if (cType == "text/xml")
{
var xmlDoc = request.responseXML;
var emailTag = xmlDoc.getElementsByTagName("email")[0];
alert( "new :" + emailTag );
var textOut = emailTag.firstChild.nodeValue;
alert( textOut );
[/color][/code]

As you can see, I am trying to see what's in "emailTag" and in "textOut". Explorer returns nothing for both values.
Can you please enlighten as to how I can access the contents of my email xml tag?

Now, the really annoying part is if I modified the xml to read what I have below :

[code][color=blue]
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
?>
<add>
<email><?php echo "text"; ?></email>
</add>[/color]
[/code]

My javascript alert( textOut ); call outputs the right message i.e text.
Can I get some help please? I need to have hyper links returned from my xml so I can display them.

Plus, can you suggest a work around for "getResponseHeader"? It doesn't work in Firefox.

thanks  :)

[zeroxw]

This problem isn't a big deal. Because of many different browser have different way to process DOM (XML) document, and so on, in IE it cannot understand what responseXML is.
CAuse of this problem, you cannot use it in IE.
---------------------
Here is the way to process an XML document and make it run in any browser..
------------------------------
XML :

<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\" ?>
<response>
<Add>
123 Crystal Street.
</Add>
</response>

-------------
You can use PPH to renerate a XML page.....
----------
Process in Opera and FF.
Because Opera and FF have the same (almost) in process XML document (DOM)
you retrive Add tag's content use :

[b]requestClient[/b] is a object of XMLHttpRequest in FF and OP
and ActiveXObject in IE

responseData = requestClient.responseXML;
xmlRootNode=responseData.getElementsByTagName('response').item(0);
xmlAdd = xmlRootNode.childNodes.item(0).childNodes.item(0).data;
-------------------------
In IE :

Because IE cannot unserstand responseXML se we use responseText, or and DOM doc.

if(navigator.addName == 'Microsoft Internet Explorer'){
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// Create XMLDOM object

// Getting contents
responseData = requestClient.responseText;
// DOM object
xmlDoc.async="false";
xmlDoc.loadXML(responseData.toString());

// Here is content of Add tag in XML

Have fun........
about DOMDoc you can find at

http://www.w3schools.com/dom/default.asp

--------------------------------
Plus, can you suggest a work around for "getResponseHeader"? It doesn't work in Firefox.
-------------------------------------------------
Of couse FF cannot understand what is Header tag
So when you create and call function to process page (using ajax)
just simply call

if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
requestClient = new XMLHttpRequest();
if (requestClient.overrideMimeType) {
requestClient.overrideMimeType('text/xml');
}
}

..................

xmlDoc.documentElement.childNodes[0].childNodes[0].nodeValue;

[irken]

Are we talking AJAX here or XMLDOM?

I can read responseXML fine in IE (from my AJAX call).

[code]
if(this.request.getResponseHeader('Content-Type').indexOf('xml') != -1)
{
return this.request.responseXML.documentElement;
}
[/code]

That's what I use.. Ajax.getResponse().getElementsByTagName('tiles'); - process..

[zeroxw]

maybe you use an ajax framework...???!!! I've tried meny times to use responseXML in IE and all is failed, so that is why I use DOM to get XML content.....show me you full code using responseXML

[irken]

[quote author=zeroxw link=topic=121629.msg505055#msg505055 date=1168853733]
maybe you use an ajax framework...???!!! I've tried meny times to use responseXML in IE and all is failed, so that is why I use DOM to get XML content.....show me you full code using responseXML
[/quote]

Well. You could call it a "framework" I suppose. It's just a wrapper.. nothing special.

Ajax.js
[code]
Ajax = {};

Ajax.makeRequest = function(method, url, callbackMethod)
{
this.request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = callbackMethod;
this.request.open(method, url, true);
this.request.send(url);
}

Ajax.checkReadyState = function()
{
switch(this.request.readyState)
{
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
AjaxUpdater.isUpdating = false;
return this.request.status;
default:
// An unexpected error has occurred.
}
}

Ajax.getResponse = function()
{
if(this.request.getResponseHeader('Content-Type').indexOf('xml') != -1)
{
return this.request.responseXML.documentElement;
}
else
{
return this.request.responseText;
}
}
[/code]

AjaxUpdater.js
[code]
AjaxUpdater = {};

AjaxUpdater.initialize = function()
{
AjaxUpdater.isUpdating = false;
}

AjaxUpdater.initialize();

AjaxUpdater.Update = function(method , service, callback)
{
if(callback == undefined || callback == "")
{
callback = AjaxUpdater.onResponse;
}

Ajax.makeRequest(method, service, callback);
AjaxUpdater.isUpdating = true;
}

AjaxUpdater.onResponse = function()
{
if(Ajax.checkReadyState() == "200")
{
AjaxUpdater.isUpdating = false;
}
}
[/code]

[irken]

[b]EDIT: Well, couldn't edit above post to include the new stuff.. so here goes again.[/b]

Well. You could call it a "framework" I suppose. It's just a wrapper.. nothing special. Nothing is altering the method.

Attached to the reply (at the very bottom of the reply) is a zip containing 5 files. Index.html, Ajax.js, AjaxUpdater.js and Test.js and the XML to read: xmlbaby.xml.

I'll post the sources here too.

[b]index.html[/b]
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Testing</title>
<script language="javascript" src="javascript/Ajax.js" type="text/javascript"> </script>
<script language="javascript" src="javascript/AjaxUpdater.js" type="text/javascript"> </script>
</head>
<body>
    <div id="messages">
        Messages from /services/xmlbaby.xml will be displayed here..<br />
    </div>

    <script language="javascript" src="javascript/Test.js" type="text/javascript"> </script>
    <script language="javascript">
        Test.initialize();
    </script>
</body>
</html>
[/code]

[b]javascript/Ajax.js[/b]
[code]

Ajax = {};

Ajax.makeRequest = function(method, url, callbackMethod)
{
this.request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP");
this.request.onreadystatechange = callbackMethod;
this.request.open(method, url, true);
this.request.send(url);
}

Ajax.checkReadyState = function()
{
switch(this.request.readyState)
{
case 1:
break;
case 2:
break;
case 3:
break;
case 4:
AjaxUpdater.isUpdating = false;
return this.request.status;
default:
// An unexpected error has occurred.
}
}

Ajax.getResponse = function()
{
if (this.request.getResponseHeader('Content-Type').indexOf('xml') != -1)
{
return this.request.responseXML.documentElement;
}
else
{
return this.request.responseText;
}
}
[/code]

[b]javascript/AjaxUpdater.js[/b]
[code]
AjaxUpdater = {};

AjaxUpdater.initialize = function()
{
AjaxUpdater.isUpdating = false;
}

AjaxUpdater.initialize();

AjaxUpdater.Update = function(method , service, callback)
{
if(callback == undefined || callback == "") { callback = AjaxUpdater.onResponse; }
Ajax.makeRequest(method, service, callback);
AjaxUpdater.isUpdating = true;
}

AjaxUpdater.onResponse = function()
{
if(Ajax.checkReadyState() == "200")
{
AjaxUpdater.isUpdating = false;
}
}
[/code]

[b]javascript/Test.js[/b]
[code]
Test = { };

Test.initialize = function()
{
AjaxUpdater.Update("POST", 'services/xmlbaby.xml', Test.display);
};

Test.display = function()
{
    var messages = Ajax.getResponse().getElementsByTagName('message');
    for (var i = 0; i < messages.length; i++) {
       
        var messageDiv = document.getElementById('messages');
        var id = Ajax.getResponse().getElementsByTagName('id')[i].firstChild.data;
        var text = Ajax.getResponse().getElementsByTagName('text')[i].firstChild.data;
        var from = Ajax.getResponse().getElementsByTagName('from')[i].firstChild.data;
       
        messageDiv.innerHTML += 'Message with id: ' + id + ' from ' + from + ' contains the text: ' + '<strong>' + text + '</strong>';
    }
};
[/code]

[b]services/xmlbaby.xml[/b]
[code]
<?xml version="1.0" encoding="UTF-8"?>
<messages>
<message>
<id>1</id>
<text>This workes!</text>
<from>valvet</from>
</message>
</messages>
[/code]

[attachment deleted by admin]

[irken]

The above results in..

[quote]
Messages from /services/xmlbaby.xml will be displayed here..
Message with id: 1 from valvet contains the text: [b]This workes![/b]
[/quote]

Tested and working in IE7. There's an "unspecified" error somewhere, and I've not tested in Firefox.. don't care.