Introduction To AJAX

Introduction To AJAX
Asynchronous JavaScript and XML
Course Outline
Day 1 I. Introduction II. Getting Started Day 2 III. Using Dynamic Content IV. Applications
I. Introduction
I. Introduction
1. User Experience on the Web
2. What is AJAX?
3. How AJAX Works 4. AJAX Drawbacks 5. Development Tools

HTTP is a synchronous protocol: Request, Wait for
response.
A web application is completely idle during load
time (no user interaction)

Early 90s web applications where always
synchronous which lead to very poor UX (User eXperience)

Asynchronous communication in web pages was first
introduced in Java Applets (mid 90s)

communication methods
Macromedia Flash also offered asynchronous
Applications built with such technologies resemble
desktop applications in many ways: responsiveness, instant feedback, no idle time

Such applications are called Rich Internet
Applications (RIA)

JS has enough capabilities to build rich UIs on the web Problem: not possible to communicate the server
without re-loading the entire page

An asynchronous communication capability was added
to JavaScript in 1999: the XMLHttpRequest object.
Some web applications started using it to build RIAs.
e.g. Outlook Web Access and Gmail (Early 2000s).
In 2005, this technique was called AJAX
2. What is AJAX?
Asynchronous JavaScript And XML A group of web development techniques used to create asynchronous web applications
Not a single technology. An HTML-JS-CSS combo Despite the name, XML is not necessarily needed
3. How AJAX Works
3. How AJAX Works

User generates an event
XMLHttpRequest object is created by interaction function

Callback function is prepared and linked to the request
Request is configured and calls server side script

Upon response, callback is triggered and updates area of page using DOM
4. AJAX Drawbacks
AJAX requests are not saved in browser history. Pages with AJAX-loaded content are not easily
bookmarked in their current state

