Ajax

• Basic objects necessary

• Setting up the XMLHttpRequest object
• Making the call
• How the server responds
• Using the reply
• XML basics
 The usual way we operate in the Web
• Typical browsing behavior consists of loading a web page, then selecting some
action that we want to do, filling out a form, submitting the information, etc.
• We work in this sequential manner, requesting one page at a time, and have to wait
for the server to respond, loading a whole new web page before we continue.
• This is also one of the limitations of web pages, where transmitting information
between a client and server generally requires a new page to be loaded.

• JavaScript is one way to cut down on (some of) the client-server response time, by
using it to verify form (or other) information before it’s submitted to a server.

• One of the limitations of JavaScript is (or used to be) that there was no way to
communicate directly with a web server.

• Another drawback to this usual sequential access method is that there are many
situations where you load a new page that shares lots of the same parts as the old
(consider the case where you have a “menu bar” on the top or side of the page that
doesn’t change from page to page).
 Things change…
• We used to not have any alternative to this load/wait/respond method of web
browsing.

• Ajax (sometimes written AJAX) is a means of using JavaScript to communicate with

a web server without submitting a form or loading a new page.

• Ajax makes use of a built-in object, XMLHttpRequest, to perform this function.

• This object is not yet part of the DOM (Document Object Model) standard, but is
supported (in different fashions) by Firefox, Internet Explorer, Safari, Opera, and
other popular browsers.

• The term “Ajax” was coined in 2005, but the XMLHttpRequest object was first
supported by Internet Explorer several years before this.
 Ajax
• Ajax stands for “Asynchronous JavaScript and XML”.
• The word “asynchronous” means that the user isn’t left waiting for the server the
respond to a request, but can continue using the web page.

• The typical method for using Ajax is the following:

1) A JavaScript creates an XMLHttpRequest object, initializes it with

relevant information as necessary, and sends it to the server. The script
(or web page) can continue after sending it to the server.
2) The server responds by sending the contents of a file or the output of a
server side program (written, for example, in PHP).
3) When the response arrives from the server, a JavaScript function is
triggered to act on the data supplied by the server.
4) This JavaScript response function typically refreshes the display using the
DOM, avoiding the requirement to reload or refresh the entire page.
 What is AJAX?

 Not a language itself

 A group of related existing technologies compiled
together or technique to make web pages feel more
responsive
 Makes interactive web pages by providing a way for
the web page to interact with the server
 AJAX is a framework
How it works
 Where to use Ajax
• Ajax should be used anywhere in a web
application where small amounts of
information could be saved or retrieved from
the server without posting back the entire
pages.
• Ex:
– change the values in a drop down list-box
based on other inputs, such as state and
college list boxes
– when the client needs to save or retrieve
session values from the server, based on a
Who uses Ajax
 Based on Internet Standards
• XHTML/HTML and CSS
– To display the data
• JavaScript (XMLHttpRequest calls)
– To exchange data asynchronously with the
server
• XML
– To tranfer the data
• DOM (document object model)
– To navigate the hierarchy of X/HTML elements
 The XMLHttpRequest object
• The XMLHttpRequest object is the backbone of every Ajax method. Each
application requires the creation of one of these objects. So how do we do it?

• As with most things in web programming, this depends upon the web browser that
the client is using because of the different ways in which the object has been
implemented in the browsers.

• Firefox, Safari, Opera, and some other browsers can create one of these objects
simply using the “new” keyword.

<script type="text/javascript">
ajaxRequest = new XMLHttpRequest();

</script>
 The XMLHttpRequest object (cont.)
function getXMLHttpRequest()
/* This function attempts to get an Ajax request object by trying
a few different methods for different browsers. */
{
var request, err;
try {
request = new XMLHttpRequest(); // Firefox, Safari, Opera, etc.
}
catch(err) {

}
return request;
}

If this function doesn’t return “false” then we were successful in creating an

XMLHttpRequest object.
 The XMLHttpRequest object (cont.)
