M Clements

1
AJAX

• M Clements

2
Introduction

• All material from www.w3schools.com
• AJAX what is it?
• Traditional web pages and operation
• Examples of AJAX use
• Creating an AJAX app
• AJAX workshop

3
AJAX the basics

• AJAX stands for Asynchronous JavaScript And XML
• Based on JavaScript and HTTP requests
• AJAX is a type of programming made popular in
  2005 by Google (with Google Suggest)
• AJAX is not a new programming language, but a new
  way to use existing standards
• AJAX is good for creating better, faster, and
  more user-friendly web applications

4
Prerequisites

• HTML / XHTML
• JavaScript
• Knowledge of XML and CSS useful too

5
How AJAX works

• With AJAX, your JavaScript can communicate
  directly with the server, using the JavaScript
  XMLHttpRequest object. With this object, your
  JavaScript can trade data with a web server,
  without reloading the page
• AJAX uses asynchronous data transfer (HTTP
  requests) between the browser and the web server,
  allowing web pages to request small bits of
  information from the server instead of whole
  pages.
• The AJAX technique makes Internet applications
  smaller, faster and more user-friendly.
• AJAX is a browser technology independent of web
  server software

6
Old way of getting/ sending data

• In traditional JavaScript coding, to fetch or
  send information to or from a database or a file
  on webserver requires making an HTML form and GET
  or POST data to the server
• User clicks "Submit" button to send/get the
  information, waits for the server to respond,
  then a complete new page loads with results
• Since server returns a new page each time user
  submits input, traditional web apps can run
  slowly and tend to be less user-friendly

7
AJAX Uses HTTP Requests

• AJAX means JavaScript communicates directly with
  server, using JavaScript XMLHttpRequest object
• With an HTTP request, web page can make a request
  to, and get a response from a web server -
  without reloading the entire page
• The user remains on same page
• Does not notice that scripts request pages, or
  send data to a server in the background
• Greater transparency better user experience

8
The XMLHttpRequest Object

• By using the XMLHttpRequest object, a web
  developer can update a page with data from the
  server after the page has loaded
• AJAX was made popular in 2005 by Google (with
  Google Suggest).
• Google Suggest uses the XMLHttpRequest object to
  create a very dynamic web interface When you
  start typing in Google's search box, a JavaScript
  sends the letters off to a server and the server
  returns a list of suggestions
• The XMLHttpRequest object is supported in
  Internet Explorer 5.0, Safari 1.2, Mozilla 1.0 /
  Firefox, Opera 8, and Netscape 7.

9
Your First AJAX Application

• To understand how AJAX works, we will create a
  small AJAX application
• First, we are going to create a standard HTML
  form with two text fields username and time
• The username field will be filled in by the user
  and the time field will be filled in using AJAX.
• The HTML file will be named "testAjax.htm
• See next slide

10
HTML form below has no submit button

• lthtmlgt
• ltbodygt
• ltform name"myForm"gt
• Name ltinput type"text" name"username" /gt
• Time ltinput type"text" name"time" /gt lt/formgt
• lt/bodygt
• lt/htmlgt

11
AJAX - Browser Support

• The keystone of AJAX is the XMLHttpRequest object
• Different browsers use different methods to
  create the XMLHttpRequest object
• We dont know which browser any user may use
• Internet Explorer uses an ActiveXObject, while
  other browsers uses the built-in JavaScript
  object called XMLHttpRequest
• To create this object, and deal with different
  browsers, we are going to use a "try and catch"
  statement

12
ltscript type"text/javascript"gtfunction
ajaxFunction() var xmlHttp try //
Firefox, Opera 8.0, Safari xmlHttpnew
XMLHttpRequest() catch (e) //
Internet Explorer try
xmlHttpnew ActiveXObject("Msxml2.XMLHTTP")
catch (e) try
xmlHttpnew
ActiveXObject("Microsoft.XMLHTTP")
catch (e) alert("Your browser
does not support AJAX!")return false
lt/scriptgt
Script creates variable
Comments
IE can use 2 types of ActiveXObjects
Warning for user if all browsers fail
13
Code needed to make AJAX run

• Tries to create the XMLHttpRequest object
• Check non-IE browsers first
• If the test fails, code first tries newer then
  older IE versions
• Returns error message for very old browsers
• Can be cut and paste into your AJAX page

14
The XMLHttpRequest object

• Has 3 important properties
• onreadystatechange
• readyState
• responseText
• The onreadystatechange property stores the
  function that will process the response from a
  server

15
readyState

• The readyState property holds the status of the
  server's response. We can use this to execute
  the onreadystatechange function
• Possible values for the readyState property
• 0 The request is not initialized
• 1 The request has been set up
• 2 The request has been sent
• 3 The request is in process
• 4 The request is complete

16
responseText

• The data sent back from the server can be
  retrieved with the responseText property.
• In our code, we will set the value of our "time"
  input field equal to responseText

17
Here we test the server for response

• xmlHttp.onreadystatechangefunction()
• if(xmlHttp.readyState4)
• document.myForm.time.valuexmlHttp.responseTex
  t

18
Sending a request to a server

• To send off a request to the server, we use the
  open() method and the send() method
• The open() method takes three arguments
• The first argument defines which method to use
  when sending the request (GET or POST)
• The second argument specifies the URL of the
  server-side script
• The third argument specifies that the request
  should be handled asynchronously (true or false)
• The send() method sends the request off to the
  server

19
When to send the request

• We want to do this when the user releases a key
  after typing their name
• ltform name"myForm"gt
• Name ltinput type"text" onkeyup"ajaxFunction()"
  name"username" /gt
• Time ltinput type"text" name"time" /gt lt/formgt

Calls our function after key released
20
Forming a changing server-side file

• We will fetch the time from our server
• Use php to deal with time request
• Simple server-side file

21
Fetching the time

• We fetch time from a remote servers php
• ajaxtest.php
• Place that in the code
• Save the file as html
• Place on your web server in same directory as php
  file
• Bingo page works (only with IE just now)

22
alert("Your browser does not support AJAX!")
return false
xmlHttp.onreadystatechangefunction()
if(xmlHttp.readyState4)
document.myForm.time.valuexmlHttp.responseText
xmlHttp.open("GET","ajaxtest.php",t
rue) xmlHttp.send(null) lt/scriptgt ltform
name"myForm"gt Name ltinput type"text" onkeyup"a
jaxFunction()" name"username" /gt Time ltinput
type"text" name"time" /gt lt/formgt lt/bodygt lt/html
gt

• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• function ajaxFunction()
• var xmlHttp
• try
• // Firefox, Opera 8.0, Safari
• xmlHttpnew XMLHttpRequest()
• catch (e)
• // Internet Explorer
• try
• xmlHttpnew ActiveXObject("Msxml2.XMLHTTP")

23
See our AJAX in action

• http//engweb.info/ajax/ajaxtest.html
• Works well in Mozilla
• IE is a bit sketchy

24
Conclusion

• AJAX extends the usefulness of web apps
• Saves entire pages reloading
• Gives greater transparency to users
• Data loads in the background
• Uses existing technologies
• Is becoming very popular

25
References

• http//www.w3schools.com/ajax/default.asp
• http//www.internetnews.com/dev-news/article.php/3
  676226
• http//daniel.lorch.cc/docs/ajax_simple/