MACROMEDIA COLDFUSION MX 61-DEVELOPING COLDFUSION MX, Develop Manual

Page: 703 / 860

Using WDDX 703
Converting CFML data to a JavaScript object
The following example demonstrates the transfer of a
cfquery
recordset from a ColdFusion page
executing on the server to a JavaScript object that is processed by the browser.
The application consists of four principal sections:
•
Running a data query
•
Including the WDDX JavaScript utility classes
•
Calling the conversion function
•
Writing the object data in HTML
The following example uses the cfsnippets data source that is installed with ColdFusion:
<!--- Create a simple query --->
<cfquery name = "q" datasource ="cfsnippets">
SELECT Message_Id, Thread_id, Username, Posted
FROM messages
</cfquery>
<!--- Load the wddx.js file, which includes the dump function --->
<script type="text/javascript" src="/CFIDE/scripts/wddx.js"></script>
<script>
// Use WDDX to move from CFML data to JavaScript
<cfwddx action="cfml2js" input="#q#" topLevelVariable="qj">
// Dump the recordset to show that all the data has reached
// the client successfully.
document.write(qj.dump(true));
</script>
Note: To see how
cfwddx Action="cfml2js"
works, save this code under your webroot directory,
for example in wwwroot/myapps/wddxjavascript.cfm, run the page in your browser and select View
Source in your browser.
Transferring data from the browser to the server
The following example serializes form field data, posts it to the server, deserializes it, and displays
the data. For simplicity, it only collects a small amount of data. In applications that generate
complex JavaScript data collections, you can extend this basic approach very effectively. This
example uses the
WddxSerializer
JavaScript object to serialize the data, and the
cfwddx
tag to
deserialize the data.
To use the example:
1
Save the file under your webroot directory, for example in wwwroot/myapps/
wddxserializedeserialze.cfm.
2
Display http://localhost/myapps/wddxserializedeserialze.cfm in your browser.
3
Enter a first name and last name in the form fields.
4
Click Next.
The name appears in the Names added so far box.
5
Repeat steps 3 and 4 to add as many names as you wish.