Having some troubles grasping what AJAX is.

[Toadums]

Hi...so I have looked at a few tutorials...but I am still kinda new to this stuff and cant really soak it up too well.

So I get that AJAX is a way to do client side stuff on server side (or vice versa)...but I am not sure exactly whats ajax and what isnt...for example if i do this:

document.location="REItimesheet.php?projID=" + projid;

...is that ajax or just JS?

then on the next page or wat ever I could run a query based on those results.

So what I am trying to do is run a query (to get project information) when a select box is changed...which is easy...I set the onchange to call the JS function.

In the function (so far) I have ... note, the query infomation isnt in there yet...i am not sure where that goes...on a seperate page maybe?

function ProjectUpdate(){

var projid = document.form1.ProjectID.value;
var dates = document.form1.Date.value;
var hours = document.form1.Hours.value;
var phase = document.form1.Phase.value;
var descr = document.form1.Description.value;
var type = document.form1.Type.value;
var client = document.form1.Client.value;

document.location="REItimesheet.php?projID=" + projid;

document.form1.Date.value =  dates;
document.form1.Hours.value = hours;
document.form1.Phase.value = phase;
document.form1.Description.value = descr;
document.form1.Type.value = type;

document.form1.ProjectID.value = projid;

/*still working on this part
document.form1.ProjectName.value = ;
document.form1.Client.value = ;
*/

}

The reason it looks like that is when I do the document.location thingy, it clears the form...so I thought I would try to save the values (date = document.form1.date.value stuff) then put them back in after the document.location is done...but that doesnt work 😛

Any ideas on how I do what I am trying to? (dont just say use ajax please 😛)

thanks!
Paul

[NogDog]

AJAX is just a catchy name for having JavaScript send a HTTP request, wait for a response, and then do something with that response. This is done via the JavaScript XMLHttpRequest() object.

document.location() will actually load a new page in the browser. The XMLHttpRequest(), on the other hand, will access a URL, but by itself it does not reload the page nor change what is displayed there. However, when it receives a successful response, you can use what is returned by the server-side URL that was requested to alter what is displayed on the page (e.g. the options in a select list, the value of an input element, etc.).

[Toadums]

So what this means is this:

I have a page which looks something like this:

Outline (header, links)

then a page which is included (shows a table which displays results based on which one of the links was selected)

then the INPUT FORM which I am adding to THIS page (currently on a seperate page).

but it sucks...when I run the query on the form...the page refreshes and the include and form both disapear.

So I could run a query based on a result in the INPUT FORM with out refreshing the whole page??

I will google this up, i thought it would be a lot more involved than that 😛 like it would be a lot more to learn
thanks!

[Toadums]

eh..why cant I edit...lol

anyways -

Ok, so I bought a book today (on css, dhtml and ajax...mainly for the css/ajax, dhtml sounded interesting too tho)...anyways, I am working through the basics chapter of AJAX, and see what you mean...the only real different is that XMLHTTPrequest method. There are a few things that I am not understanding with it tho. Here is the ajax related code from one of the examples:

<script type="text/javascript">

function fetchData(url,objectID){
	var pageRequest = false
	if (window.XMLHttpRequest) {
		pageRequest = new XMLHttpRequest()
	}
	else if (window.ActiveXObject){ 
		try {
			pageRequest = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e) {
			try{
				pageRequest = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e){}
		}
	}
	else return false
	pageRequest.onreadystatechange=function() {	
		var object = document.getElementById(objectID);
		object.innerHTML = pageRequest.responseText;
	}
		pageRequest.open('GET',url,true)
		pageRequest.send(null)	
}

</script>
</head>
<body>
<div id="control" onclick="fetchData('dataPage.php?value=paul','message')"> Click Me! </div>
<div id="message">&nbsp;</div>

So what I am having troubles understanding is the following 3 parts.

1: pageRequest.onreadystatechange=function() { - I understand that this is an event handler...but I cant figure out when it is 'activated..?'

2: object.innerHTML = pageRequest.responseText; - is this just setting the (div in this case) text to what ever text was on the requested page? (the other page is made up of one line...currently <?php echo $_GET['value'];?> ... what if I wanted to run a query on the requested page and I wanted the RESULTS of the query to be inserted into a FORM on the page (which uses the AJAX)

3: how is it that this line: pageRequest.open('GET',url,true) happens right at the bottom...it seems to me that it should be the first thing that happens...

I guess I can see the code I am just having troubles figuring out how it all fits together...because it all works...im just not sure how!

Thanks for the help!

[jumpdesign]

Hi

I always break my AJAX down into 3 areas.

1) A function for the GetXmlHttpObject()
2) A function which POST/GET's the data to/from a PHP script
3) A function which detects the onreadystatechange event

