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

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”


Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s