Darryl Lyons' Blog: AJAX with dynamic SCRIPT tags -- revised

Please note, new blog at http://www.acheron.org/darryl/

Monday, April 18, 2005AJAX with dynamic SCRIPT tags -- revised

At work we have been experimenting with various methods of retrieving data from the server-side. The most traditional AJAX approach is by using the XMLHTTPRequest object (asynchronous or synchronous) as the transfer mechanism and XML to describe the data. Another method is using JavaScript SCRIPT tags as the transfer mechanism, and JavaScript Object Notation (JSON) or regular JavaScript syntax to "describe" the data. You can achieve this by dynamically creating JavaScript SCRIPT tags, where the source (src) is a ColdFusion template that generates JavaScript. I think that this is the easiest and quickest method of AJAX, and it really allows you to reuse your existing business logic quickly. 1. Static JavaScript file dynamically creates a SCRIPT tag via the DOM 2. The source of the SCRIPT tag is the ColdFusion template that dynamically creates the JavaScript code. As an example, let's retrieve a bunch of artists from the sample artist database that comes with ColdFusion MX. I'll then draw the artists to an existing HTML table using the DOM. By the way, this code only works in Internet Explorer (but could be easily modified to work in Firefox). Given it is an example, I have a certain license! :) display.html This is a sample HTML page that contains the empty table ready for population. Upon first load, the table is automatically populated.

<html>
<head>
<title>JSON Test</title>

<script src="artists.js"></script>
</head>

<body>

<a href="javascript:getArtists()">Call getArtists() method -- appends to table!</a>

<br/><br/>
<table id="artistTable">
<caption>Artists</caption>
<thead>
<tr>
<td>ID</td>
<td>Last Name</td>
<td>First Name</td>
<td>City</td>
</tr>
</thead>
</table>
<script>
getArtists();
</script>
</body>

</html>

artists.js This JavaScript file contains methods that will dynamically create the SCRIPT tag. The src attribute of the SCRIPT tag is the getData.cfm ColdFusion template, which creates the JavaScript data. The populateUI method (which populates the table with the data) is only called once the SCRIPT tag's readyState has changed to "loaded".

function getDataFromServer(id, url, callback)
{

oScript = document.getElementById(id);
var head = document.getElementsByTagName("head").item(0);


if (oScript)
{
// Destory object
head.removeChild(oScript);

}


// Create object
oScript = document.createElement("script");

var dtRf = new Date();

oScript.setAttribute("src",url + "?rf=" +dtRf.getTime());
oScript.setAttribute("id",id);

head.appendChild(oScript);

if (oScript.readyState!="loaded")
{
oScript.onreadystatechange = function()
{
if (this.readyState == "loaded")
{
eval(callback);
oScript.onreadystatechange = null;
}
}
}
else
{
alert('Cannot load data!');
}

}

function getArtists()
{
getDataFromServer("artistData","getData.cfm","populateUI()");
}

function populateUI()
{

oTable = document.getElementById("artistTable");

// Loop over the data in the JS array, and add to table
for (var i=0; i < aData.length; i++)
{
// Create a new TR element
oTR = oTable.insertRow();

// Create a call for each element in struct
oTD = oTR.insertCell();
oTD.innerHTML = aData[i].artistid;

oTD = oTR.insertCell();
oTD.innerHTML = aData[i].lastname;

oTD = oTR.insertCell();
oTD.innerHTML = aData[i].firstname;


oTD = oTR.insertCell();
oTD.innerHTML = aData[i].city;
}
}

getData.cfm This ColdFusion template performs a query on the artist database. The query is then converted to an Array of Structures (using QueryToArrayOfStructures from cflib.org), and then converted to JavaScript using the CFWDDX tag. I am not *really* using JSON here. But, by using the bult-in ColdFusion JavaScript conversion functionality in the CFWDDX tag, you achieve the same result, it's just not as light-weight.

<cfsetting enablecfoutputonly="true">

<cfquery datasource="cfartgallery" name="qData">
SELECT *
FROM artists
ORDER BY lastname, firstname
</cfquery>

<cfwddx action="cfml2js" input="#QueryToArrayOfStructures(qData)#" output="jscontent" toplevelvariable="aData">

<cfoutput>#jscontent#</cfoutput>

There you have it! I'm pretty sure this code shall work, and I welcome any comments or improvements. It was put together pretty quickly!

By Vesa, at 4/18/2005 03:17:00 AM

Darryl, thanks for sharing. And im so happy to see AJAX example instead of just talking how "wonderful it can be".

I will try this with php later (There was PHP-JSNO but i think i can handle without it)

By Gary Menzel, at 4/18/2005 09:34:00 AM

Just a point to note: the CFMX WDDX tag doesn't produce JSON (which is actually a shorthand notation for creating objects and arrays in JavaScript) - it produces "new Array" and "new Object" syntax.