So, at the top of my script I would have the following:

function GetXmlHttpObject(handler) { 
	var objXmlHttp=null;

if (window.ActiveXObject)   // ActiveX version
{
	try
	{ 
		objXmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		objXmlHttp.onreadystatechange=handler;
		return objXmlHttp;
	} 
	catch(e)
	{ 
		alert("Error. Scripting for ActiveX might be disabled");
		return;
	} 
} 
else if (window.XMLHttpRequest)     // Object of the current windows
{ 
	objXmlHttp=new XMLHttpRequest();
	objXmlHttp.onload=handler;
	objXmlHttp.onerror=handler;
	return objXmlHttp;
}
}

Then I create my AJAX function. Below is a very simple example of posting values to a PHP script called myphpscript.php:

function myFunction(value1, value2, value3) {
	var url		=	"/includes/ajaxfunctions/myphpscript.php";
	var info	=	"vala="+value1+"&valb="+value2+"&valc="+value3;
	xmlHttp		=	GetXmlHttpObject(myFunctionDone);
	xmlHttp.open("POST", url , true);

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", info.length);
xmlHttp.setRequestHeader("Connection", "close");

xmlHttp.send(info);
}

And then you need to detect the response and act upon it:

function myFunctionDone() {
	if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") { 
		document.getElementById('ajax-container').innerHTML	=	"Loading...";
	}

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
	if (xmlHttp.responseText == 'yes') {
		displaySomethingElse();
	}
}
}

WItihin that last function you will see that the innherHTML of the DIV 'ajax-container' will be set to say 'loading...' until the response from thr PHP code is complete and withint the PHP script, I echo the word 'yes'. When the AJAX detects this, it moves onto readystate = 4 and I then run another function which possibly loads a script which displays data.

I hope that helps.

[Toadums]

Ok, I think I get the first part now. I just still dont understand how the second 2 interact with eachother.

so xmlHttp = GetXmlHttpObject(myFunctionDone);

what THIS is doing is... is setting objXmlHttp's onreadystatechange to the third part..right? so xmlHttp will have a value of: (if in firefox/safari)

 
objXmlHttp.onload= function myFunctionDone() {
	if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") { 
		document.getElementById('ajax-container').innerHTML	=	"Loading...";
	}

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
	if (xmlHttp.responseText == 'yes') {
		displaySomethingElse();
	}
}
}
		objXmlHttp.onerror=function myFunctionDone() {
	if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") { 
		document.getElementById('ajax-container').innerHTML	=	"Loading...";
	}

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
	if (xmlHttp.responseText == 'yes') {
		displaySomethingElse();
	}
}
}

?

and then so with this, you are making a call to the php document to send "vala="+value1+"&valb="+value2+"&valc="+value3;

so what exactly is php going to do with this?

Would/could you have a line in your php code that says if($_POST['vala'] == 'what ever value1 is'){
do something;
}

is that right?

Also, I am not understanding what the setRequestHeader does...i read that it looks like setREquestHeader(<label>,<text>) ... but what are those..are they headers for your values? Wat will the php page look like after the send?

Thanks for the help! I think I almost have it...might just have to play around with it, to start to really understand it!

[Toadums]

Ok...once again cant edit >.> thats silly.

BUT I figured something out. I opened up "dataPage.php" (which is the one that AJAX opens - with xmlHttp.open("POST", url , true); )

and in dataPage.php I wrote

 <?php if($_POST['vala'] = "1one" ){
	echo "workssssss";
}
?>

So that works!

but now how do I get the results of dataPage.php back to the main page that has the ajax in it? Do i have to put AJAX code into dataPage.php?? or is it some more AJAX in the main page?

[jumpdesign]

The AJAX function myFunctionDone() is the one that detects the statuslets say of your PHP file. I.e. while it is loading/executing etc.

In your PHP file you have the string 'workssss' echoed. So if you use that as an example, within myFunctionDone you would then have this:

if (xmlHttp.responseText == 'workssss') {
 displaySomethingElse();
}

The displaySomethingElse() function could be another AJAX function which loads a PHP script which inturn displays your HTML content.

I wuld definatley go back to basics and look at some of the tutorials that W3Schools has listed as they helped me out loads when I started dabbling with AJAX.

Hope that helps

[Toadums]

jumpdesign;10919509 wrote:

The AJAX function myFunctionDone() is the one that detects the statuslets say of your PHP file. I.e. while it is loading/executing etc.

Oh! This clears atleast all the ambiguity surounding that function up 😛

more tutorials!! lol (ive already done 3 😛)

thanks!