My First Ajax Request

A HunBug Document

Last Updated: Sep 07 Author: HunBug View the document in full Ajax is a term used for dynamically changing the content of a web page without the need to refreshing the page. It is not a language in itself but a framework that uses Javascript's XMLHttpRequest method to pass and retrieve data from the server, along with HTML and CSS elements to display the result. It is an acronym of "Asynchronous JavaScript and XML", although it does not always have to involve XML, text of any format can be returned. It is not a language in itself but a method that uses Javascript

A Simple Ajax Request
The example below will display a button, which when pressed displays the html source of the page via a XMLHttpRequest call.
<html> <head> <script type="text/javascript" language="javascript"> function makeHttpRequest() { //=============================== // Define http_request var httpRequest; try { httpRequest = new XMLHttpRequest(); // Mozilla, Safari, etc } catch(trymicrosoft) { try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch(oldermicrosoft) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch(failed) { httpRequest = false; } } } if(!httpRequest)

{ }

alert('Your browser does not support Ajax.'); return false;

//=============================== // Action http_request httpRequest.onreadystatechange = function() { if(httpRequest.readyState == 4) if(httpRequest.status == 200) alert(httpRequest.responseText); else alert('Request Error: '+httpRequest.status); } httpRequest.open('GET',document.location.href,true); httpRequest.send(null); } </script> </head> <body> <input type="button" value="My First Ajax Request" onclick="makeHttpRequest()"/> </body> </html>

How It Works
The makeHttpRequest function is called when the button is pressed. The first part of the function sets up the httpRequest variable. As usual Internet Explorer likes to do things differently, so we have to try and catch a few times to get it right. The section of code below shows the try and catch method which is the start of most Ajax functions.
//=============================== // Define http_request var httpRequest; try { httpRequest = new XMLHttpRequest(); // Mozilla, Safari, etc } catch(trymicrosoft) { try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch(oldermicrosoft) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch(failed) {

}

httpRequest = false;

} } if(!httpRequest) { alert('Your browser does not support Ajax.'); return false; }

The next step is to open and send the request and perform an action when it returns. The first part of the example below deals with the return. The onreadystatechange sets the function that is to be executed on the calls return. In this case it is passing the returning text, which is held in httpRequest.responseText, to an alert. The httpRequest.open line has three parameters. The first is the method which is commonly either GET or POST. The second is the url to call. In this example we use document.location.href to get the text for this page. Ajax has a security limitation to only allow calls to the same server. The third parameter is the asynchronous setting, which for Ajax would be true.
//=============================== // Action http_request httpRequest.onreadystatechange = function() { if(httpRequest.readyState == 4) if(httpRequest.status == 200) alert(httpRequest.responseText); else alert('Request Error: '+httpRequest.status); } httpRequest.open('GET',document.location.href,true); httpRequest.send(null);

Your first Ajax script should now be working. Congratulations.

View this document in full at
http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11340

http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11350

View the next part of the tutorial at