How do I handle concurrent AJAX requests?
With JavaScript you can have more than one AJAX request
processing at a single time. In order to insure the
proper post processing of code it is recommended that
you use JavaScript Closures. The example below shows an XMLHttpRequest object abstracted by a JavaScript object
called AJAXInteraction. As arguments you pass in the URL
to call and the function to call when the processing is
done.
function AJAXInteraction(url, callback) {
var req = init();
req.onreadystatechange = processRequest;
function init() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function processRequest () {
if (req.readyState == 4) {
if (req.status == 200) {
if (callback) callback(req.responseXML);
}
}
}
this.doGet = function() {
req.open("GET", url, true);
req.send(null);
}
this.doPost = function(body) {
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "
application/x-www-form-urlencoded");
req.send(body);
}
}
function makeRequest() {
var ai = new AJAXInteraction("processme",
function() { alert("Doing Post Process");});
ai.doGet();
}
The function makeRequest() in the example above creates
an AJAXInteraction with a URL to of "processme" and an
inline function that will show an alert dialog with the
message "Doing Post Process". When ai.doGet() is called
the AJAX interaction is initiated and when server-side
component mapped to the URL "processme" returns a
document which is passed to the callback function that
was specified when the AJAXInteraction was created.
Using this closures insures that the proper callback
function associated with a specific AJAX interaction is
called. Caution should still be taken when creating
multiple closure objects in that make XmlHttpRequests as
to there is a limited number of sockets that are used to
make requests at any given time. Because there are
limited number of requests that can be made
concurrently. Internet Explorer for example only allows
for two concurrent AJAX requests at any given time.
Other browsers may allow more but it is generally
between three and five requests. You may choose to use
pool of AJAXInteraction objects.
One thing to note when making multiple AJAX calls from
the client is that the calls are not guaranteed to
return in any given order. Having closures within the
callback of a closure object can be used to ensure
dependencies are processed correctly.
There is a discussion titled Ajaxian Fire and Forget
Pattern that is helpful.
What do I do on the server to interact with an AJAX
client?
The "Content-Type" header needs to be set to"text/xml".
In servlets this may be done using the
HttpServletResponse.setContentType()should be set to
"text/xml" when the return type is XML. Many
XMLHttpRequest implementations will result in an error
if the "Content-Type" header is set The code below shows
how to set the "Content-Type".
response.setContentType("text/xml");
response.getWriter().write("<response>invalid</response>");
You may also want to set whether or not to set the
caches header for cases such as autocomplete where you
may want to notify proxy servers/and browsers not to
cache the results.
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<response>invalid</response>");
Note to the developer: Internet Explorer will
automatically use a cached result of any AJAX response
from a HTTP GET if this header is not set which can make
things difficult for a developer. During development
mode you may want set this header. Where do I store
state with an AJAX client
As with other browser based web applications you have a
few options which include:
* On the client in cookies - The size is limited
(generally around 4KB X 20 cookies per domain so a total
of 80KB) and the content may not be secure unless
encrypted which is difficult but not impossible using
JavaScript.
* On the client in the page - This can be done securely
but can be problematic and difficult to work with. See
my blog entry on Storing State on the Client for more
details on this topic.
* On the client file system - This can be done if the
client grants access to the browser to write to the
local file system. Depending on your uses cases this may
be necessary but caution is advised.
* On the Server - This is closer to the traditional
model where the client view is of the state on the
server. Keeping the data in sync can be a bit
problematic and thus we have a solution Refreshing Data
on this. As more information processing and control
moves to the client where state is stored will need to
be re-evaluated.
Whats with the -alpha in the install instructions?
HTML_AJAX hasn't had a stable release yet and the pear
installer doesn't install non stable packages by default
unless you specify a version.
How do I submit a form or a part of a form without a
page refresh?
When creating a form make sure that the "form" element "onSubmit"
attribute is set to a JavaScript function that returns
false.
<form onSubmit="doAJAXSubmit();return false;" >
<input type="text" id="tf1" />
<input type="submit" id="submit1" value="Update"/>
</>
You can also submit data by associating a function with
a form button in a similar way.
<form onSubmit="doAJAXSubmit();return false;" >
<input type="text" id="tf1" />
<input type="button" id="button1" onClick="doAJAXSubmit()"
value="Update"/>
</>
Note that the form "onSubmit" attribute is still set. If
the user hits the enter key in the text field the form
will be submitted so you still need to handle that case.
When updating the page it is recommend you wait to make
sure that the AJAX update of the form data was
successful before updating the data in the page.
Otherwise, the data may not properly update and the user
may not know. I like to provide an informative message
when doing a partial update and upon a successful AJAX
interaction I will then update the page.
How do I test my AJAX code?
There is a port of JUnit for client-side JavaScript
called JsUnit
What exactly is the W3C DOM?
The W3C Document Object Model (DOM) is defined by the
W3C as the following: The Document Object Model is a
platform- and language-neutral interface...
When will HTML_AJAX have a stable release?
Once all the major features are complete and the API has
been tested, the roadmap gives an idea of whats left to
be done.
What parts of the HTML_AJAX API are stable?
We don't have a list right now, but most of the API is
stable as of 0.3.0. There should be no major changes at
this point, though there will be lots of new additions.
What Browsers does HTML_AJAX work with?
As of 0.3.0, all the examples that ship with HTML_AJAX
have been verified to work with
* Firefox 1.0+
* Internet Explorer 5.5+ (5.0 should work but it hasn't
been tested)
Most things work with
* Safari 2+
* Opera 8.5+
