An Introduction to Ajax Programming

An Introduction to Ajax Programming Dr. Harry Chen CMSC 491S/691S March 5, 2008

Agenda

What’s Ajax? (revisit)

JavaScript in 10 minutes

DOM and XMLHttpRequest

Programming Ajax with Mochikit

Ajax Pitfalls

Ajax in gnizr

Ajax

A synchronous J avaScript A nd X ML

The idea is to enable interactive Web pages without requiring the browser to refresh.

Browser JavaScript code 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 minutes Examples 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 Model

All XHTML doc are XML doc

DOM 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 JavaScript code 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

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!