Simple Ajax
posted by Stephan Brumme
Interactive Web Sites
Ajax is the technology upon which pretty much every modern interactive website is build (except for these weird Flash sites). Professional web sites use large frameworks like jQuery that wrap the details of Ajax in a nice programming interface. That's perfectly fine but total overkill for a small blog like this.Live Demo
This DNS-to-IP resolver returns the IPv4 address of any domain. It may take up to 3 seconds to get a result.Have a look at the sorting algorithm live demo which is based on Ajax, too.
Barebone Ajax
Support for Windows XP is running out and that's very good news because sooner or later Internet Explorer 6 will vanish from the market. Without taking care of that old beast, Ajax becomes simple and easy.My Ajax requests often have some parameters that I pass from the user's browser to my server encoded in the URL, e.g.
ajaxsort.php?12345.
On the server, a script or binary is executed which returns plain text or sometimes HTML code.
This result shall be inserted somewhere in the original web page.The whole Ajax code consists of 18 lines:
hide
<script type="text/javascript">
// start an ajax request
function request(domId, query)
{
var ajaxObject = new XMLHttpRequest();
if (!ajaxObject)
return false;
ajaxObject.onreadystatechange = function()
{
if (ajaxObject.readyState == 4 && ajaxObject.status == 200)
document.getElementById(domId).innerHTML = ajaxObject.responseText;
};
ajaxObject.open('GET', encodeURI(query), true);
ajaxObject.send(null);
return true;
}
</script>
ajaxdemo
<span class="ajaxdemo"></span>
<form>
<input type="text" id="num" onKeyUp="request('ajaxdemo', 'ajaxsort.php?'+this.value);" />
</form>
request are the ID, here I used ajaxdemo,
and the URL (incl. parameters) of the server object generating the response.
How It Works
The Ajax communication is handled byXMLHttpRequest.onreadystatechange contains the code executed once the response was
received from the server.
An unnamed function, a so-called lambda function, checks for errors
(readyState 4 means completed, status 200 means valid data)
and then replaces the contents of the HTML element carrying the ID domId
by the server's responseText.
responseText can be plain text or HTML.But before any response arrives, we have to send the request first ;-) and that's handled by
open and send.Special characters not allowed in an URL are rewritten first (
encodeURI) and
the request is defined to be asynchroniuously (third parameter is true).All data is already encoded in the URL (
open used GET method / first parameter)
so there is no need to send additional data.
Therefore send has a null parameter.There can be multiple pending Ajax requests. status.stephan-brumme.com frequently sends more than 30 concurrent Ajax requests.
Live Demo's Source Code
That's the input form on this page:hide
<form>
<input type="text" placeholder="(enter domain name, e.g. google.com))" size="40" id="url" />
<input type="button" value="Resolve !"
onclick="request('ajaxdemo',
'/simple-ajax/resolve.ajax?'+document.getElementById('url').value);" />
=> IP: <span id="ajaxdemo"></span>
</form>
hide
resolve.ajax
<? echo gethostbyname($_SERVER["QUERY_STRING"]); ?>
.htaccess treats .ajax
the same way as PHP files.
Internet Explorer 6
If you have to support Internet Explorer 6, you can prepend the following code (see here for more details):hide
if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) {}
return null;
};
RSS
