28
Ajax 101 for CF Programmers Randy Brown – Michigan State University [email protected]

Recommending a Strategy

Embed Size (px)

Citation preview

Page 1: Recommending a Strategy

Ajax 101 for CF Programmers Randy Brown – Michigan State [email protected]

Page 2: Recommending a Strategy

What is AJAX? Asynchronous JavaScript And XML A nice way to create a state-full like connection in

a stateless environment. A good way to keep application logic on the server

side without using JSP. In regards to a UI it makes the webpage more

usable and interaction more responsive.

Page 3: Recommending a Strategy

AJAX Definition Summary AJAX is a Web development technique for

creating interactive web applications that use the DOM (Document Object Model) to interact with various backend server technologies without refreshing the browser .

Page 4: Recommending a Strategy

How does AJAX work? Before AJAX can be invoked you must make your

traditional HTML page request. AJAX uses xmlHttpRequest to make what I call a

SIDEWAYS request to the server. The sideways request can be done via JavaScript

or VBScript.

Page 5: Recommending a Strategy

How does AJAX work?Step 1 – HTML Browser Request

Basically this is showing the user typing in a web address and pressing ENTER or GO.

Page 6: Recommending a Strategy

How does AJAX work?Step 2 – HTML Server to Browser Response

The web server sends web-page to client; this happens on all web server platforms.

Page 7: Recommending a Strategy

How does AJAX work?Step 3 – SIDEWAYS Request to Server

Note earlier I coined the term SIDEWAYS request to mean an xmlHttpRequest

Page 8: Recommending a Strategy

How does AJAX work?Step 4 – Server responds to my SIDEWAYS request

Note how small the data response is. I’m displaying how the server only sends a piece of data back and not an entire web page with header and etc…

Page 9: Recommending a Strategy

How does AJAX work?Step 5 –SIDEWAYS request data is added and displayed in the client browser.

This is a complete AJAX request. Programmers will have to use JavaScript and CSS to control display and or how you present the data returned if at all.

Page 10: Recommending a Strategy

How does AJAX work?Step 6 – SUMMARY Complete AJAX Request

Graphically this is easy to understand. Please download serviceCapture to get a full view of what really happened. Lets build a CRUDE and simple example using CF as our server technology.

Page 11: Recommending a Strategy

Tools needed to make AJAX A TCP/IP port 80 sniffer like serviceCapture

(kevinlangdon.com/serviceCapture/ ) HTML Editor like DreamWeaver 8 Javascript Editor – DreamWeaver 8 A good Javascript Reference like

www.devguru.com

Page 12: Recommending a Strategy

AJAX Simple Example using CFMX & JavaScript This simple application will use AJAX to

communicate with a CFM file to determine if a username ([email protected]) is already taken.

In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on.

Page 13: Recommending a Strategy

Examples of AJAX websites Google Suggest (www.google.com/webhp?

complete=1&hl=en) Google Maps (maps.google.com) Netfix top 100 (www.netflix.com/Top100) Instant Domain Name Search

(instantdomainsearch.com)

Page 14: Recommending a Strategy

What is ajaxCFC AJAX model/framework implementation based

upon the CFMX language and components to promote the RAD (Rapid Application Development) philosophy.

Downloaded from http://www.robgonda.com/blog/projects/ajaxcfc/

Developed by Rob Gonda Licensed under the Apache License Version 2.0 Works with ColdFusion MX 6.0, 6,1, 7.0 and Blue

Dragon

Page 15: Recommending a Strategy

ajaxCFC Definition Summaryfrom Rob Gonda

“ajaxCFC is a ColdFusion framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.”

Page 16: Recommending a Strategy

How does ajaxCFC work?Step 0 – Do Once or as needed PREPARE your server environment Step 1 download and install the libraries on the

server Step 2 Fix your mappings to the files Step 3 extend your components

Page 17: Recommending a Strategy

How does ajaxCFC work? Step 1 – HTML Browser Request for CFM page

Basically this is showing the user typing in a web address and pressing ENTER or GO.

Page 18: Recommending a Strategy

How does ajaxCFC work? Step 2 – HTML Server to Browser Response

The web server send web-page to client; this happens on all web server platforms. However in the CFMX world the request would get routed to the CFMX application server before the page is returned to the client.

Page 19: Recommending a Strategy

How does ajaxCFC work? Step 3 – SIDEWAYS Request to Server

In the case of ajaxCFC request are made via JavaScript using the infamous utils.js and it’s DWR (Direct Web Remoting) commands. Read more about DWR at http://getahead.ltd.uk/dwr/index

Page 20: Recommending a Strategy

How does ajaxCFC work? Step 4 – Server responds to my SIDEWAYS request

In the case of ajaxCFC the request is returned as pure JavaScript code to the callback handler (instead of XML or JSON) to vastly improve performance

Page 21: Recommending a Strategy

How does ajaxCFC work? Step 5 –SIDEWAYS request data is added/displayed in the browser

This is a complete ajaxCFC request. CF programmers will still have to use JavaScript and CSS to control display and or how you present the data returned if at all.

Page 22: Recommending a Strategy

How does ajaxCFC work? Step 6 – SUMMARY Complete ajaxCFC Request

Graphically the ajaxCFC model resembles the AJAX model. Please download serviceCapture to get a full view of what really happened. Lets build a CRUDE example

Page 23: Recommending a Strategy

ajaxCFC Simple Example This simple example will use ajaxCFC to request a

variable from a server component and return it back to the client without refreshing the browser

In this example I will be using DreamWeaver 8 and serviceCapture to explain what’s going on.

Page 24: Recommending a Strategy

ajaxCFC Examples Weather example

(http://www.bizwerk.net/ajaxcfc/examples/zipcode/indexw.cfm)

Simple State Suggest (http://www.robgonda.com/blog/projects/ajaxcfc/examples/suggest/)

Fidelity Project (http://homesold.fidelitylabs.com/) Car Finder using Google earth

(http://www.dudewheresmyusedcar.com/ )

Page 25: Recommending a Strategy

AJAX vs. ajaxCFC? AJAX is like straight HTML or the base to web

development. In comparison CFML is like an abstraction of

HTML because CF developers write in CFMX but their applications deliver HTML to browsers.

Therefore ajaxCFC is a model/framework/abstraction that works on with principles of AJAX.

Page 26: Recommending a Strategy

Why Did I pick ajaxCFC RAD (Rapid Application Development) I’m a CF Programmer who likes to use

webServices and components I feel this is a simpler approach than all of the

other abstractions and pure AJAX.

Page 27: Recommending a Strategy

QUESTIONS

Page 28: Recommending a Strategy

Credits Rob Gonda – ajaxCFC -

http://www.robgonda.com/blog/index.cfm/ajaxCFC Cameron Adams - Jumping on the AJAX

bandwagon presentation CFAjax – www.indiankey.com/cfajax