This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/us/

An Introduction to Ajax Programming

Dr. Harry Chen

CMSC 491S/691S

March 5, 2008

Agenda

What’s Ajax? (revisit)JavaScript in 10 minutesDOM and XMLHttpRequestProgramming Ajax with MochikitAjax PitfallsAjax in gnizr

Ajax

Asynchronous JavaScript And XMLThe idea is to enable interactive Web

pages without requiring the browser to refresh.

Browser

JavaScriptcode

Web Server

“Give me some data”

“Here, data”

Modify the page content, without refreshing the page

Ajax vs. tradition HTTP paradigm

In the tradition HTTP world Every request results in a new page loading Dynamic pages are created on the server-side Data, format and styling are done on the server

In the Ajax world The result of an Ajax call may only change a small parts

of an existing HTML page Server sets up the page structure, JavaScript code

performs the content creation Data, format and styling are done via JavaScript (CSS

and XHTML)

Ajax is a 3-Legged Stool

XHTML JavaScript

CSS

Ajax

Adopted from Simon Wilson: http://www.slideshare.net/simon/how-to-make-ajax-work-for-you

JavaScript in 10 minutesExamples adopted from http://www.w3schools.com/js/js_examples.asp

Say “hello world”

What’s ‘document’?

Write into HTML <body/>

‘document’ is a predefined JavaScript variable that represents the entire HTML document.

You can read from and write to the current document via this ‘document’ variable.

Loading JavaScript code

Two ways to load your JS code Inline within the same HTML document From a separate file on the server

e.g., Replace ‘xxx.js’ with http://path/to/myprogram.js

Define variables

Define Array and Associative Array

Function

Assign Function to a Variable

In JavaScript, you can assign function to a variable.

Additional Resource

JavaScript Tutorial http://www.w3schools.com/js/

PPK on JavaScript http://www.quirksmode.org/

I love it!

DOM and XMLHttpRequest

DOM

Document Object ModelAll XHTML doc are XML docDOM is a process-model for XML

For reading and writing XML doc

We can use DOM to manipulate XHTML

DOM Tree

http://flickr.com/photos/13571173@N00/411653343/

An XML DOM (not XHTML)

<bookstore> <book category=“c1”> <title lang=“en”>Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book></bookstore>

HTML DOM Tree – an example

JavaScript DOM

Browser’s JS engines provides predefine HTML DOM objects

‘Document’ DOM

Predefined objects come with predefined properties and methods

http://www.w3schools.com/htmldom/dom_obj_document.asp

Watch out for browser support!

DOM Manipulation

Operations for manipulating DOM objects are similar in different programming langauges – e.g., Java, PHP and JavaScript.

Tutorial http://www.w3schools.com/dom/default.asp

XMLHttpRequest

Is a specification (see W3C doc)Defines an API that provides scripted

client functionality for transferring data between a client and a server

Browser

JavaScriptcode

Web Server

“Give me some data”

“Here, data.”

Modify the page content, without refreshing the page

Done via XMLHttpRequest

Clarification

Use XMLHttpRequest to send and receive data from servers via HTTP

Data sent and received can be any text format, not just XML.

Works over HTTP and HTTPS

http://www.w3.org/TR/XMLHttpRequest/

Fetch XML Data from the Server

http://www.w3.org/TR/XMLHttpRequest/

Send data using XMLHttpRequest

http://www.w3.org/TR/XMLHttpRequest/

Common Problems with DOM and XMLHttpRequest

XMLHttpRequest Cross-browser Issues

Most browsers support the standard implementation, but some provide extra support that others don’t. Firefox implements standard and more IE implements just the standard

XMLHttpRequest Creation

Creating an XMLHttpRequest object is done differently depending on the browser.

Checks which browser the client is using!

Crazy!

DOM Cross-browser issues

DOM API differs from browser to brower.

Remember this chart?

Get Node Value – FF vs. IE

Additional Reading

AJAX - Common Pitfalls http://grover.open2space.com/node/92

Ajax Programming with Mochikit

JavaScript Libraries

To make JavaScript developer more productive, many JS libraries have been created. MochiKit I prefer; light-weight and simple jQuery Yahoo! UI library Prototype Script.aculo.us

MochiKit

A collection API that simplify JavaScript programming “Makes JavaScript suck a bit less”

http://www.mochikit.com

Load MochiKit

All API can be loaded from a single file

<script type="text/javascript" src="MochiKit.js"></script> 

What does MochiKit provide?

Ajax programmers look here!

Fetch JSON Data from the Server

The location of the data.

Instantiate a function for making the call.

Define how we want to handle the “response”.

Actually makes the call.

What we didn’t do!

We didn’t have to create the XMLHttpRequest object ourselves.

Don’t have to worry about those cross-browser issues.

We don’t have to deal with HTTP methods -- “PUT”, “GET” etc.

Additional Reading

Reading MochiKit’s doc for How to manipulate DOM How to change CSS style How to deal with asynchronous events How to enable Drag and Drop How to exploit JavaScript functional and OO

programming

Ajax Pitfalls

Ajax Programming Issues

Breaking the back button

Not giving immediate visual cues for clicking widgets “Did I click?”, “I thought I have clicked”

Data loading issues

Loading… Please wait… (after 3 secs)I’m still loading. Please wait… (after 5

secs) I’m still loading. Please wait.. (after 30

secs)User: forget you. I’m leaving.

JavaScript Code Loading Issue

Too much JavaScript code can slow down the performance the client browser.

Only use JavaScript and Ajax when it is necessary.

More code != Better program

Search Crawler Issue

Text content rendered by JavaScript is not accessible to search crawler.

Empty page?

Accessibility

Not all screenreaders are built to work with Ajax applications.

http://www.sitepoint.com/article/ajax-screenreaders-work

Summary

Ajax programming can make Web pages to be more interactive and responsive.

XHTML, CSS and JavaScript are the key components Ajax

Ajax uses XMLHttpRequest object to send and receive data

Study Ajax Pitfalls can help you to build more effective Mashup and Web 2.0 apps.

Ajax Programming in gnizr