By John Dowdell, at 4/18/2005 12:26:00 PM

"The most traditional AJAX approach is by using the XMLHTTPRequest object (asynchronous or synchronous). Another method is using JavaScript Object Notation (JSON), and get JavaScript code from the server instead of XML."

That's where I lost my bearings, sorry... XMLHttpRequest is a transfer mechanism (like the initial page request, or an innerFrame refresh), but JON seems a formatting convention, independent of transfer mechanism...?

How does data get one from machine to the other, and when...?

tx, jd

By Darryl Lyons, at 4/18/2005 06:47:00 PM

Gary, you are right, I am not using JSON. The CFWDDX tag allowed me to quickly convert the ColdFusion variable into JavaScript code. So when's the CF2JS tag coming out? :)

By Darryl Lyons, at 4/18/2005 06:55:00 PM

John, yeah, you are right. I've changed the post a bit so it hopefully makes more sense.

The transfer mechanism in this example is actually the creation of the SCRIPT tag using the DOM. The source of the SCRIPT tag is the dynamically created JavaScript code (arrays of structs, arrays, etc) that can then be used on the client-side.

You're right, JSON is a lightweight formatting convension. The theory is that it should be a lot quicker to dynamically create the SCRIPT tags, and transfer a more lightweight version of the data than by using XMLHTTPRequest and XML.

I think that this method is a lot easier. Any reasons not to use it?

By John Dowdell, at 4/19/2005 08:39:00 AM

"The transfer mechanism in this example is actually the creation of the SCRIPT tag using the DOM. "

? But how does that request fresh data from the server...?

tx, jd

By Darryl Lyons, at 4/19/2005 06:18:00 PM

When the SCRIPT tag is appended to the DOM, the SRC of the SCRIPT tag gets executed.

When the SCRIPT tag is removed from the DOM and then re-added, the SRC gets executed again. You'll notice that I've placed a "rf (refresh)" in the query string so that the browser won't cache the returned file.

In my example as well, the data is refreshed manually by calling the "getArtists" method. You could create a timer in JavaScript to automatically go and get new reminders.

By Darryl Lyons, at 4/19/2005 06:18:00 PM

BTW, sorry it takes so long for me to answer. They block pretty much anything at work, so I can't actually check my blog!

By Jehiah, at 5/13/2005 01:58:00 PM

(as you already know) You arn't using really JSON... but you could.

I just finished publishing two coldfusion functions jsonencode() and jsondecode() today.

http://jehiah.com/projects/cfjson

enjoy

By Will, at 1/26/2006 09:33:00 AM

I'm try to use the "on-demand javascript" approach to load '000s records from a dataset as javascript array for display in a grid (ActiveWidgets grid). Using this type of code (actually revised I guess by Jason Levitt in article "Fixing AJAX: XMLHttpRequest Considered Harmful") I find that it works OK in IE6, but as soon as you put the dynamic script tag addition into the function getDataFromServer, Firefox seems to carry on loading the rest of the page before the data has finished downloading. Outside of a function FF loads the data from the new script tag OK, waiting for it to finish before running the rest of the page.

Is there a good cross browser way of doing this?

Any suggestions much appreciated.
Many thanks, Will

By Darryl Lyons, at 1/26/2006 12:06:00 PM

Will, I haven't really seen that article in much depth, but I'll try to help. You would probably be better off using one of the multitude of JavaScript libraries out there to perform asynchronous data delivery. They don't use on-demand JavaScript, but use cross-browser XMLHTTPRequest. You can try MochiKit (http://www.mochikit.com/) or Dojo Toolkit (http://dojotoolkit.org/).

In an up-coming post I will be explaining the principles behind batch delivery of records. For example, instead of kitting 1000's of records at time, you get them in batches, so you can progressively load data.

By Raja, at 2/15/2007 11:21:00 PM

An article regarding generating grid using Script callback

http://techtreasure.blogspot.com/2006/10/generate-grid-using-script-callback.html

By sjinji kiwasiki, at 10/26/2007 11:08:00 PM

there is also a large and comprehensive database of 800+ ajax scripts available with over at ajaxflakes’s ajax scripts compound

thought i should add it might be helpful to others…

here

By radha, at 11/23/2007 07:08:00 PM

hi friends this is radha,

i created one table in html then that displays the table format.
my question is i want to display the several tables using for loop in html.
please send me a answer.
how to write that code in html.

By radha, at 11/23/2007 07:11:00 PM

hi friends,
i developed one application using beans.
but using beans how to access the values from the database in jsp.

please send the result .
thank you.

By Pat, at 1/15/2008 07:06:00 AM

Darryl -

I like your cross-domain solution with JSON/WDDX. How would you use data which is not JSO/WDDX but is just plain HTML or TEXT (ie., 1234aasdas)?

