The AJAX Solution
AJAX stands for Asynchronus Javascript And XML. AJAX allows pages to make requests from the server and receive results without leaving the current page. Using Javascript (or JQuery specifically), we can take those results and update only the parts of the page that need it. So the new process is that the web page takes the user input and sends its requests to the server by way of JavaScript. The server responds to the request, as it always has, except it returns only the requested information and not the entire page. Since JavaScript is making the request, it also receives the results. Then, JavaScript is used to update/redraw the parts of the page that need to change. The Asyncrhonus part means that all of this actions happens in the background and does not stop users from continuing to interact with the page in the mean time.
The JQuery .ajax Method
JQuery has a built in .ajax method to perform these asynchronus requests and receive the responses. The general format for the method call is as follows:
<![CDATA[$.ajax({
option: value,
option: value,
option: value
});]]>
There are a number of options available in the .ajax method, but there are a few key items that are required to work with XML data. They are as follows:
- type - specifies the type of request. For XML queries, use GET
- url - identifies the file to send the request to. This is typically your XML page.
- dataType - the type of information being requested. For XML, use "xml". For html, use "html".
- success - identifies a function to be run following a successful query. Typically, the success callback function takes a data parameter which is the results of the query.
- error - identifies a function to be run following an unsuccessful query.
JQuery, AJAX and HTML for Including HTML
One of the cheif complaints of web designers is the inefficiency of re-writing the same code on each page. Some of this is alleviated through the use of external css and js scripts. Unfortunately, there is a lot of html structure code that is also repetitive (header, navigation, footer, etc.). When working with a server side script such as PHP, this problem can be fixed through the use of includes. The ability, pre-browser, to include other html files. This allows server side programmers to create a file that is just for the navigation and include it on each page. In this way, if a change needs to be made to the navigation, it is made in one place and then propogates to all of the pages that include that file, similar to external css.
A creative use of JQuery and AJAX allows us to query an html document. And, if we don't pick the resulting code apart, it can simply be appended to an existing element, thus creating a client side include process. See the example below.
HTML File (header.html):
<![CDATA[<header>
Logo<br/>
Navigation
</header>]]>
Script File (header.js):
<![CDATA[$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'header.html',
dataType: 'html',
success: function(result){
$('body').append(result);
}
});//end ajax
});]]>
Actual Page (index.html):
<![CDATA[...
</head>
<body>
<!-- main content -->
<!-- jquery script include -->
<script src='header.js'></script>
</body>
</html>
]]>
Problems of the Past
The old way of processing requests on a web site consumed a lot of time and resources. Typically, users entered information into an HTML form and the browser would send a request to the server. The server in turn would process the request and send back an entirely new HTML page that has to be completely redrawn by the browser. This happens over and over as users make requests. This is a lot of data passing back and forth and a lot of time required to redraw elements that were not changing.
Server Side Request Processing
Most often, JavaScript AJAX is used in conjunction with a server side scripting language and database. One of the common server side pairings used to process these requests is PHP and MySQL. when working with these languages, it is the server scripts that process/filter the results of the users query. This means that only the requested information is returned.
Without these technologies, AJAX can be used to query information from XML, JSON, and HTML documents. The big difference being that all of the information in the document is returned and JavaScript is left to filter to meet the users requests. When receiving XML data through an AJAX request, developers can use the DOM to cycle through the returned XML data and filter down to the requested information. One of the most important factors is that the XML being requested is in valid form.
Here is an example of some XML data representing links (links.xml):
<![CDATA[< ? xml version='1.0' ?>
<links>
<link>
<text>Google</text>
<address>www.google.com</address>
</link>
<link>
<text>Bing</text>
<address>www.bing.com</address>
</link>
<link>
<text>Yahoo</text>
<address>www.yahoo.com</address>
</link>
</links>
]]>
Here is a look at the JQuery code to request information from the links.xml files using AJAX:
<![CDATA[$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'links.xml',
dataType: 'xml',
success: function(result) {
$(result).find('link').each(function() {
var link=$('<a></a>').text($(this).find('text').text());
link.attr('href', $(this).find('address').text());
$('body').append(link);
$('body').append("<br/>");
});
},
error: function(){
alert("There was an error connecting to the server.);
}
});//end ajax
}); //end ready]]>
The .each() call is used to cycle through the 'array' of link objects identified in the document. Within the loop, the keyword 'this' is used to refer to the current node. If an xml object has an array of objects inside of it, the each loops can be nested to cycle through the next 'array'.
Filtering Results
To filter the results, we use our knowledge of XML and Javascript. Inside of the each loop that is cycling through the entries from the xml, we write conditions to identify desired results. For example, if we only wanted to find links whose text was google, we would write:
<![CDATA[if($(this).text()=="Google")]]>
To find the items with a certain class, say 'show', we would write:
<![CDATA[ if($(this).attr('class')=="show")]]>
In this way, we can filter and display only the requested information instead of all the information.