Very good basic AJAX tutorial

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

http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html

Notes

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");
}else{
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) {

http.open('get', 'example1service.aspx?number='+thenumber);
http.onreadystatechange = handleResponse;
http.send(null);
}

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

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

onkeyup="sndReq(form.inputtextbox.value)"

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