AJAX (Asynchronous Javascript and XML)

By Sandeep Desai (http://www.thedesai.net)

 

Using AJAX and DHTML (Javascript and DOM) web applications can be written so that instead of refreshing the page, the application makes an asynchronous request to fetch data and using Javascript update the page. Mozilla has useful tools like Javascript Console and the Javascript Shell Plugin that help in Javascript and AJAX development

 

AJAX can recieve data as XML, JSON or Javascript code

What is AJAX by Jesses James Garrett

 

AJAX and JSP example

 

Browser differences

 

IE can’t handle mixed case id the below will fail

e.g <p id=”cityState”>

     document.getElementById(‘cityState’)

Ajax based Web 2.0 applications

 

AJAX based spread sheets are available at EditGrid, iRows and NumSum, full fledged office suites are available at Zoho and ThinkFree

 

AJAX for Java Developers

 

The frameworks that a Java and AJAX developer will find very useful are Dojo, JSON and DWR

Dojo 0.3 FAQ

 

The best way to see Dojo features is to download a nightly build and view the test HTML pages

 

How to show a debug console in the browser using Dojo?

 

Make this the first script line in your HTML or Javascript file even before the include dojo.js

 

<script type="text/javascript">

  var djConfig = { isDebug: true };

</script>

<script type="text/javascript">

   dojo.require("dojo.widget.DebugConsole");

</script>

 

 

Add this div to your HTML file

<div dojoType="DebugConsole"

             hasShadow="true"

             resizable="true"

             displayCloseAction="true"

             layoutAlign="client" >

</div>

 

Call dojo.debug(s) with string parameter.

 

What components does Dojo have ?

 

How to get a widget

 

treecontroller = dojo.widget.byId('treeController')

tree = dojo.widget.manager.getWidgetById("mytree");

 

 

Dojo tree

 

// in div set widgetId=”mytree”

tree = dojo.widget.manager.getWidgetById("mytree");

 

AJAX

 

Architecture is decisions that are very hard to undo later in the software project. If they are not hard to undo then they are not architecture decisions by Martin Fowler

 

Rich Internet Applications

 

 

AJAX allows you to build web applications that are more responsive. It does this by allowing you to partially refresh parts of your HTML page. The problem with non AJAX web application (Web 1.0) applications is that they require full page refresh for any server side request e.g. a chat application would require a full page refresh after the user has typed a message. AJAX applications make asynchronous request to the server and will only dynamically add the new message.

 

 

Application best practices

 

Tools

 

Libraries (required to handle browser differences, will have XHR wrapper)

 

Javascript code can cause memory leaks in browsers, requires a fix by the browser vendor

Eval(String) can evaluate Javascript code on the fly

 

props(obj)

props(document)

document.getElementByTagName(“H1”)

document.getElementByTagName(“city”)

 

JSON (Javascript Object Notation)

Javascript has small library need some 3rd party libraries

 

www.codecite.com nejug/galaxy

 

5 different testing frameworks available (mochikit ???)

 

 

 

Books

 

AJAX Links

 

Ajax Blogs

 

Dojo Framework

 

Javascript

 

Javascript and Java

 

Other Rich Internet Application Technologies

 

 

AJAX Application Examples

 

CSS/DHTML examples

 

Javascript libraries

Javascript

 

Javascript was invented by Netscape. Javascript is a lightweight, interpreted programming language with object-oriented capabilities. It is supported in IE, Mozilla and other browsers. Client side Javascript is used to make web pages more dynamic. It’s syntax is similar to Java, C and C++. Microsoft calls the language Jscript. It is also standardized as ECMA-262 standard as ECMAScript. Javascript can be used anywhere not just in the browser. Standalone interpreters are available. Rhino is a Javascript implementation in Java.

 

IE 5 includes JScript 5.0 is partially compliant with ECMA v3., DHTML with document.all[]

IE 5.5 includes JScript 5.5 is roughly equivalent to JavaScript 1.5 and compliant with ECMA v3. Partial support for W3C DOM

IE 6 inlcudes JScript 5.5. Partial support for W3C DOM; lacks support for W3C DOM event model

 

Mozilla and Netscape 6 includes JavaScript 1.5 compliant with ECMA v3 and is implemented by Mozilla and Netscape

Jscript 5.5. They support W3C DOM

 

Javascript

 

 

Javascript Objects

 

 

You can type javascript:5%2 (like http:) for quickly evaluating Javascript code

 

 

 

Good website on Javascript by Peter Paul Koch http://www.quirksmode.org/

Javascript and DOM slides