Ajax-Web Programming-Lecture Slides, Slides of Web Programming and Technologies

Download Ajax-Web Programming-Lecture Slides and more Slides Web Programming and Technologies in PDF only on Docsity!

Comp 519: Web Programming

Autumn 2010

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).

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.

The Back End

• The part of the Ajax application that resides on the web server is referred to as the

“back end”.

• This back end could be simply a file that the server passes back to the client, which

is then displayed for the user.

• Alternatively, the back end could be a program, written in PHP, Perl, Ruby, Python,

C, or some other language that performs an operation and sends results back to

the client browser.

• An XMLHttpRequest object can send information using the GET and POST

methods to the server in the same way that an HTML form sends information.

• Recall from our previous discussions that the GET request encodes the information

inside of the URL, while a POST request sends its data separately (and can contain

more information than a GET request can).

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.

The XMLHttpRequest object (cont.)

• Microsoft Internet Explorer implements this object using its proprietary ActiveX

technology. This requires a different syntax for creating the object (and can also

depend upon the particular version of Internet Explorer being used).

• To handle different types of browsers, we use the

try {... } catch (error) {... }

format. The “try” section attempts to execute some JavaScipt code. If an error

occurs, the “catch” section is used to intervene before the error crashes the

JavaScript (either to indicate an error has happened, or to attempt something else).

• To create one of these objects we can use a sequence of try... catch blocks,

attempting different ways to create 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.)

A general skeleton for an Ajax application

A first example

• Here’s an example to illustrate the ideas we’ve mentioned (inspired by an example

in the book Ajax in 10 Minutes by Phil Ballard).

• The main idea is that we’re going to get the time on the server and display it to the

screen (and provide a button for a user to update this time). The point I want to

demonstrate here is how to use Ajax to do this update without updating/refreshing

the entire webpage.

• We use a (very) small PHP script to get the date from the server, and return it as a

string as a response to the request. Here is the script:

• I saved this as the file “telltime.php”.
• The HTML file and JavaScript code follows.

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 { document.getElementById("showtime").innerHTML = ajaxRequest.responseText; } else { alert("Request failed: " + ajaxRequest.statusText); } } }

function getServerTime() // The main JavaScript for calling the update. { ajaxRequest = getXMLHttpRequest(); if (!ajaxRequest) { document.getElementById("showtime").innerHTML = "Request error!"; return; } var myURL = "telltime.php"; var myRand = parseInt(Math.random()*999999999999999); myURL = myURL + "?rand=" + myRand; ajaxRequest.onreadystatechange = ajaxResponse; ajaxRequest.open("GET", myURL); ajaxRequest.send(null); }

Ajax Demonstration

Getting the server time without refreshing the page

The main functionality is handled by the getServerTime() function in setting up and

sending the XMLHttpRequest object, and the ajaxResponse() function to

display the time.

view the output page

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.

(Change the PHP script to insert HTML tags.)

(As above, change the PHP script.)

Example with HTML tag

Example using a table

The other PHP scripts for the time examples

• Here’s the script with a simple HTML tag in it.

'. date('H:i:s'). ""; ?>

• The output with a table.

'; $td = '';

$table = ''; $table .= $tr. $td. date('j M Y'). ''; $table .= $tr. $td. date('H:i:s'). ''; $table .= ''; echo $table; ?>