TIA,
Pat

By EmpowerTube, at 4/10/2008 08:24:00 PM

How do I refresh Google Blogger page using any refresh script?

http://empowertube.blogspot.com

By Lucas, at 9/09/2008 09:42:00 AM

Thanks for sharing, man. It saved my life.

By wow power leveling, at 1/21/2009 04:19:00 PM

welcome to the wow gold, cheap WoW Power Leveling, service site,wotlk gold buy cheap wow gold,wow gold,world of warcraft power leveling buy wow gold

By dorsey, at 2/25/2009 10:07:00 PM

I want to be Web designer. And this is very good tip for Web designers. I got very good information on ajax with dynamic script tag..

By bel, at 4/22/2009 07:54:00 PM

buy wow gold buy wow gold buy wow account buy wow gold

By Aloke Saha, at 7/15/2009 07:33:00 PM

http://www.intagent.com

Intagent is a Leading Real Estate Web Design Company. We provided Real Estate Web Design, FSBO Websites, Realtor Website Design,Low cost Real Estate Website Design, Real Estate Agent Design Templates, and more...

By wujing, at 7/21/2009 06:29:00 PM

Dear friend !
1.We can offer all kinds of wholesale watch. We offer safe delivery and best service,low price and good quality.
2.We have excellent customer service team, which could solve online various problems about wholesale watches we provide in 24 hours.
3.We have perfect Logistics system, which guarantees all the ordered replica watches are delivered to you in good shape as fast as possible.Communicate with us.You will be very satisfied! Hope we can do long-term business in near future.

Rolex Watches
Omega Watches
Tissot Watches
Panerai Watches
Piaget-Watches
Zenith Watches
Baume Mercier Watches
Bvlgari Watches
Concord Watches
Corum Watches
Longines Watches
Louis Vuitton Watches
Mont Blanc Watches
Oris Watches
Rado Watches

Raymond Weil Watches
Tag Heuer Watches
A Lange & Sohne Watches
Piguet Watches
Bregue Watches
Dior Watches
Gucci Watches
Jaeger LeCoultre Watches
Patek Philippe Watches
Vacheron Constantin Watches
Breitling Watches
Cartier Watches
Chopard Watches
IWC Watches

Best regards! Thank you !

By Ebuy4cheaps, at 8/29/2009 02:36:00 PM

By J&D, at 9/18/2009 07:52:00 PM

av女優
我av我情人趣味用品我愛爾蘭我情人趣味愛蜜莉我情人趣味用品我情趣我用品

 情趣用品我情趣用品我aio交友愛情館我一葉情貼圖片區我一葉晴貼影片區

By eda, at 10/03/2009 02:39:00 PM

潤滑液,SM,內衣,性感內衣,自慰器,充氣娃娃,AV,
情趣,G點,性感丁字褲,情趣,角色扮演服,吊帶襪,丁字褲,情趣用品,無線跳蛋,男女,

情趣按摩棒,自慰套,角色扮演,按摩棒,跳蛋,情趣跳蛋,
.,
按摩棒,電動按摩棒,飛機杯,視訊,自慰套,自慰套,情趣用品,情趣內衣,

By James praker, at 10/12/2009 07:56:00 PM

Darryl i want to thank you i am doing web designing and feeling so many difficulty in the AJAX language now after reading your comment i am relaxed and feeling comfortable in using the AJAX..
SO thanx for sharing Darryl..

By James praker, at 11/05/2009 05:28:00 PM

Hi

I am have not not knowledge about script but I have got better information about script code.

- J.
Web Solutions

By purple rain, at 11/10/2009 12:44:00 PM

I like your blog, it's very good!
By the way, do you like spyder down jackets, I think they are very fashionable and chic, especially the spyder ski jackets, I love them so much. In my spare time, I also like playing tennis rackets, it can keep healthy, what do you like to do?
kids north face jackets
polo vest
polo jacket
abercrombie fitch mens shirts
polo jackets for men
polo jackets for women
burberry shirts for men
polo hoodies for women
columbia jackets women
polo sweatshirts for women
north face jackets on sale
polo shirts for women
polo shirts wholesale
spyder jackets
ralph lauren polo shirt
polo pants for men
abercrombie fitch shirt
wholesale abercrombie fitch shirts
polo vests
polo jackets
polo hoodies for men
burberry shirts for women
burberry shirts on sale
polo shirts for men
north face jackets cheap
north face jackets for women
north face jackets for men
polo sweatshirts for men
columbia jackets for men
columbia jackets discount
spyder jackets for men
discount spyder jackets
cheap spyder jackets
spyder jacket
spyder jackets for women
tennis racquets
cheap tennis rackets
discount tennis rackets
tennis rackets on sale
prince tennis racquets
head tennis racquets
wilson tennis racquets
babolat tennis racquets