Thomas Sampson

Very good basic AJAX tutorial

Leave a comment

simple AJAX tutorial, goes through sending a request to the server (as a querystring) and getting the response text, and applying it to a div tag


Create a new XMLHTTP request object named “http”

function createRequestObject() {

var ro;
var browser = navigator.appName;
if(browser == “Microsoft Internet Explorer”){
ro = new ActiveXObject(“Microsoft.XMLHTTP”);
ro = new XMLHttpRequest();
return ro;

var http = createRequestObject();

Create a request sender poining it to an aspx page with the querystring “number” and tell it which function to use to handle the request (“handleResponse”)

function sndReq(thenumber) {‘get’, ‘example1service.aspx?number=’+thenumber);
http.onreadystatechange = handleResponse;

above; the “example1service.aspx” page simply takes the querystring and Response.Write ‘s it* 10 (for example) , also a try/catch for if the data sent was not an integer.

NOTE: the example1service.aspx page has ContentType=”Text” in the header

Create the request handler “handleResponse”, returnpanel is a div tag to recieve the contents of the request.

function handleResponse() {

if(http.readyState == 4){
var response = http.responseText;

document.getElementById(‘returnpanel’).innerHTML = response;




The HTML is simple a text input field which fires the sndReq() function on the keyup event, sending its own value as an argument , example


The html also contains the div tag to display the response with id=”returnpanel”

Author: tomtech999

I have recently graduated with a 1st class degree in MComp Games Software Development at Sheffield Hallam University, focusing primarily on application development in C++, with experience in graphics programming, scripting languages, DVCS/VCS and web technology. In my spare time I enjoy Drumming, Reading and Snowboarding!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s