Hour 15. Accessing Server-Side Data via AJAX
What You’ll Learn in This Hour:
Using AJAX requests to load data into page elements
Sending AJAX GET and POST requests
How to serialize parameters for GET and POST requests
How to handle JSON and XML data in the web server AJAX response
Implementing AJAX event handlers to handle completion, success, and failure events
In this hour, you explore the world of asynchronous communication with the server using AJAX requests in jQuery and JavaScript. AJAX communications are one of the most vital parts of most websites. They allow jQuery and JavaScript to get additional data from the server and update the page instead of reloading or loading a new web page.
The following sections try to demystify AJAX a bit for you and they provide you with some practical examples. By the end of this hour, you will be able to implement AJAX in a variety of ways.
Making AJAX Easy
Despite its importance, AJAX tends to be a bit daunting at first. With all the communication terms, it might seem easy to get confused. That really shouldn’t be the case. If you take a quick step back to look at the basics of AJAX from a high level, the details shouldn’t seem daunting at all.
AJAX is a request from jQuery or JavaScript to the web server. The request may send data to the server, and the server will respond with a success or failure and possibly additional data. That is it—nothing more, nothing less. The following sections help clarify the request/response process.
Clarifying AJAX Versus Page Requests
The first step is to define the difference between AJAX and normal page linking request. You are already familiar with page links; when you click a link, a new web page appears. Often that is the case even if all the controls, tables, graphics, and so on are the same, but only some data has changed. In the case of form submission, none of the data changes, but the web page must still be reloaded from the server.
Don’t confuse server-side dynamic creation of web pages with AJAX. Dynamic creation of web pages is still the old traditional method—it is just a bit easier to manage. Each request back to the server still requires a full new web page to be returned. The only advantage is that the web page is generated in memory instead of read from disk.
AJAX is completely different. An AJAX request does not request a new web page from the server. Instead, an AJAX request only sends and receives bits of data necessary. If the new data received from the web server requires the web page to be updated, then jQuery and JavaScript can update the page elements, as you have already seen.
The following is a list of a few of the benefits of AJAX requests:
Less data requested from the web server.
Allows the user to continue using the web page even while the request is being processed.
Errors can be caught and handled on the client side before a request is ever made to the server.
Figure 15.1 illustrates the difference between the two methods of updating data in the browser.
Understanding Server-Side Services Such as ASP, PHP, MySQL
The next step is to understand how the AJAX requests are handled. Great detail is not necessarily important. What you need to understand is that for each AJAX request you send to a web server, a process will read the request, do some work, and then send back a response.
The back-end processes can be the web server returning a static HTML, text, XML, or JSON file. The back-end process often is an ASP, JSP, PHP, Python, or CGI script that is running on the server reading data from memory, files, databases, and other sources. The back-end process can also be a myriad of other frameworks that are integrated into the web server.
None of that really matters to the AJAX script running in the browser. All that matters is that the server sends back a status and data.
Understanding Asynchronous Communication
You need to be clear on asynchronous communication. When you request a web page from the web server, the communication is synchronous to your browser. That means the browser waits until the HTML document is downloaded from the server before it begins rendering it and retrieving the additional resources necessary.
Tip
You can do synchronous AJAX requests with both jQuery and JavaScript. The jQuery .ajax() method and the JavaScript send() function both have a Boolean field that allows this. You shouldn’t use this, though, because you can cause the browser to lock up, which will create some very unhappy users. In fact, in jQuery 1.8 and later, that option is deprecated.
AJAX communication is different when you send an AJAX request. Control is returned immediately back to jQuery or JavaScript, which can do additional things. Only when the request has completed or timed out will events be triggered in the browser that allow you to handle the request data.
Understanding Cross-Domain Requests
Cross-domain requests occur when you send AJAX requests to separate servers from different domains. The browser prevents this, and correctly so because of a multitude of security reasons.
The only problem with blocking cross-domain requests is that you often want to get data from services external to the current website. You can get around this in a couple of ways.
The first method to overcome the cross-domain restriction is to have the web server act as a proxy to the other servers or services, meaning that instead of directly communicating via JavaScript, you send the request to the server and have the server do it for you. The only downside is that it requires additional server-side scripting, and you pay an extra time penalty because data has to first be downloaded to the web server and then to the web browser.
Another option is to do what is called on-demand JavaScript, which is used by JSONP (JSON with Padding). This method takes advantage of the fact that you can download a script from another website as a resource using the following syntax:
<script type="text/javascript"
src="http://new.domain.com/getData?jsonp=parseData">
</script>
The trick is that the address specified by the src attribute cannot return the JSON response directly. If the browser detects that the data in the script is JSON, as shown next, it throws a cross-domain error:
{ "title": "photoA", "rating": 7 };
Instead, the third-party service must support JSONP, in which case it pads the response with the function call specified by the request, as shown next. In that way, you will be able to access the data from JavaScript by calling the function.
parseData({ "title": "photoA", "rating": 7 });
Looking at GET Versus POST Requests
This section clarifies GET and POST requests. The two main types of requests that you send to the web server are GET and POST. There are only a few differences between the two, but they are important. A GET request passes parameters as part of the URL, whereas a POST request passes them as part of the request data.
To help you quickly see this, the following illustrates the basic URL and data involved to send a first and last name to the server in a GET and POST request:
GET request URL:
http://localhost/code/example1.html?first=Brad&last=Dayley
GET request data:
<empty>
POST request URL:
http://localhost/code/example1.html
first=Brad
last=Dayley
Which request type should you use? The basic rule is to use a GET for retrieving information from the server and a POST if you are changing data on the server.
Understanding Response Data Types—Binary Versus Text Versus XML Versus JSON
It’s important to be clear on the response data types that may come back from the server. The data that comes back to an AJAX request will be either in some sort of binary or text format. Typically, binary is reserved for images, zip files, and the like. However, text may be raw text, HTML, XML, JSON, and so on.
What does that mean? This is where it can get a bit tricky. When the browser receives a response from the server, it attempts to determine the type of data received by the server and create the appropriate response object for you to use.
For XML and HTML data, a DOM object is created, whereas for JSON, a JavaScript object is created. For raw text or binary objects, an object is constructed that provides access to the raw text or binary data.
Implementing AJAX
Now that you have your head wrapped around the AJAX concepts, you are ready to begin implementing the basic details. To implement AJAX requests, you need to access the HTTP request object, format the data that needs to be sent to the server, send the request, and then handle the response.
Both JavaScript and jQuery have methods to send an AJAX request to the web server. You’ll see both methods in the following sections. jQuery is able to do everything that JavaScript can do, but in a much easier and extensible manner.
The following sections discuss and provide some examples of implementing basic AJAX requests.
AJAX from JavaScript
To implement an AJAX request in JavaScript, you need access to a new window.XMLHttpRequest object. Table 15.1 describes the important methods and attributes of the XMLHttpRequest object:
To illustrate this, check out the following code that sends a GET AJAX request to the server to get the email address based on first and last name parameters:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("email").innerHTML=xmlhttp.responseText;}
}
xmlhttp.open("GET","getUserEmail.php?userid=brad",true);
xmlhttp.send();
The following code illustrates how to send a basic POST AJAX request to the server to set the email address. Notice that for the POST request, the added Content-length and Content-type headers make sure that the data is treated correctly at the server. The Content-length is set to the length of the params string.
var xmlhttp = new XMLHttpRequest();
var params = "first=Brad&last=Dayley&[email protected]";
http.setRequestHeader("Content-type", "text/plain");
http.setRequestHeader("Content-length", params.length);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ alert("Email Updated");
}
xmlhttp.open("POST","setUserEmail.php",true);
xmlhttp.send(params);
In Internet Explorer browsers earlier than IE7, you need to use the following line to create the xmlhttp object because the window object doesn’t support the XMLHttpRequest attribute:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
AJAX from jQuery
This section looks at implementing AJAX requests from jQuery. jQuery provides very simple-to-use wrapper methods to implement AJAX requests, .load(), .get(), and .post().
The helper functions are wrappers around the .ajax() interface, which is discussed later. These helper functions are the following:
.load(url [, data ] [, success(data, textStatus, jqXHR) ] )—This method is used to load data directly into elements represented by the jQuery object.
.getScript (url [, data ] [, success(data, textStatus, jqXHR) ] ) )—This method is used to load and then immediately execute a JavaScript/jQuery script.
.getJSON(url [, data ] [, success(data, textStatus, jqXHR) ] ) )—This method is used to load data in JSON format using a JSONP request to servers on different domains.
.get(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ]) )—This method is used to send a generic GET request to the server.
.post(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ]) )—This method is used to send a generic POST request to the server.
Each of these methods enables you to specify the url of the request. The .load() method is used to load data directly into elements represented by jQuery object. The .get() and .post() methods are used to send GET and POST requests.
The data argument can be a string or basic JavaScript object. For example, in the following example, obj, objString, and formString are all valid data arguments:
var obj ={"first":"Brad", "last":"Dayley"};
var objString = $.param(obj);
var formString = $("form").serialize();
You can also specify the function that executes when the response from the server succeeds. For example, the following success handler sets the value of the #email element to the value response data:
$.get("getEmail.php?first=Brad&last=Dayley", null, function (data, status, xObj){
$("#email").html(data);
}));
The .get() and .post() methods also enable you to specify a dataType parameter as a string, such as “xml", "json", "script", "html", and so on, that formats the expected format of the response data from the server. For example, to specify a response type of JSON, you would use the following:
$.get("getUser.php?first=Brad&last=Dayley", null, function (data, status, xObj){
$("#email").html(data.email);
}), "json");
Try it Yourself: Sending an AJAX Request from jQuery
1. In Aptana, create the hour15, hour15/js, and hour15/css folders, and then add the hour15/hour1501.html, hour15/js/hour1501.js, and hour15/css/hour1501.css files. You also need to copy the images, data, and php folders from the book’s website at code/hour15 to the hour15 folder in Aptana.
2. Add the code shown in Listing 15.1-html and Listing 15.1-css to the HTML and CSS files. The code in these files should be familiar to you, with the exception of an article attribute to the <span> element, as shown next. This is used in the jQuery to identify which article should be loaded when the span is clicked.
<span class="navItem" article="article1">jQuery Under the Hood</span>
3. Now open the hour1501.js file and add the following .ready() that adds a click handler setArticle() to the left navigation items on the web page:
4 $(document).ready(function(){
5 $(".navItem").click(setArticle);
6 });
4. Add the following click handler setArticle() that calls the jQuery AJAX method .load() and populates the #content <div> with new data loaded from the server. Notice that the article attribute in the span is read and a .html extension added so that the .load() method requests a different article for each link.
1 function setArticle(){
2 $("#content").load("data/"+$(this).attr("article")+".html");
3 }
5. Save all three files and then open the HTML document in a web browser, as shown in Figure 15.2. You should be able to click the left navigation items and load different articles.
LISTING 15.1-html HTML Document That Adds Menu and Content
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 15-1</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour1501.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour1501.css">
09 </head>
10 <body>
11 <div><div id="banner">jQuery Articles</div>
12 <div>
13 <div id="leftNav">
14 <span class="navItem" article="article1">jQuery Under the Hood</span>
15 <span class="navItem" article="article2">jQuery Your New Best Friend</span>
16 <span class="navItem" article="article3">Turbo Charged Web Sites</span>
17 </div>
18 <div id="content">
19 <span id="title"> </span>
20 <div id="article"></div>
21 </div>
22 </div>
23 </body>
24 </body>
25 </html>
LISTING 15.1-js jQuery and JavaScript That Implements the AJAX .load() Requests
1 function setArticle(){
2 $("#content").load("data/"+$(this).attr("article")+".html");
3 }
4 $(document).ready(function(){
5 $(".navItem").click(setArticle);
6 });
LISTING 15.1-css CSS Code That Styles the Page
01 div { margin:0px; display:inline-block; float:left; text-align:center; }
02 p { margin:2px; }
03 #banner { border-radius: 15px 15px 0px 0px;
04 background-image: -moz-linear-gradient(center top , #0000FF, #88BBFF);
05 color:white; height:30px; width:550px; font-size:20px; }
06 #leftNav { width:150px; height:400px; border:3px groove #000088; }
07 .navItem { border:1px dotted; display:block; margin:3px; }
08 .navItem:hover { border:1px solid; background-color:#00FF00; cursor:pointer; }
09 #content {border:1px solid blue;}
10 #article { width: 372px; height:350px; padding:10px; overflow-y:scroll; }
11 #title { font-weight:bold; font-size:20px; display:block; margin:5px;
12 background-color:#0000AA; color:white; border-radius:5px; }
13 #by { text-align:right; font:bold italic 16px arial black; float:left;
14 margin-bottom:20px; }
15 #date { text-align:right; font:italic 12px arial black; float:right;}
16 #article p {margin-top:20px; background-color:#DDDDDD; border-radius:5px;
17 clear:both; padding:5px; }
Handling AJAX Responses
In addition to specifying the success handler, the wrapper methods also enable you to attach additional handlers using the following methods:
.done(data, textStatus, jqXHR)—Called when a successful response is received from the server.
.fail(data, textStatus, jqXHR)—Called when a failure response is received from the server or the request times out.
.always(data, textStatus, jqXHR)—Always called when a response is received from the server.
For example, the following code adds an event handler that is called when the request fails:
$.get("getUser.php?first=Brad&last=Dayley", null, function (data, status, xObj){
$("#email").html(data.email);
}), "json").fail(function(data, status, xObj){
alert("Request Failed");
});
Try it Yourself: Handling Login Request Successes and Failures
1. In Aptana, create the hour15, hour15/js, and hour15/css folders, and then add the hour15/hour1502.html, hour15/js/hour1502.js, and hour15/css/hour1502.css files.
2. Add the code shown in Listing 15.2-html and Listing 15.2-css to the HTML and CSS files. The HTML and CSS code define a basic login dialog.
3. Open the hour1502.js file and add the following .ready() function that will add a click handler to the input button:
09 $(document).ready(function(){
10 $("#loginButton").click(login);
11 });
4. Add the following click handler login() that will be called when the user clicks the login button. The handler makes an AJAX .get() request to the hour15/php/login.php file that should already be in place. Notice that the data from the #loginForm is serialized using .serialize() to create the query string. Also notice that .done(), .fail(), and .always() are attached to the .get() request to handle the AJAX completion events.
04 function login(){
05 $.get("php/login.php",
06 $("#loginForm").serialize()).done(success).fail(failure).always(always);
07 return false;
08 }
5. Add the following three AJAX event handlers to handle completion, failure, and successful login attempts:
01 function failure(){ alert("Login Failed"); }
02 function success(){ alert("Login Succeeded"); }
03 function always(){ alert("Login Attempt Completed"); }
6. Save all three files and then open the HTML document in a web browser, as shown in Figure 15.3. You should see the completion alert pop up whenever you click the login button. You should also see the success alert when you use the correct credentials of username="user" and password="password".
LISTING 15.2-html HTML Document That Creates the Login Dialog
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 15-2</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour1502.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour1502.css">
09 </head>
10 <body>
11 <div id="login">
12 <div id="title">Login</div>
13 <form id="loginForm">
14 <label>Username: </label><input type="text" name="user" /><br>
15 <label>Password: </label><input type="password" name="pw" /><br>
16 <input id="loginButton" type="button" value="Login" />
17 </form>
18 </div>
19 </body>
20 </body>
21 </html>
LISTING 15.2-js jQuery and JavaScript That Sends the Login Request to the Server via an AJAX GET Request and Handles Success and Failure Conditions
01 function failure(){ alert("Login Failed"); }
02 function success(){ alert("Login Succeeded"); }
03 function always(){ alert("Login Attempt Completed"); }
04 function login(){
05 $.get("php/login.php",
06 $("#loginForm").serialize()).done(success).fail(failure).always(always);
07 return false;
08 }
09 $(document).ready(function(){
10 $("#loginButton").click(login);
11 });
LISTING 15.2-css CSS Code That Styles the Page
01 #login { border-radius: 15px; text-align:center;
02 height:180px; width:250px; border: 3px ridge blue;
03 #title { border-radius: 10px 10px 0px 0px;
04 background-image: -moz-linear-gradient(center top , #0000FF, #88BBFF);
05 height:30px; color:white; font:bold 22px arial black; }
06 input { border-radius:10px; border:3px groove blue; margin-top:20px;
07 padding-left:10px; }
08 label { font:italic 18px arial black; }
Handling Response Data
You have already learned about the different data types that can be generated by the response. The four main types that you will be working with are script, text, JSON, and XML/HTML. The script and text are handled simply by the .load() and .getScript() methods. JSON and XML/HTML can be a bit more complex.
The following sections walk you through the process of handling JSON and XML data in the response from the server.
Try it Yourself: Handling JSON Response Data
{"first":"Brad", "last":"Dayley"}
var name = data.first + " " + data.last;
var data = $.parseJSON('{"first":"Brad", "last":"Dayley"}'),
var name = data.first + " " + data.last;
1. In Aptana, create the hour15, hour15/js, and hour15/css folders, and then add the hour15/hour1503.html, hour15/js/hour1503.js, and hour15/css/hour1503.css files.
2. Add the code shown in Listing 15.3-html and Listing 15.3-css to the HTML and CSS files. These are very basic files because the image elements will be dynamically generated.
3. Open the hour1503.js file and add the following .ready() function that makes a .get() request to the server to get the hour15/data/images.json file and calls the updateImages() AJAX request complete event handler. The contents of the JSON file can be seen in Listing 15.3-json.
10 $(document).ready(function(){
11 $.get("data/images.json", updateImages);
12 });
4. Add the following AJAX request complete event handler updateImages(). Notice that the JSON response data has been converted to a JavaScript object array that you are able to iterate through and create the image elements and add them to the web page.
01 function updateImages(data){
02 for (i=0; i<data.length; i++){
03 var imageInfo =data[i];
04 var img = $('<img />').attr("src", "images/"+imageInfo.image);
05 var title = $("<p></p>").html(imageInfo.title);
06 var div = $("<div></div>").append(img, title);
07 $("#images").append(div);
08 }
09 }
5. Save all three files and then open the HTML document in a web browser, as shown in Figure 15.4. You should see the images loaded with the captions from the JSON file.
LISTING 15.3-html HTML Document That Loads the jQuery and JavaScript
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 15-3</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour1503.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour1503.css">
09 </head>
10 <body>
11 <div id="images"></div>
12 </body>
13 </html>
LISTING 15.3-js jQuery and JavaScript Code That Implements the AJAX Request and Handles the JSON Response
01 function updateImages(data){
02 for (i=0; i<data.length; i++){
03 var imageInfo =data[i];
04 var img = $('<img />').attr("src", "images/"+imageInfo.image);
05 var title = $("<p></p>").html(imageInfo.title);
06 var div = $("<div></div>").append(img, title);
07 $("#images").append(div);
08 }
09 }
10 $(document).ready(function(){
11 $.get("data/images.json", updateImages);
12 });
LISTING 15.3-json JSON Data from the Book Website at code/hour15/data/images.json Containing Image Filenames and Captions
1 [
2 {"title":"Rugged Strength", "image":"bison.jpg"},
3 {"title":"Great Heights", "image":"peak.jpg"},
4 {"title":"Summer Fun", "image":"boy.jpg"},
5 {"title":"Grandeur of Nature", "image":"falls.jpg"},
6 {"title":"Soft Perfection", "image":"flower.jpg"},
7 {"title":"Looking Forward", "image":"boy2.jpg"},
8 {"title":"Joy of Finishing", "image":"sunset.jpg"}
9 ]
LISTING 15.3-css CSS Code That Styles the Images
1 div {border:3px ridge white; box-shadow: 5px 5px 5px #888888;
2 display:inline-block; margin:10px; }
3 p { background-image: -moz-linear-gradient(center top , #B1B1B1, #FFFFFF);
4 margin:0px; padding:3px; text-align:center; }
5 img { height:130px; vertical-align:top; }
6 #images { background-color:black; padding:20px; }
Try it Yourself: Handling XML/HTML Response Data
<person><first>Brad</first><last>Dayley</last></person>
var name = $(data).find("first").text() + " " + $(data).find("last").text();
var data = $.parseXML("<person><first>Brad</first><last>Dayley</last></person>");
var name = $(data).find("first").text() + " " + $(data).find("last").text();
1. In Aptana, create the hour15, hour15/js, and hour15/css folders, and then add the hour15/hour1504.html, hour15/js/hour1504.js, and hour15/css/hour1504.css files.
2. Add the code shown in Listing 15.4-html and Listing 15.4-css to the HTML and CSS files. These are very basic files because the table body will be dynamically generated.
3. Open the hour1504.js file and add the following .ready() function that will make a .get() request to the server to get the hour15/data/parkdata.xml file and call the updateTable() AJAX request complete event handler. The contents of the XML file can be seen in Listing 15.4-xml.
13 $(document).ready(function(){
14 $.get("data/parkdata.xml", updateTable);
15 });
4. Add the following AJAX request complete event handler updateTable(). Notice that the XML response data has been converted to a DOM element that is converted to a jQuery object using $(data). The jQuery object can then be iterated using .each(), and each element can be searched using the .children() method to get the different values in the XML data.
01 function updateTable(data){
02 var parks = $(data).find("park");
03 parks.each(function(){
04 var tr = $("<tr></tr>");
05 tr.append($("<td></td>").html($(this).children("name").text()));
06 tr.append($("<td></td>").html($(this).children("location").text()));
07 tr.append($("<td></td>").html($(this).children("established").text()));
08 var img = $('<img />').attr("src", "images/"+$(this).children("image").text());
09 tr.append($("<td></td>").append(img));
10 $("tbody").append(tr);
11 });
12 }
5. Save all three files and then open the HTML document in a web browser, as shown in Figure 15.5. You should see the table populated from the XML file.
LISTING 15.4-html HTML Document That Loads the jQuery and JavaScript
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 15-4</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour1504.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour1504.css">
09 </head>
10 <body>
11 <table>
12 <caption>Favorite U.S. National Parks</caption>
13 <thead><th>Park</th><th>Location</th><th>Established</th><th> </th></thead>
14 <tbody></tbody>
15 </table>
16 <p></p>
17 </body>
18 </html>
LISTING 15.4-js jQuery and JavaScript Code That Implements the AJAX Request and Handles the XML Response
01 function updateTable(data){
02 var parks = $(data).find("park");
03 parks.each(function(){
04 var tr = $("<tr></tr>");
05 tr.append($("<td></td>").html($(this).children("name").text()));
06 tr.append($("<td></td>").html($(this).children("location").text()));
07 tr.append($("<td></td>").html($(this).children("established").text()));
08 var img = $('<img />').attr("src", "images/"+$(this).children("image").text());
09 tr.append($("<td></td>").append(img));
10 $("tbody").append(tr);
11 });
12 }
13 $(document).ready(function(){
14 $.get("data/parkdata.xml", updateTable);
15 });
LISTING 15.4-xml XML Data File with Raw Table Data
01 <parkinfo>
02 <park>
03 <name>Yellowstone</name>
04 <location>Montana, Wyoming, Idaho</location>
05 <established>March 1, 1872</established>
06 <image>bison.jpg</image>
07 </park>
08 <park>
09 <name>Yosemite</name>
10 <location>California</location>
11 <established>March 1, 1872</established>
12 <image>falls.jpg</image>
13 </park>
14 <park>
15 <name>Zion</name>
16 <location>Utah</location>
17 <established>November 19, 1919</established>
18 <image>peak.jpg</image>
19 </park>
20 </parkinfo>
LISTING 15.4-css CSS Code That Styles the Table
1 img {width:80px;}
2 caption, th {
3 background-image: -moz-linear-gradient(center top , #0000FF, #88BBFF);
4 color:white; font:bold 18px arial black; }
5 caption { border-radius: 10px 10px 0px 0px; font-size:22px; height:30px; }
6 td { border:1px dotted; padding:2px; }
Try it Yourself: Updating Server Data from jQuery Using AJAX
1. In Aptana, create the hour15, hour15/js, and hour15/css folders, and then add the hour15/hour1505.html, hour15/js/hour1505.js, and hour15/css/hour1505.css files.
2. Add the code shown in Listing 15.5-html and Listing 15.5-css to the HTML and CSS files. These files define the style and framework for the vacations page. There shouldn’t be anything new in these files that you haven’t already seen.
3. Open the hour1505.js file and add the following .ready() function that will make a .get() request to the server to get the list of vacations from the tripInfo.php script. Notice that a parameter list with option:"getList" is sent to tell the script what data is requested. Also, a .done() function is added so that when the data has been returned and the links are populated, the first link is automatically clicked to set the vacation content. Notice that the sendRating() event handler is added to the start elements to handle rating changes via the mouse:
29 $(document).ready(function(){
30 $.get("php/tripInfo.php", {option:"getList"}, setList).done(function(){
31 $("span:first").click(); return false; });
32 $(".star").click(sendRating);
33 });
4. Add the following click handler setList() for the left navigation buttons. For each of the buttons, the getTrip() event handler is added.
14 function setList(data){
15 var items = [];
16 $.each(data, function(key, val) {
17 var item = $("<span></span>").html(val);
18 item.click(function(){getTrip($(this).html())});
19 $("#leftNav").append(item);
20 });
21 }
5. Add the following getTrip() event handler that will send a .get() AJAX request to get a specific trip’s info by specifying option:"getTrip" and title:<trip title>. The setTrip() handler is called when the AJAX request is complete, so you need to add the code shown in Listing 15.5-js lines 1–9. This function takes the JSON data and populates the content elements.
10 function getTrip(title){
11 var params = [{name:"option", value:"getTrip"}, {name:"title", value:title}]
12 $.get("php/tripInfo.php", params, setTrip);
13 }
6. Add the following sendRating() function that gets called when the user clicks a star. The index of the .star element is sent to the server via a .post() method with parameters option:"setRating", title:<trip title>, and value:<start index>. The resulting POST request updates the JSON file on the server, permanently storing the new rating value.
22 function sendRating(){
23 var rating = $(".star").index($(this))+1;
24 var params = [{name:"option", value:"setRating"},
25 {name:"title", value:$("#title").html()},
26 {name:"rating", value:rating}]
27 $.post("php/tripInfo.php", params, setTrip);
28 }
7. Save all three files and then open the HTML document in a web browser, as shown in Figure 15.6. You should be able to link to the different vacations, see the images, and set the ratings.
FIGURE 15.6 Simple vacation page with the capability to load data dynamically and update the rating via AJAX.
LISTING 15.5-html HTML Document That Loads the jQuery and JavaScript
01 <!DOCTYPE html>
02 <html>
03 <head>
04 <title>Hour 15-5</title>
05 <meta charset="utf-8" />
06 <script type="text/javascript" src="../js/jquery.min.js"></script>
07 <script type="text/javascript" src="js/hour1505.js"></script>
08 <link rel="stylesheet" type="text/css" href="css/hour1505.css">
09 </head>
10 <body>
11 <div><div id="banner">Vacations</div>
12 <div>
13 <div id="leftNav"></div>
14 <div id="content">
15 <p id="title">Title</p>
16 <img id="photo" src="images/falls.jpg" width="200px"/>
17 <p id="date">date</p>
18 <p id="info"><label>5</label> days of fun in <label>Location</label></p>
19 <img class="star" src="images/star.ico" />
20 <img class="star" src="images/star.ico" />
21 <img class="star" src="images/star.ico" />
22 <img class="star" src="images/star.ico" />
23 <img class="star" src="images/star.ico" />
24 </div>
25 </div>
26 </body>
27 </html>
LISTING 15.5-js jQuery and JavaScript Code That Implements the AJAX Request That Populates the Page and Updates the Server Data
01 function setTrip(data){
02 $("#title").html(data.title);
03 $("#photo").attr("src", "images/"+data.image);
04 $("#date").html(data.date);
05 $("label:first").html(data.days);
06 $("label:last").html(data.location);
07 $(".star:gt("+(parseInt(data.rating)-1)+")").attr("src", "images/empty.ico");
08 $(".star:lt("+(parseInt(data.rating))+")").attr("src", "images/star.ico");
09 }
10 function getTrip(title){
11 var params = [{name:"option", value:"getTrip"}, {name:"title", value:title}]
12 $.get("php/tripInfo.php", params, setTrip);
13 }
14 function setList(data){
15 var items = [];
16 $.each(data, function(key, val) {
17 var item = $("<span></span>").html(val);
18 item.click(function(){getTrip($(this).html())});
19 $("#leftNav").append(item);
20 });
21 }
22 function sendRating(){
23 var rating = $(".star").index($(this))+1;
24 var params = [{name:"option", value:"setRating"},
25 {name:"title", value:$("#title").html()},
26 {name:"rating", value:rating}]
27 $.post("php/tripInfo.php", params, setTrip);
28 }
29 $(document).ready(function(){
30 $.get("php/tripInfo.php", {option:"getList"}, setList).done(function(){
31 $("span:first").click(); return false; });
32 $(".star").click(sendRating);
33 });
LISTING 15.5-css CSS Code That Styles the Page Elements
01 * { font-family:Georgia; }
02 div { margin:0px; display:inline-block; float:left; text-align:center; }
03 span { background-image: -moz-linear-gradient(center top , #f1f1f1, #8F8F8F);
04 color:black; font-size:20px; float:left; cursor:pointer;
05 width:150px; text-align:center; border-bottom:3px ridge; }
06 p { margin:0px; }
07 #banner {
08 background-image: -moz-linear-gradient(center top , #0000FF, #88BBFF);
09 color:white; height:80px; width:550px; font-size:60px;
10 border:3px ridge blue; }
11 #title { font-weight:bold; font-size:32px; border:3px ridge;
12 background-image: -moz-linear-gradient(center top , #5588FF, #88BBFF);}
13 #leftNav {width:150px; height:400px; font-size:20px; background-color:#AACCFF;
14 border:3px ridge;}
15 #content { height:400px; width: 400px; background-color:#EEEEEE; }
16 #photo { margin:20px; border:5px ridge white; box-shadow: 10px 10px 5px #888888;
17 border-radius:30px;}
18 #date { color:red; font-style:italic; font-size:24px; }
19 #info, label { font-size:24px; }
Using Advanced jQuery AJAX
The concepts already covered in this hour should take care of most of your AJAX needs. However, they do not cover the full power of the jQuery AJAX interface. The following sections discuss some of the additional AJAX functionality built directly into jQuery.
Reviewing Global Setup
jQuery provides the .ajaxSetup() method that allows you to specify options that configure AJAX requests globally throughout the script. Table 15.3 lists some of the options that can be specified when calling .ajaxSetup(). For example, the following code sets the default global URL for requests:
$.ajaxSetup({url:"service.php", accepts:"json"})
Using Global Event Handlers
jQuery provides methods to create global event handlers that are called on events, such as initialization or completion for all AJAX requests. The global events are fired on each AJAX request. Table 15.2 lists the methods that you can use to register global event handlers.
An example of using global event handlers to set the class of a form is shown next:
$(document).ajaxStart(function(){
$("form").addClass("processing");
});
$(document).ajaxComplete(function(){
$("form").removeClass("processing");
});
Global events are never fired for cross-domain script or JSONP requests, regardless of the value of the global property in jQuery.ajaxSetup().
Implementing Low-Level AJAX Requests
All AJAX request wrapper methods that you have been working with in this hour are handled underneath through the .ajax(url [, settings]) interface. This interface is a bit more difficult to use, but it gives you much more flexibility and control of the AJAX request.
The .ajax() method is called the same way that .get() and .post() are; however, the settings argument allows you to set a variety of settings used when making the request.
Table 15.3 lists the more common settings that can be applied to the .ajax() method.
A simple example of using the .ajax() interface is shown in the following code:
$.ajax({
url:"setEmail",
type:"get",
accepts:"json",
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: {"first":"Brad", "last":"Dayley"}
}).fail(function(){ alert("request Failed"); });
The .ajax() method returns a jqXHR method that provides some additional functionality, especially when handling the response. Table 15.4 lists some of the methods and attributes attached to the jqXHR object.
Summary
AJAX is the basic communication framework between jQuery/JavaScript and the web server. Using AJAX allows you to get additional data from the web server and use it to dynamically update the web page instead of completely reloading it. This enables you to provide a much better experience for the user.
In this hour, you learned the ins and outs of AJAX. You were able to implement several examples that gave you experience with GET and POST requests, as well as handling different types of data, such as HTML, JSON, and XML.
Q&A
Q. Why is there a GET and a POST request and not just one request?
A. The answer is optimization. Although you could do everything with just POST requests, optimizations can be made at the web server as well as the browser by using GET requests that have the parameters directly in the URL. This is especially true with caching.
Q. Are there any other methods to send cross-domain requests besides JSONP?
A. Yes. Flash and Silverlight both have mechanisms that allow you to send cross-domain requests. HTML5 also introduces the postMessage interface designed to allow cross-domain requests.
Workshop
The workshop consists of a set of questions and answers designed to solidify your understanding of the material covered in this hour. Try to answer the questions before looking at the answers.
Quiz
1. Would you use a GET or a POST request to set a new password on a web server?
2. True or False: The .done() event handler function is called only if the AJAX request succeeds.
3. What data type is the response data converted to for XML data?
4. What data type is the response data converted to for JSON data?
5. Is it possible to specify the request headers sent with a GET request via jQuery?
Quiz Answers
1. POST.
2. True.
3. DOM object.
4. Basic JavaScript object.
5. Yes. You can use .ajax() with the headers parameter, or you can use .ajaxSetup() to set the headers parameter globally.
Exercises
1. Modify the example in Listing 15.3. Add an additional date value to each image in the JSON file. Then add the date value along with the image on the web page by including it in the image caption.
2. Modify the example in Listing 15.4. Add an additional column for rating. You will need to update the XML file, as well as the AJAX response handlers, to add the additional column to the rows. Also, you will need to fix up the CSS.