Javascript + CF XML Integration

Report · Jul 28, 2008

Hi everyone...
I've searched ALL over the net and I can't seem to come up with results on how to do my task.
The task seems fairly simple, and I've tried quite a few methods, but I cannot seem to get it to work
Here is my goal:
1)I have a simply HTML form with a submit button and a <div> tag with id="divver". This page is "AJAX enabled" so I want the data to be transferred "behind the scenes".
2)Inside this HTML page is some javascript to send an asynchronus request to a .cfm page.
(NOTE: I've tried to receive a responseText from the .cfm page and this works...so the communication is correct
3)Inside the .cfm page I just have some simple XML in a string and I've tried using <cfdump> and <cfoutput> to output the XML

4)My goal is to receive this XML from the .cfm page and process it using javascript and then update the HTML page with the javascript in it.

I think my problem is I don't know how to output the XML correctly using the .cfm page, and when I receive it with my JS I don't know how to process it.

Any help would be *GREATLY* helpful. Thanks!

Report · Jul 28, 2008

Sending XML:
(1) Use the CFXML tag - see the documentation; or
(2) Use the CFCONTENT tag. You can set the mime type to "text/xml" using like this: <cfcontent type="text/xml">...
If you use the CFXML tag, you don't use the XML header line; CF creates it for you. If you use the CFCONTENT tag. provide your own XML header line immediately after the CFCONTENT tag.
Receiving XML:
On the JavaScript side, you access the incoming XML object using the responseXML property - it's an OBJECT, so responseText won't work in most browsers.
Here's a snippet on how to read the XML using Javascript. "Obj" is the incoming XML object:

Report · Jul 28, 2008

Ok, thanks for the help!
I'm still wondering how to actually SEND this XML to the javascript. (AJAX responseText works, but only because I'm OUTPUTTING text from the .cfm file. Does <cfcontent> act as an "output" as well?)

Also, the Javascript is quite confusing to me as to how to actually distribute the data into variables, as I have tried different means.

Again, thanks!

Report · Jul 28, 2008

CFXML creates an XML object despite no "<?xml ..." tag.
CFCONTENT - note that there is no closing CFCONTENT tag - requires the "text/xml" type to be specified to create the XML object, but you can output a textual version of your output by specifying "text/text" instead.
To load a JS variable with a value, you'd set it something like this:
var xyz = myDoc.childNodes[0].getElementsByTagName("childName")[occurrence].firstChild.nodeValue.
... or from an attribute:
var xyz = myDoc.childNodes[0].getElementsByTagName("childName")[occurrence].getAttribute("myAttribute");

Report · Jul 28, 2008

Ok---EDIT WHOOPS HERE IS THE UPDATED SCRIPT
I've listed my (unworking, as it were...) code below.

I am still fairly in the dark. Defining the "Document" is where I kind of get stuck. I am sorry for the annoyance 🙂 I'm just not quite understanding the entire process. I'm just trying to get some predefined data from the .cfm page before I do anything else with GET or POST vars.
Your continued help is much appreciated.

********.cfm page*******

<cfset myxml =
'
<name>
<first>
RANDOMFIRSTNAME
</first>
</name>
'
>
<cfcontent type = "text/xml" variable="myxml">

*****.html page w/ JS******

<html>

<body>
<script>
submitData = function(){
xmlobj = new XMLHttpRequest();
xmlobj.onreadystatechange = function(){
if(xmlobj.readyState ==4){

var myDoc=xmlobj.responseXML;
var myOutput = '';
var myTarget = document.getElementById("divver");
var myRoot= myDoc.getElementsByTagName("name")[0]; // the XML root
var myChildren=myDoc.childNodes[0].getElementsByTagName("first"); // All first-level children
for (ix=0; ix < myChildren.length; ix++) {
myOutput += ... //Do something here
}
myTarget.innerHTML= myOutput;

}

}
xmlobj.open("GET","cfxml.cfm",true);
xmlobj.send(null);

}

</script>

<label>
<input type="submit" name="Submit" value="Submit" onClick="submitData();">
</label><div id="divver">VALU</div>

</body>

</html>

Javascript + CF XML Integration

1 Correct answer