Skip to main content
F
freedomflyer
Known Participant
July 28, 2008
Answered

Javascript + CF XML Integration

  • July 28, 2008
  • 4 replies
  • 494 views
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!
This topic has been closed for replies.
Correct answer
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:

4 replies

F
freedomflyerAuthor
Known Participant
July 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>
A
Anonymous
July 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");

F
freedomflyerAuthor
Known Participant
July 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!

A
Anonymous
Correct answer
July 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:
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices