Home > Compting > Ajax – How to comunicate with a server with reloading

Ajax – How to comunicate with a server with reloading

February 2nd, 2009 Leave a comment Go to comments

Ajax (as I understand it) basically means you can use javascript to request a webpage without haveing to reload the one the javascript is on. You can then use the script to process the repponce from the server, for example by setting the innerHTML of an object in the page to the responce.

In order for it to work you will need a number of different functions. It was uses somthing called an xmlHTTPRequest object. This is what is used to process the actual request. Not all browsers support it and they all treat it slightly diffrently so unfortunatley you have to use a squence of ifs to set it up.

The code to do this is below:

function hehe(bit, meth, parameters)
{
alert(“heheness”);
if (window.XMLHttpRequest)
{// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{

//this is where some of the code were going to look at later goes

}
else
{
alert(“Your browser does not support XMLHTTP.”);
}

Now we also need a function that is to be called when the xmlhttp does something which im going to call statChanged. This is where we put the processing for the responce of the server and where we can display a loading message or whatever.

The xmlhttp objext contains a variable called readystate that can be one of the numbers from 1 to 4 and shows what stage the request is at. I genrally only use states 1 and 4 because one shows the process has started so allows me to display a loading message and 4 shows the request has completed and allows us to process the responce. These are again determined by if statements.

The servers respionce can be accessed by calling xmlhttp.responseText where xmlhttp is the name of the object. So the final code is: (where add is the url to be requested, meth is the method to use(POST or GET) and parameters are any parameters to be sent like form data)

function ajaxcall(add, meth, parameters)
{

if (window.XMLHttpRequest)
{// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
if (xmlhttp!=null)
{

xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(meth,bit,true);
if(parameters != null)
{
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
}
xmlhttp.send(parameters);

}
else
{
alert(“Your browser does not support XMLHTTP.”);
}
}

function stateChanged()
{
//alert(“hohoho” + xmlhttp.readyState);
if(xmlhttp.readyState==4)
{
//processing of responcee text
}
if(xmlhttp.readyState==1)
{
//loading process started
}

}

Categories: Compting Tags: , , ,


Get Involved: Ask a question or make a comment

Use Existing Account

Password

Without Registering

Question Comment

Comments Left

  1. No comments yet.
  1. No trackbacks yet.