Intro to Ajax - Part II
Communicating with the Server
Learning Objectives
By the end of this lecture, you should be able to:
– Describe the overview of steps involved in communicating with the web
server for an AJAX cycle
– Describe what is meant by a ‘callback’ function
– List and define some of the more common ‘status response’ messages
that come from a server
– Describe what is meant by the ‘A’ in AJAX
– Describe the kinds of tasks typically handled by a server-side script
Steps in communicating with the web server
There are a few steps involved in setting up an AJAX communication with the server. Here is
the overview:
•
•
•
•
•
Obtain a copy of the XMLHttpRequest (aka 'XHR') object.
Use this object to specify the kind of data you are going to send and where the data
should go.
Write a “callback” function to handle whatever information is received back from the
server (e.g. part of an HTML file, a query result from a database, etc) and update the
web page.
Send the request to the server.
Examine the response from the server for other relevant data.
The main point of Ajax is to let your client-side JavaScript talk to and get information from
the server. Most of the time, that means there’s another script running on the web server
that completes tasks JavaScript can’t do, like querying a database, sending logging a user in
to a resource, etc.
1: Obtain a copy of the ‘XMLHttpRequest object’.
•
•
•
•
We will use this object to make our connection to the web server and to pass
information back and forth between the web server and the web client.
Because the name is such a mouthful, most programmers refer to XMLHttpRequest
object simply as the ‘XHR’.
In JS, the code to obtain a copy of this object is:
var my_xhr = new XMLHttpRequest();
Coding with the XHR object is one of those situations rife with opportunity for crossbrowser compatibility issues. Therefore, this is one of those cases where a library such
as jQuery can really come to the rescue…
A brief aside: Not much ‘XML’ going on…
•
•
•
•
In spite of the name, XMLHttpRequest there is not much XML that gets sent to or
received from the server.
At one point, XML was the ‘hot’ markup language – some said it was going to replace
HTML as the web markup language of choice.
In recent years, however, other tools have emerged to fill the void and while XML does
have its uses, and is still very much around, it is not used nearly as widely as other
standards.
Therefore, while we will not be using the XMLHttpRequest object to work with XML,
the object is still extremely helpful to web programmers as it has lots of functionality
built in to it for communications with the server.
From W3 Schools
2: Specify the kind of data to send, where to send it
my_xhr.open('GET', 'books.php?isbn=22233344&author=Angelou');
•
We invoke a function called open() to:
– Specify the method used to send data (‘POST’ or ‘GET’)
– Specify the file to connect to (e.g. books.php)
– Often, we append to the URL, the data that we wish to send to the server (e.g. isbn=22233344)
IMPORTANT: For security reasons, the file that is specified in the open() method MUST reside on the
same web server as the file from which the request is originating. In other words, you can’t place your
file on a DePaul web server and try to run a script that resides on Amazon’s web server.
3. Create a “callback” function to handle the results
•
After processing the incoming request from a web client, the server will typically respond in some
way. For example:
–
–
•
Output the results of a database query (e.g. the results of searching for authors with last name of ‘Rowling’)
Confirmation that a form was successfully processed
• ‘Thanks for joining our mailing list!
• ‘You have successfully updated your phone number.’
• etc
Your callback function should process the results that get returned from the query in some way. For
example, you might take the information that came back regarding all books by an author named
‘Rowling’ and place them in a div section called ‘results’. You might format the results in an HTML
list with each author in bold and the title of the book in italics, etc, etc.
–
Because this callback function is executed on the client, this function is nearly always written in JavaScript
(or jQuery).
Callback
Function
4. Send the request
•
•
At this point, we have set everything up. We now invoke the function send() which is
where we “push the button” and send the request off to the server.
To invoke send()we use our old friend the XHR object. There are two ways of invoking
this method depending on whether we used ‘GET’ or ‘POST’ in step #2.
– If we used GET, then: newXHR.send(null);
– If we used POST, then: newXHR.send( query string goes here )
• Recall that with POST I said that we send the information elsewhere. One place we can send it is when
we invoke the send() function: newXHR.send('isbn=22233344');
•
As it turns out, however, jQuery also makes this step much simpler.
5. Receive the response
•
•
•
Recall the callback function we created in step 3. Once the response has been received
from the server, the callback function jumps into action and processes that response.
The server’s response is packaged up in a tidy little bundle and attached to the XHR
object.
You can use a method of the XHR object called responseText() to access this
information:
var responseString;
responseString = my_xhr.responseText();
•
•
This response string contains the ‘relevant’ information such as the response to a user’s
query about the weather forecast in Chicago.
In addition to the specific information that the user is interested in, the server also
bundles into the XHR object the status of the response. We will discuss this ‘status
response’ momentarily.
– A competent web designer will nearly always include some code to examine the status of the
response to ensure that there were no unexpected problems.
Completion of One Cycle
•
That ends one iteration of the AJAX cycle. It is entirely possible, however, that there are
multiple AJAX cycles going on at the same time on different parts of a single web page.
•
We will now examine in slightly more detail, a couple of the topics from the previous
steps. Refer back to the overview of these steps as we proceed.
Callback
Function
Status Response
Recall from earlier: In addition to the specific information that the user is interested in, the server also
bundles into the XHR object the status of the response.
Some examples of the status response are shown here. You have almost certainly seen examples of
these from time to time.
• 404 NOT FOUND
– This means that the file requested by the client was not found.
• 401 UNAUTHORIZED
– This means that the requested file requires authentication such as a login and password, but it
was not provided.
• 200 OK
– This response indicates that the request was processed without any problems.
•
There are many other status responses.
•
Your callback function could have some if/else type of code in there that springs into action in
response to one or more of these responses. For example, you could write a “friendlier” version of
the standard 401 error message than the standard one built into your browser.
Example of a status response
Here is a somewhat typical 401 status response:
Simple example:
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript">
function loadXMLDoc() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
See:
http://www.ehmz.org/ajax/01_Ajax.html
Note: To run this script you must use the URL
listed here. You can not run the script from
your own computer unless you have your
own server and server-side script set up.
Other XHR properties to be aware of include
onreadystatechange, readyState,
and status. We will discuss these shortly.
Source code is: first_ajax.htm
The ‘A’ in AJAX
•
•
The ‘A’ stands for ‘Asynchronous’
To explain why this is helpful, consider what the server
needs to do in responding to a typical request:
–
–
–
–
–
•
•
Parse the incoming message
Open a connection to the database
Query the database
Form a response
Send the response to the client
‘Asynchronous’ refers to the client. It means that once
your client has sent the request off to the server, the
client’s script does NOT have to wait for the server’s
response. Instead, this script (along with any other
scripts on your page) can continue to be executed.
The ability for scripts to function asynchronously can at
times significantly increase the speed and efficiency of
your pages.
GET v.s. POST
•
•
•
•
•
These are the two commonly used methods
to send and receive data between the client
and the server.
POST is typically used when you plan to
update information on the server (e.g. add
information from a ‘Join Mailing List’ form on
the client to a database on the server).
GET is typically used when you plan to receive
information back from the user such as if you
have requested information about a book on
Amazon.com.
With ‘GET’, the data being sent TO the server
is usually appended to the end of the URL.
Note in the example above, the ‘?’ after the
URL, immediately after which is the info we
wish to pass to the server.
With ‘POST’, the data is sent separately from
the URL by invoking a different function, e.g.
‘post()’.
What happens on the server?
•
•
The file on the server (e.g. books.php) will most likely contain a script that is ready to
process the information that has just come in from the client.
The script on the server is typically not JavaScript. These days, one of the most common
and popular server-side scripting languages is PHP.
– Server-side scripting languages typically specialize in things like connecting to databases,
forming database queries, parsing and breaking down long strings into information, etc.
XMLHttpRequest
This object has only a few methods and properties to know about:
• open() - opens the connection to a given URL
• setRequestheader() - adds a label/value pair to the header
request
• send() - request is sent
• getAllResponseHeaders() - returns all HTTP response
headers as a string
• getResponseHeader() - returns the specific HTTP header
• abort() - aborts the current request
XMLHttpRequest.open()
One of the arguments to the XHR's open() method is the
'HTTP Method'. Here are the possible options for that argument:
• GET - request data from the server
• POST - posts data to the server
• Other options
– DELETE - deletes data for the given resource
– PUT - stores data for the given resource
– HEAD - similar to GET, but doesn't return the response body.
Example:
my_xhr.open("GET","ajax_info.txt",true);
GET or POST?
When might you use a different method such as 'POST'?
• GET is simpler and faster than POST, and can be used in most cases.
• However, always use POST requests when:
–
–
–
A cached file is not an option (update a file or database on the server).
Sending a large amount of data to the server (POST has no size limitations).
Sending user input (which can contain unknown characters), POST is more robust and secure than GET.
Key properties of the XMLHttpRequest Object
• onreadystatechange – This function is automatically invoked whenever
the ready state of the request changes.
• The 'readyState' has a few different possible states:
» 0 - uninitialized request
» 1 - for open request
» 2 - for a request that’s been sent
» 3 - response received
» 4 - response finished loading (this is what we look for)
Other properties of the XHR that we make use of:
• responseText – Holds (as a 'string') the information that the server-side
script has sent back.
• responseXML – holds the same information as responseText, but as XML
• status – holds the status of the request (e.g. 404, 500, 200)
• statusText – holds some additional information associated with the request
status
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
Simple example - Revisited:
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript">
function loadXMLDoc() {
if (window.XMLHttpRequest) //returns true if the XHR exists
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Example of server-side script:
ch14-02.php
THIS IS THE PHP SCRIPT THAT IS STORED AND EXECUTED ON THE SERVER
See: http://www.ehmz.org/ajax/02_Ajax.html
Note: As before, to run this script, you must use the
URL listed here. You can not run the script from your
own computer unless you have your own server and
server-side script set up.
Source code is: 02_ajax.htm
PHP Script is: ch14-02.php
<?php
//If no search string is passed, then we can't search
if(empty($_REQUEST['state'])) {
echo "No State Sent";
} else {
//Remove whitespace from beginning & end of passed search.
$search = trim($_REQUEST['state']);
switch($search) {
case "MO" :
$result = "<ul><li>St. Louis</li>" .
"<li>Kansas City</li></ul>";
break;
case "WA" :
$result = "<ul><li>Seattle</li>" .
"<li>Spokane</li>" .
"<li>Olympia</li></ul>";
break;
case "CA" :
$result = "<ul><li>San Francisco</li>" .
"<li>Los Angeles</li>" .
"<li>Web 2.0 City</li>" .
"<li>BarCamp</li></ul>";
break;
case "ID" :
$result = "<ul><li>Boise</li></ul>";
break;
default :
$result = "No Cities Found";
break;
}
echo "<h3>Cities:</h3><p>" . $result . "</p>";
}
?>
AJAX
s
jQuery
•
•
•
•
•
You may have noticed that there is quite a lot of overhead (creating the XHR object,
opening the connection to the server, sending the request using send(), retrieving the
response using the XHR object) involved in setting up a basic AJAX cycle.
All of these steps are necessary for every AJAX cycle. Yet nearly all of the “good stuff”
happens inside the callback function.
In addition, many of these steps are fraught with cross-browser compatibility issues.
jQuery not only simplifies and shortens these steps, but it also heads off many potential
cross-browser issues.
If you are interested in experimenting with AJAX, there are numerous references
(including your textbook) which can guide you through the jQuery version of the tools
we have described. However, it is important to make sure you understand what is taking
place via plain-old JavaScript before jumping into the jQuery version.