A fairly complex workaround exists using URL
fragment identifiers (# section of URL). Requires backend changes as well
Solvable using an HTML5 API that communicates with
browser history engine
4. AJAX Drawbacks
AJAX-loaded content is not accessible to search
engines
The callback-based programming style can lead to
more complex code thats hard to trace and/or debug
5. Development Tools
A good text editor: Notepad++, gedit or vim have good syntax highlighting and proper indentation Netbeans and Aptana have powerful auto-complete features for JS, HTML and CSS A modern browser with JS console/debugger: Google Chrome (built-in console) Mozilla Firefox (+Firebug add-on)
II. Getting Started
Getting Started
1. XMLHttpRequest Javascript Object
2. First AJAX Request

3. Basic DOM Operations 4. Lab Exercise
1. 2. First AJAX Username validation
1. XMLHttpRequest Object
Methods
open(mode, url, asynchronous)
send(params) abort() getAllResponseHeaders() getResponseHeader(header)
Properties
readyState status responseText responseXml
onreadystatechange
readyState
integer, values range 0 4 according to request state

0 : not initialized 1 : connection established 2 : request received 3 : processing request 4 : request finished and repsponse ready
status
HTTP status code, e.g. 200, 404, 403, etc
responseText
response data as plain text string

responseXML
response data as XML data

onreadystatechange
stores a function to be called automatically every time the readyState value changes
open(method, url, asynch, user, pass)
creates a connection to specified URL preparing the request to be sent

method: HTTP method (GET / POST) url: url to the server-side script or resource asynch (optional): when true (default) request is asynchronous, when false request is synchronous user (optional): username for HTTP Authentication pass (optional): password for HTTP Authentication
send(params)
sends the request off to the server

params: string containing POST parameters, set to null in case of GET
abort()
completely aborts/cancels the request

getAllResponseHeaders
returns all headers of the response as a hash (map)

getResponseHeader(headerName)
returns specific header such as User-Agent

headerName: name of header to retrieve

1. Create XMLHttpRequestObject
// supported: IE7+, FireFox, Chrome, Safari and Opera request = new XMLHttpRequest(); // for IE5, IE6 (obsolete) request = new ActiveXObject(Microsoft.XMLHTTP);

2. Prepare callback function
request.onreadystatechange = function() {
if (request.readyState == 4) { // response ready, time to update DOM } else { // not ready, show progress animation } };

3. Open connection and send
// open connection to my server-side script request.open(GET, http://mydomain/script.php, true);
// send off the request request.send(null);

<form method=POST name=myform action=> <input type=button value=Fire Request onclick=handleUserAction() /> <input type=text name=res /> </form>

<script type=text/javascript> var xhr = null function handleUserAction() { xhr = new XMLHttpRequest(); xhr.onreadystatechange = xhrCallback; xhr.open(GET, data.txt, true); xhr.send(null); } function xhrCallback() { if (xhr.readyState == 4) { document.myform.res.value = xhr.responseText } else { document.myform.res.value = err: + xhr.status; } } </script>
3. Basic DOM Operations

We need to validate the username and tell the user
the result of the validation as shown below:
Server-side PHP code

<?php if ($_GET[username] == Mohsen) { echo valid; } else { echo invalid; } ?>
Client-side JavaScript code

function handleUserAction() { // read user input from form var uname = document.getElementById(uname).value; // prepare request to server-side php and send it // with username as parameter ... } function xhrCallback() { var validity = ; // change validity value based on server response ... // display result in text field document.getElementById(res).value = validity }
4. Lab Exercise
1. First AJAX
simply button will trigger AJAX request to the server, read data.txt and display response in text field
4. Lab Exercise
2. Username validation
we need to validate the username (on the server) and display the result to the user
III. Using Dynamic Content
III. Using Dynamic Content

1. Parsing the Response Introducing JSON 2. DOM Manipulations 3. Sending Post Parameters
4. Lab Exercise
1. Parsing the response

In many applications, we need a large, complex
response from the server.

Examples: List of search results or a list of
comments (including name, photo, etc)
Response cannot be plain text, it needs to be: Logically Organized Easy to parse using JavaScript Both XML and JSON fit this criteria

JSON is the format of choice form most web
developers these days JavaScript Object Notation A lightweight, language independent, data interchange format. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects.

Sample JSON output (status message + user
comments)
{ status: Jan 25 FTW!, time: Feb 11, 2011 @ 22:00, likes: [Mahmoud Samy, Samir Bahgat, Mohsen Abdallah], comments: [ {user:Sara Ammar, text:Alriiiight!, likes:5}, {user:Mahmoud Samy, text:Go Jan25!!!, likes:4} ] }

Supported data types { } Object : list of keys and values [ ] Array : list of values (or objects) Boolean : true or false Number : double precision supported String : double-quoted text JSON format matches JavaScripts object structure
exactly, so its vey easy to parse in JavaScript

How to parse the previous response in JS
var statusObj = JSON.parse(xhr.responseText); // response is now parsed into JS objects and ready to use // alert the status message alert(statusObj.status); // alert list of people who like this var likes = for(var i = 0; statusObj.likes.length; i++) { likes += statusObj.likes[i] + , ; } alert(likes);
// alert name of first commentor alert(statusObj.comments[0].user);
2. DOM Manipulations
DOM review document.createElement(tagName) document.createTextNode(text) <element>.appendChild(childNode) <element>.getAttribute(name) <element>.setAttribute(name, value) <element>.insertBefore(newNode, targetNode) <element>.removeAttribute(name) <element>.removeChild(childNode) <element>.replaceChild(newNode, oldNode) <element>.innerHTML
2. DOM Manipulations
DOM Example on adding comments
var commentsDiv = document.getElementById(commentsContainter); for (var i = 0; i < statusObj.comments.length; i++) { var commentHTML = statusObj.comments[i].user + <br/>; commentHTML += statusObj.comments[i].text;
var cDiv = document.createElement(div); cDiv.style.backgroundColor = #e7e7e7; cDiv.innerHTML = commentHTML;

commentsDiv.appendChild(cDiv); }
3. Sending POST Parameters

Sending POST parameters requires sending a
header specifying data format to the web server

xhr.open(POST, http://localhost/register.php, true); var userParams = + + + username= + username &password= + password &email= + email &fullName= + fullName;
// this header is required to specify parameter format xhr.setRequestHeader("Content-Type","application/x-www-formurlencoded;); xhr.send(userParams);
4. Lab Exercise
1. Loading Lists
use API to dynamically load intakes, departments in each intake and students in each department
4. Lab Exercise
A PHP API will be provided for you to use Sample call to get list of intakes:
4. Lab Exercise
Sample call to get list of departments:
Sample call to get list of students

Introduction To AJAX

Uploaded by

Copyright:

Available Formats

Introduction To AJAX

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To AJAX

Uploaded by

Copyright:

Available Formats

Introduction To AJAX

Asynchronous JavaScript and XML

1. User Experience on the Web

time (no user interaction)

synchronous which lead to very poor UX (User eXperience)

1. User Experience on the Web

introduced in Java Applets (mid 90s)

Macromedia Flash also offered asynchronous

Applications built with such technologies resemble

desktop applications in many ways: responsiveness, instant feedback, no idle time

1. User Experience on the Web

without re-loading the entire page

to JavaScript in 1999: the XMLHttpRequest object.

Some web applications started using it to build RIAs.

e.g. Outlook Web Access and Gmail (Early 2000s).

In 2005, this technique was called AJAX

3. How AJAX Works

3. How AJAX Works

XMLHttpRequest object is created by interaction function

Request is configured and calls server side script

bookmarked in their current state

fragment identifiers (# section of URL). Requires backend changes as well

Solvable using an HTML5 API that communicates with

browser history engine

more complex code thats hard to trace and/or debug

II. Getting Started

2. First AJAX Request

integer, values range 0 4 according to request state

HTTP status code, e.g. 200, 404, 403, etc

response data as plain text string

response data as XML data

creates a connection to specified URL preparing the request to be sent

sends the request off to the server

completely aborts/cancels the request

returns all headers of the response as a hash (map)

returns specific header such as User-Agent

2. First AJAX Request

2. First AJAX Request

2. First AJAX Request

2. First AJAX Request

2. First AJAX Request

3. Basic DOM Operations

the result of the validation as shown below:

3. Basic DOM Operations

Server-side PHP code

3. Basic DOM Operations

Client-side JavaScript code

III. Using Dynamic Content

III. Using Dynamic Content

1. Parsing the response

response from the server.

comments (including name, photo, etc)

1. Parsing the response

1. Parsing the response

1. Parsing the response

exactly, so its vey easy to parse in JavaScript

1. Parsing the response

// alert name of first commentor alert(statusObj.comments[0].user);

var cDiv = document.createElement(div); cDiv.style.backgroundColor = #e7e7e7; cDiv.innerHTML = commentHTML;