WAMMO Meeting in DC: Ajax § The Adventures of Cindy Li

WAMMO Meeting in DC: Ajax

April 11 , 2006

Introduction to AJAX

Steve Drucker, CEO, Fig Leaf Software

Next month:

Google w/cold fusion
google optimization SEO, have you been seo’d to death?
google site maps, tracking,
insert javascript and reports back to google

AJAX

Syncronistic XML using javascripting, dynamic xml how to get info from the page without hitting the server using scripting to dynamicallly change page contents interacting w/the server

Using the CFAJAX API

makes it simple to create ajax applications, cold fusion library starts resembling something you build in flash, the syntax seems oddly familiar Optimizing, troubleshooting and debugging ajax applications Know html, css, javascript is the major Why is Figleaf's a one day ajax class? when normally it is 3days? one day is prereq two day javascript class (2day)

What is AJAX?

Asynchronous javascript and xml using html/xhtml/css for styling output the browser DOM is accessed by a scripting language (javascript) to poll values values are sent transparently to the server using the XMLHTTPRequest() object. If XMLHTTPRequest() is not supported, then hidden IFRAME is used Results from the server are transmitted back to the client in XML Format (damn slide changed)

What is AJAX important

Buzzword commpliancy! Its's the experience! USability/performance is somewhat improved. Response teims are dimished somewhat as the user does not need to reload the contents of an entire page AJAX applications are cross-platform (sort of)

IE 5_
Gecko-based browsers
Safari v 1.2+
Opera 8+

Drawbacks to AJAX

Accessibility (section 508) - probably need to develop a "fallback" interface Back button is still problematical Browser caching can still be an issue Debugging when XMLHttpRequest() is.. "special"-look at your cold fusion reports

The truth about AJAX

Many developers have been building AJAX style applications since v 3.0 browsers (97) debuted FRAMSETs Google Maps (ironically uses IFRAME) popularized the term More promising solutions may already exist (Flash/Flex 2)

The reason why we're excited and not ...

summer release for flex 2... rumor-mill Flex is built w/cold fusion deals with 508, more promising if you are trying to get compliant

Javascript Review

Topics
Inserting Scripts
X-browser compatibility
variables
object and methods
the document object hierarchy
manipulating arrays
creating objects

inserting scripts

use the <script> tag with the <head> section of a document <html> <head> <script language="Javascript"> alert("Hello World")> put the script at the top Linking to scripts You can link to javascript contained in an external file Generally increases performance as the external scripts can be cached separately from the rest of the html page X-browser compatibility

AJAX will work on 5.0+ browsers

Ie 5+
Gecko-based browsers
Safari v. 1.2+
Opera 8+
Javascript must be enabled
You can use Dreamweaver to deploy a browser compatibility check window> behaviors> check browser
Check the value of navigator.userAgent
Variables and general syntax
Javascirpt is case-sensitive
statements must be terminated with a;
you can have multiple statements per line
variables are loosely typed
declare variable using the var keyword

(slide changed)

Objects and methods

initialize new arrays using the the new Array() constructor create an object the new Object () constructor Think in two/three dimensions The key to understanding is that you've got processes that are happening at the same time. the coldfusion is instructing the array.. first the second is the javascript

How do I debug?

View source .. look at the generated code coldfusion/javascript together you want to put #jstringFormat so that you can avoid the issues that may come from <script language="javascript"> alert(window.document.forms[0].lastname1.value); alert(document.getElementById('last name0').value; </script>

Hyperlink data you should use an anchor array

get away document.alllastname1.value it will only work in IE and not netscape

Notes

Will be postd on Figleaf site

how you would pull data dynamically using an iframe in the search interface do a search by last name create a form <script language="javascript"> fuction fnSearch() { var lastname = document.forms[0]lastname.value; document.dataframe.location.href='loaddata.cfm?lastname=' + escape(lastname); } <cfform> <cfinput type="text" name="lastname" size "20" maxlength="20"> <input type="submit" value="Search" onClick]"fnSearch()" /> </cfinput></cfform> <iframe src="empty.html" name="dataframe"></iframe>

---------------------------------------------

<cfset url.loastname = url.lastname & "%"> cfquery name='qdata" datasource="#application.datasource#"> select * from [user] where lastname like <cfqueryyparam cssqltype="cf_sql_varchar" value"#url.lastname#">

sql...for security

where lastname like </cfqueryyparam><cfqueryyparam cssqltype="cf_sql_varchar" value"#url.lastname#"> </cfqueryyparam></cfset></script></head></html></head></script>

Most of it went over my head

but I was hoping some of it would be through osmosis.