Home
An Introduction to AJAX
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.
About
Why Use AJAX?
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.
Process
The JQuery AJAX Method
JQuery has a built in .ajax method to perform these asynchronus
requests and receive the responses.
<![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.