AJAX: Cleaning Up the Web

2007 North Carolina Computer Instructors Conference

Carteret Community CollegeMarch 14-16, 2007

Randy ParkerPiedmont Community College

Roxboro, NCparkerr@piedmontcc.edu

www2.piedmontcc.edu/faculty/parkerr/ajax

A J A X

Asynchronous JavaScript And XML

Based on the XML HTTP Request (XHR) object created by Microsoft Corp. in 1997

AJAX – term coined by James Garrett in February 2005

A J A XAsynchronous JavaScript And XML

What is AJAX? AJAX is NOT one single new technology A grouping of technologies used to produce Web

Applications with a similar “look and feel” as desktop applications.

Required: HTML/XHTML JavaScript File or program on server to fulfill request

Not Required but often used: XML Server side applications (ASP, PHP, etc…) Databases

A J A X

Asynchronous JavaScript And XML Why use AJAX?

To provide a desktop-like user interface for Web Applications

Increased user satisfaction: Improved response time No plug-ins or other special installations on

the Browser Reduces redundant content on the Web

A J A X

Asynchronous JavaScript And XML How is AJAX used?

Yahoo Mail (Beta) Google Suggest Google Maps (maps.google.com) My Database Retrieval Application

with Suggest - Customers And many more…

Traditional Yahoo Email

Traditional Yahoo Email

Yahoo Email (Beta) using AJAX

Yahoo Email (Beta) using AJAX

A J A X

Asynchronous JavaScript And XML How is AJAX used?

Yahoo Mail (Beta) Google Suggest Google Maps (maps.google.com) My Database Retrieval Application

with Suggest - Customers And many more…

A J A X

A – Asynchronous

J – JavaScript

A – And

X – XML

Asynchronous Traditional Web

Application Synchronous

1. Client sends request2. Client waits for

response3. Server process request4. Client displays results

AJAX-enabled Web Application Asynchronous

1. Client may send multiple requests

2. Responses may be returned in any order

A J A X

A – Asynchronous

J – JavaScript

A – And

X – XML

JavaScript A programming language that runs in a Browser Embedded in a Web page or included as a separate file Activated when the page loads or when a button or link

is clicked AJAX uses JavaScript to send an HTTP request (XHR) to a

server The server sends the results back to the same JavaScript

AJAX Client/Server Interaction

JavaScriptfunction showCustomerName(customerName){ var WebURL="customerNameOnly.asp?sid="+Math.random()+"&CustomerName=" + customerNamexmlHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”)xmlHttpReq=onreadystatechange=changOfStatexmlHttpReq.open("GET", WebURL)xmlHttpReq.send()}

function changeOfState() { …}

ASP<%sql="SELECT ContactName FROM CUSTOMERS WHERE ContactName LIKE '"sql=sql & request.querystring("CustomerName")sql=sql & "%'"set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"filename=server.mappath("fpdb/customers.mdb")conn.Open filenameset rs = Server.CreateObject("ADODB.recordset")rs.Open sql, connresponse.write("<b>Suggestions:</b>")response.write("<table>")do until rs.EOFfor each x in rs.Fieldsresponse.write("<tr><td>" & x.value & "</td></tr>")nextrs.MoveNextloopresponse.write("</table>")%>

AJAX Client/Server Interaction

JavaScriptfunction showCustomerName(customerName){ var WebURL="customerNameOnly.asp?sid="+Math.random()+"&CustomerName=" + customerNamexmlHttpReq=new ActiveXObject(“Msxml2.XMLHTTP”)xmlHttpReq=onreadystatechange=changOfStatexmlHttpReq.open("GET", WebURL)xmlHttpReq.send()}

function changeOfState() { if (xmlHttpReq.readyState==4){ document.getElementById("ResponseDisplayArea").innerHTML=xmlHttpReq.responseText } }

AJAX Client/Server Interaction

A J A X

A – Asynchronous

J – JavaScript

A – And

X – XML

XML

eXtensible Markup Language A data description language An open standard providing the

means to share data and information between computers and computer programs

XML is NOT required for AJAX

A J A X

Asynchronous JavaScript And XML Disadvantages:

Cross-browser JavaScript inconsistencies An inability to:

use the Back button to return to a previous state

copy a URL and later use it to navigate to the same page in the same state

A J A XAsynchronous JavaScript And XML

How to do it? Use traditional Web development tools:

Dreamweaver, FrontPage for the UI Text editor for the JavaScript and server side

programs Use tools designed specifically for AJAX development:

Microsoft ASP.NET AJAX (Atlas) - http://ajax.asp.net/ Eclipse (Java-based open source)

http://www.eclipse.org/ Adobe Flex/Flash-AJAX Bridge

http://www.adobe.com/products/flex/

A J A X

AJAX in the Curriculum

A typical AJAX-enabled application includes:

1. User interface (Web page – HTML/XHTML)2. JavaScript (XHR requests and server

responses)3. Server-side program4. Database

A J A X

Asynchronous JavaScript And XMLAJAX in the Curriculum

1. Introductory Level Introduction to AJAX (general overview) HTML/XHTML – Forms

2. Intermediate Level JavaScript – Variables, Functions XHR (XML Http Request)

3. Advanced Level Server-side programming SQL

A J A X

Asynchronous JavaScript And XML AJAX in the Curriculum

1. Introductory Level Introduction to AJAX (general overview) HTML/XHTML – Forms

How to do it? Use traditional Web development tools:

Dreamweaver, FrontPage, or text editor for the User Interface (Form)

Students link to pre-written JavaScripts and server-side programs

A J A XRESOURCES FOR FURTHER RESEARCH

Presenter’s Page (Randy Parker) – www2.piedmontcc.edu/faculty/parkerr/ajax/

AJAXian - ajaxian.com/ eWeek - www.eweek.com/article2/0,1895,1976726,00.asp Swords Sharpened for Ajax Projects - 

www.eweek.com/article2/0,1759,1909570,00.asp AJAX: Getting Started -

developer.mozilla.org/en/docs/AJAX:Getting_Started OpenAjax Alliance - openajax.org/about.html Using the virtual buffer in JAWS to enable Ajax - ajaxian.com

/by/topic/accessibility/ Accessible Rich Internet Applications (WAI-ARIA Roadmap)

addresses the accessibility of dynamic Web content for people with disabilities - www.w3.org/TR/aria-roadmap/