ColdFusion jQuery Introduction Part 1
ColdFusion Tutorial #42
jQuery on the client makes things as simple as ColdFusion on the server. Using the two together, you can create AJAX applications (refreshing content on the client without reloading the page) quickly and easily. jQuery provides a number of ways to bring content from the server to the client. In this tutorial, we’ll look at jQuery’s getJSON() method.
getJSON() loads JSON data using an HTTP GET request (source: http://docs.jquery.com/Ajax/jQuery.getJSON
cfhttp.cfmLet’s look at a quick sample using something you might be more familiar with... <cfhttp>. We’re going to use <cfhttp> to make a call to Twitter and get my last 20 tweets.
Note that in the URL, we’re specifying that we want the data in JSON format by appending ".json "to the username. Appending ".xml " would return XML. Since JSON is the sexier of the two, we’re going to stick wth JSON. Note that all Twitter API methods are documented at : http://apiwiki.twitter.com/Twitter-API-Documentation .
If we want to see the result, we can dump the result ( line 3 ):
jscript.jsBecause the data is in JSON format, we need to wrap the result in the ColdFusion deserializeJSON() function.
Now, that’s all well and good, but hardly makes use of AJAX. Let’s bring this application into the Web 2.0 era.
Here’s the jQuery that we’re going to start off with:
* note this is not a seperate file but is seperated out in this example for clarity.
demo.cfmAs mentioned above, getJSON() is a built in jQuery method. Similar to cfhttp, but it does expect the results to be, well, JSON. In this case, that’s not a problem, as we’re still specifying JSON in the URL.
The one change we made to the URL was the addition of the “callback=?” URL parameter. As per Twitter’s API ( HYPERLINK "http://apiwiki.twitter.com/Things-Every-Developer-Should-Know" http://apiwiki.twitter.com/Things-Every-Developer-Should-Know), this parameter wraps your response in a callback method of your choice. Because jQuery’s getJSON() method wraps the callback inside the method call, we can just pass the “?” character to indicate a dynamic callback name. To clarify regarding the callback, the getJSON() method passes 3 arguments.
URL - The URL of the page to load.
data (optional) - Key/value pairs that will be sent to the server.
callback (optional) - A function to be executed when the data is loaded successfully.
Our callback function makes use of jQuery’s each() method. It’s going to loop over each element in the JSON that’s returned from the specified URL, and take an (as of yet unspecified) action.
Putting it all together, we can do the following:
DemoSee this code running!
DownloadDownload this code as a zip!
CommentsThere are no comments!
Click button to add a comment