Client-side Web Engineering From HTML to AJAX

(1)

1

Client-side Web Engineering

From HTML to AJAX

SWE 642, Spring 2008

Nick Duan

What is Client-side Engineering?

The concepts, tools and techniques for

creating standard web browser and browser

extensions

HTML/XHTML/DHTML, CCS, JavaScript (including AJAX), ActiveXScript, etc. Plug-ins: Adobe Flash, QuickTime, etc. Java Applet running inside the browser

Tools and techniques for creating

non-browser based client applications

Standalone RSS Reader, Google Desktop, Java WebStart, J2EE web client applications, etc.

Emphasis: Dynamic browser-based web

applications

(2)

January 23, 2008 Nick Duan 3

HTML as a presentation language

HTML serves two purposes

Collecting user input to server (HTML Form) Formatting and presenting of data content from server (the rest of HTML)

Basic Web browser functions

HTTP client responsible for manage communications between client and server

HTML parser responsible for converting textual string to graphical objects (e.g. VBControl in Visual Basic, or Swing object in Java)

HTML graphic engine responsible for rending the graphic objects

Converting HTML text into

Document Objects

Document objects are programming constructs defined in the same containment hierarchy as the HTML structure

W3C standard: Document Object Model (DOM) for HTML and XML) <html> <head> <title> <body> … … </body> </html>

HTML

Parser

document form input text area button image

Text stream

Document Objects Graphic engine

(3)

What is JavaScript?

JavaScript is not Java. Invented by Netscape in mid 90s. The latest version is 1.6

JavaScript is a scripting language, initially designed to support user interactions with document objects

Provide APIs to access and manipulate document objects. Now a standard supported by all major browser vendors Embedded in HTML pages, extensible to include user-specified functions and libraries

Interpreted as the page is loaded

Save time and bandwidth for simple manipulations (Data validation, simple math and other functions)

A JavaScript program is embedded in a single HTML page, and is executed within the browser when that page is rendered

It is not strong-typed, but is case-sensitive.

JavaScript Example

<HTML> <HEAD> <TITLE>Calculator Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> … <H1>Calculator Example</H2> <TABLE> <TR>

A JavaScript program is defined as a set of functions within the <script> element embedded in the <head> element of the same HTML page

Invocation of JavaScript functions are either during loading the page or via user events generated in an HTML form . Most DOM objects contains one or more event handlers

(4)

JavaScript as an OO language

Standard global objects

Array, Boolean, Date, Error, Number, Object, String, …

Each has its own properties and methods

Global functions

Object constructors, eval, decodeURL, encodeURL, parseInt, …

Statements

if.. else, for, while, do.. while, function,…

Operators

+, -, *, /, ++, --, |, &, >>, <<, ….

The JavaScript object hierarchy

Window

Frame

Navigator

History

Location document

form link anchor area … … image

Plugin MineType

textarea text button password checkbox … … select

DOM Objects

Object

String

Array Math … … Error

(5)

Accessing DOM objects

Use document as the default document of the

HTML page (since one document object per

page)

Define the first hyperlink in the HTML page

Access the link object via the document object

as a property

document.links[0].onclick = verify; Same as

Since the initial HTML construct is fixed, you should be able to access any DOM object via the form

document.x.y.z…

Dynamicity: to obtain/change values of the objects, or add or remove objects of the page

Note: document.links[“next”] is an invalid expression

JavaScript Applications

Two major purposes:

I. Build HTML dynamically when page is loaded II. Monitor user events and take action

Classes of applications

1. Customizing web pages

2. Making web pages more dynamic

3. Validating user input in HTML forms 4. Manipulating cookies

5. Interacting with frames

6. Create Asynchronous JavaScript and XML applications (AJAX)

(6)

What is AJAX

A suite of development technique for

creating fine-tuned interactive web

applications at the document component

level (instead of a the page level)

The term was introduced by Jesse James

Garrett in early 2005, but the underlying

technologies are much older:

New JavaScript object - XMLHttpRequest (initially invented by Microsoft in IE5, now a standard of W3C)

XML (used as the data transfer format) DOM, CSS, etc.

Converting HTML text into

Document Objects

XMLHttpRequest is able to make remote connections to a different web server. It can be considered as an embedded web client

XML (HTML as being a subset of XML) is primarily used as the payload format for XMLHttpRequest

document form input text area button image Document Objects Web Server XMLHttpRequest HTML Web Server Web Client

HTML Page with JavaScript Program XML or other structure

(7)

The XMLHttpRequest Object

Event Handler: onreadystatechange;

State constants: UNSENT = 0; OPENED = 1; HEADERS_RECEIVED = 2; LOADING = 3; DONE = 4; Read-only Attribute: readyState responseText responseXML status statusText Methods

open (in DOMString method, in DOMString url);

open (in DOMString method, in DOMString url, in boolean async); open (in DOMString method, in DOMString url, in boolean async, in DOMString user);

open (in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password);

setRequestHeader (in DOMString header, in DOMString value); send(); send(in DOMString data); send(in Document data); abort();

getAllResponseHeaders(); getResponseHeader(in DOMString header);};

AJAX Example

function AjaxRequest() { var requestObj;

if (window.XMLHttpRequest) {

requestObj = new XMLHttpRequest(); }else {

requestObj = new ActiveXObject("Microsoft.XMLHTTP"); }

requestObj.onreadystatechange = function() { if (requestObj.readyState == 4) {

if (requestObj.status == 200) {

var data = requestObj.responseXML; document.textarea[0].value=data; }

} }

var url = “http://www.google.com”; requestObj.open(“GET”, url, true);

Compatibility Test with older version of IE

Inline Callback Function for the Request Object

(8)

Putting it together

<html> <head> <script language=“javascript”> function AjaxRequest() { ………….. } </script> </head> <body>

</body>

Leading the Wave of Web 2.0

AJAX is a convenient way to create Rich Client Applications

Building AJAX through frameworks (Widgets and server site components for rapid web development)

DOJO JaxBe

Google Web Toolkit (GWT) Direct Web Remoting (DWR) Ajax JSP Tag Library

AJAX Framework for Java and .Net

Main techniques behind Data Mash-ups in Web 2.0

Customized API on top of the XMLHttpRequest API GoogleMaps, MicroSoft Maps, Yahoo Pipes, etc.

(9)

Online References

HTML Specs http://www.w3.org/hml DOM Specs http://www.w3.org/DOM/

JavaScript Reference and Tutorials

http://developer.mozilla.org/en/docs/Core_JavaScript_ 1.5_Reference http://www.w3schools.com/js/default.asp AJAX References http://developer.mozilla.org/en/docs/AJAX http://www.w3schools.com/ajax/default.asp http://www.w3.org/TR/XMLHttpRequest/#ref-ecmascript

Summary

Client-side engineering is moving from simple HTML page design to more robust rich client applications as higher bandwidth becomes available

The development of rich client applications request the use of a combination of client-side techniques, including DOM/XTML, CSS, JavaScript, AJAX, etc.

JavaScript provide a dynamic and programmatic way to manipulate web page component. It is the de-facto standard supported by all major browser vendors.

AJAX applications, based on the use of XMLHttpRequest object, have the advantage of interacting with remote services at the page component level, enabling partial update of web pages and data mash-ups from multiple data sources at the client side

Client-side Web Engineering From HTML to AJAX