• As with any object in JavaScript (and other programming languages), the
XMLHttpRequest object contains various properties and methods.

• We list the most important of these properties and methods on the next pages.

• The main idea is that the properties are set after the object is created to specify
information to be sent to the server, as well as how to handle the response received
from the server. Some properties will be updated to hold status information about
whether the request finished successfully.

• The methods are used to send the request to the server, and to monitor the
progress of the request as it is executed (and to determine if it was completed
successfully).
 XMLHttpRequest object properties
Property Description
• readyState An integer from 0. . .4. (0 means the call
is uninitialized, 4 means that the call is
complete.)
• onreadystatechange Determines the function called when the
objects readyState changes.
• responseText Data returned from the server as a text
string (read-only).
• responseXML Data returned from the server as an XML
document object (read-only).
• status HTTP status code returned by the server
• statusText HTTP status phrase returned by the server

We use the readyState to determine when the request has been completed, and then
check the status to see if it executed without an error. (We’ll see how to do this
shortly.)
 XMLHttpRequest object methods
Method Description
• open('method', 'URL', asyn) Specifies the HTTP method to be used (GET
or POST as a string, the target URL, and
whether or not the request should be
handled asynchronously (asyn should be
true or false, if omitted, true is
assumed).
• send(content) Sends the data for a POST request and
starts the request, if GET is used you
should call send(null).
• setRequestHeader('x','y') Sets a parameter and value pair x=y and
assigns it to the header to be sent with
the request.
• getAllResponseHeaders() Returns all headers as a string.
• getResponseHeader(x) Returns header x as a string.
• abort() Stops the current operation.

The open object method is used to set up the request, and the send method starts the
request by sending it to the server (with data for the server if the POST method is used).
 A general skeleton for an Ajax application
<script type="text/javascript">
// ***** include the getXMLHttpRequest function defined before
var ajaxRequest = getXMLHttpRequest();

if (ajaxRequest) { // if the object was created successfully

ajaxRequest.onreadystatechange = ajaxResponse;
ajaxRequest.open("GET", "search.php?query=Bob");
ajaxRequest.send(null);
}

function ajaxResponse() //This gets called when the readyState changes.

{
if (ajaxRequest.readyState != 4) // check to see if we’re done
{ return; }
else {
if (ajaxRequest.status == 200) // check to see if successful
{ // process server data here. . . }
else {
alert("Request failed: " + ajaxRequest.statusText);
}
}
}
</script>
 Sending text back the server
• The response stored in XMLHttpRequest.responseText from the server can be
any text that JavaScript is capable of processing as a string.

• Thus, you can send back a simple text string as the first example did, or you could
send a string with HTML tags embedded in it. You can process the string using
JavaScript functions (to split it into substrings, add/delete parts of it, etc.).

• You could even send back a string that has JavaScript code it in and execute it
using the JavaScript eval() method.

• Recall, however, that the responseText property is a read-only variable, so if

you’re going to alter it you must first copy it to another variable.

Example with HTML tag (Change the PHP script to insert HTML tags.)

Example using a table (As above, change the PHP script.)

 XML: a (very) brief intro(Just for your
understanding)
• XML, the eXtensible Markup Language, is used in many ways, the
most relevant to us being the transfer of structured information.

• XML and HTML look similar in many ways and this is because both
are based on SGML, the Standard Generalized Markup Language
established by the International Organization for Standards (ISO).

• Like HTML, XML uses tags to denote information but is not limited to
the types of tags that occur in HTML. Tags can be essentially
anything a user likes and are used to define the type of data present
in the document.
 XML: a (very) brief intro (cont.)
• Here’s an example: (This is how an XML file looks like)
<library>
<book>
<title>Programming PHP</title>
<author>Rasmus Lerdorf</author>
<author>Kevin Tatroe</author>
<author>Peter MacIntyre</author>
<chapter number="1">Introduction to PHP</chapter>
<chapter number="2">Language Basics</chapter>
. . .
<pages>521</pages>
</book>
. . .
</library>

• See the other notes for some more details/examples.

view other notes