ajax on page load

zenithwolf

08-27-2007, 10:17 PM

Hey,

I'm new to Ajax am trying to get ajax to get values from a jsp page when the html loads, but first time the page loads, it gives me an error saying "The data necessary to complete this operation is not yet available" for the xmlHTTPRequest.responseText but when i refresh the page, it loads perfectly! jsp tested and works so the problem resides in my ajax/html file.

EDIT: this reloading thing only works in IE, in mozilla this page doesnt work at all :(

heres my html (i dont know if I am doing this right though) any thoughts welcome and much appreciated:

<html>
<head>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
var optionID;

//generic code (www.w3schools.com)
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest(); }
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
//problem
var url="get.jsp?name=";
xmlHttp.open("GET", url,true);
xmlHttp.send(null);
var getVal = xmlHttp.responseText;
alert(getVal);
document.getElementById("myForm1").innerHTML=getVal;
}

</script>
</head>
<body onLoad="ajaxFunction()">
<table name="mytable" cellspacing="10">
<tr>
<td>
<form name="myForm" id="myForm1">
</form>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>

mcjwb

08-27-2007, 10:48 PM

I guess you missed the bit about the onreadystatechange event handler in the tutorial you were using!

Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var xmlHttp;
function ajaxFunction() {

var optionID;
//generic code (www.w3schools.com (http://www.w3schools.com))
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest(); }
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
//problem
var url="test.xml";
xmlHttp.open("GET", url,true);
xmlHttp.onreadystatechange=handleAjaxResponse;
xmlHttp.send(null);

}
function handleAjaxResponse(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var getVal = xmlHttp.responseText;
alert(getVal);
document.getElementById("myForm1").innerHTML=getVal;
}
}
</script>
</head>
<body onLoad="ajaxFunction()">
<table name="mytable" cellspacing="10">
<tr>
<td>
<form name="myForm" id="myForm1">
</form>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>

zenithwolf

08-27-2007, 11:08 PM

thanks a lot that works!

however, can you explain to me the place (in Ajax) of the onreadystatechange because I don't quite understand why its there and how it works (thats why i thought it worked only when interacting with objects already there as opposed to loading a page)

thanks :)

Basscyst

08-28-2007, 01:53 AM

As the request is being processed, it goes through diffreent states. The onreadystatechange event (logically named) fires each time the request's state changes. The states are as follows:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

When the readystate = 4 and everything went as expected, the status should be 200.

Other codes will be returned if an error occured, such as 404 (page not found), 500 (error on the server side) etc.

Also note that the readystate does not ever change if the request in synchronous in Firefox.

I must ask, if you are doing this upon the load of the page, why use ajax at all? You could just utilize whatever server side language you would use normally and render your page as it loads just like the olden days.

zenithwolf

08-28-2007, 05:30 AM

Im totally new to AJAX (and javascripting) and trying to learn its various techniques, and I can do this other ways too (direct jsp, servlets etc) But I just wanted to do the whole thing in ajax since i have to dynamically render several DOM objects in my html and ajax seems the perfect solution, so i thought might as well experiment...and it works pretty nicely now :)

also last thing, can you give me examples of when the other states (not 4) are fired? because I don't seem to understand why there are 4 more states if they only generate errors (if errors occur)

thx for the replies

rwedge

08-28-2007, 08:05 AM

... can you give me examples of when the other states (not 4) are fired? because I don't seem to understand why there are 4 more states if they only generate errors (if errors occur)
The documentation on readystate (http://msdn2.microsoft.com/en-us/library/ms534361.aspx) at MSDN may help you see what is going on.