HTML and CSS Reference
In-Depth Information
In the preceding section, you explored how to use the WebSocket API to open a
bidirectional communication channel with the server. In this section, you examine using
jQuery and AJAX to make server requests to retrieve updated content for your pages. In tra-
ditional web development, when content needs to be updated on a page, a request is made
to the server for the page itself where the server-side code can run to get the new content,
perhaps from a database, and re-render the page with updated information. The user experi-
ence is a flicker as the entire page needs to be refreshed. The use of AJAX has solved this
issue by allowing you to make server-side requests via JavaScript without having to request a
full page refresh. You can implement AJAX without jQuery; however, because of the popular-
ity and ease of use that jQuery provides, using jQuery to implement this type of functionality
is much more desirable.
By requesting data from a server with JavaScript via jQuery and AJAX, you can retrieve
data behind the scenes and then use the various DOM manipulation techniques that you've
learned to update specific areas of the page that need to be updated. This prevents the need
to send a request for the entire page back to the server and creates a much more pleasant
user experience.
For this example, you will create a fictitious website for searching fruit. The page consists
of a box to enter an adjective about fruit and return any fruit that match the results. The
webpage is set up as shown in Listing 2-2.
LISTING 2-2
The Fruit Finder webpage
<html>
<head>
<script src=”jquery-2.0.3.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
window.onload = function () {
$('#searchButton').click(function () {
var searchPath;
$('#searchResults').empty();
switch ($('#searchFruit').val()) {
case 'long':
searchPath = “Fruit/Long.xml”;
break;
case 'round':
searchPath = “Fruit/Round.xml”;
break;
case 'orange':
searchPath = “Fruit/Orange.xml”;
break;
default:
InvalidSearchTerm();
}
Search WWH ::
Custom Search