AJAX Question

[Kevin M]

In an AJAX script, is the following line required?

xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="gethint.asp";url=url+"?q="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}

The only in bold. I'm making a script that changes page content without making the user have to go to a whole new page. But there's at least 5 PHP pages with content that will be switching involved. I don't even know if I need a link there, but if I do, would this script require it's own PHP server page to go along with it too?Thanks,Kevin

[aspnetguy]

To tell you the truth I have always used a different page for AJAX requests just to keep things simple and seperated. However I would imagine that you could use hte same page you are on as long as there was something identifiable about the AJAX request that you could catch and do some different processing. It would require you to surpress all other HTML output and only output the results of the AJAX request.So to answer your question no you shouldn't need the bolded part as long as you are processing your request with the currently loaded page.

[Kevin M]

Ok, thanks! What I'm planning to do is have all of the layout stuff on the Index.php page, with the index content in a div called <div id="content">. The other pages will only have content in them. Then when a user clicks a link, it gets rid of the content in the div, and then adds in the content of the linked page once the request is done.Do you really think it's worth doing? If my coding is all valid CSS/XHTML, and most of the images are contained in the CSS too, would the page load fast enough because the style sheet would become cached?

[aspnetguy]

Well if you are just loading the content div then yes it would be faster than reloading everything in a new page.One thing you need to consider is how will your users bookmark your pages? Also what about JS disabled users? If these are not a concern for you then I say go for it.

[Kevin M]

I've seen it done on a site where the URL in the status bar changes when a link is clicked, but the page content changes. I'm going to research this further, and hopefully come up with something. For users without Java Script, I'm probably going to figure out a way to display a message (would the <noscript> tags work?) saying nicely that they do not have Java Script enabled. Then I would link to the "text only" version, which would be similar, just without the Java Script stuff. I would also set up a page that would give instructions on how to enable Java Script in different browsers. If there's any other suggestions on things I could do, please suggest I'm always open for them.EDIT: Yay 100 posts.

[jesh]

If there's any other suggestions on things I could do, please suggest I'm always open for them.

You could set up your links something like this:

<a href="page2.html" onclick="loadContent('page2.html'); return false;">Go to page 2!</a>

This way, if javascript is enabled on the browser, the loadContent function would run - this could be your AJAX loader code - and the "return false" will prevent the link from directing the users to page2. However, if javascript were disabled, the onclick would never fire and the page would simply go to page2.EDIT: To save some hassle, you could set up your links like this:

<a href="page2.html" onclick="loadContent(this.href); return false;">Go to page 2!</a>

[Kevin M]

Thanks. I'm slowly getting a good idea on how to get this working. I did get it working for a few minutes, but I had to add in that line that I wanted to omit from above, and put in the URL of the page that I wanted to change too. The code was very buggy though, and it didn't do exactly what I was planning on. Hopefully I'll get it fixed. If you look at this page: (Link) and click the about link then see that the page content chages. It messes a few things up a bit, but I'm sure it's nothing that can't be fixed. My one problem that I can't figure out a good way to fix is this though:In the code, for it to sort of work properly, I need this:

var xmlHttpfunction changePage(str){if (str.length==0)  {   document.getElementById("content").innerHTML="";  return;  }xmlHttp=GetXmlHttpObject()if (xmlHttp==null)  {  alert ("Your browser does not support AJAX!");  return;  }var url="about.php"; url=url+"?q="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);} function stateChanged() { if (xmlHttp.readyState==4){ document.getElementById("content").innerHTML=xmlHttp.responseText;}}function GetXmlHttpObject(){var xmlHttp=null;try  {  // Firefox, Opera 8.0+, Safari  xmlHttp=new XMLHttpRequest();  }catch (e)  {  // Internet Explorer  try    {    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");    }  catch (e)    {    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");    }  }return xmlHttp;}

Thanks.

[jesh]

So does anyone know of a way that I could have it set so that as long as I included the function into each link with the onclick() function, it wouldn't matter what page I was trying to change it too, it would just do it automatically?

What is "str" for? Try passing the page href into the function:

function changePage(page, str){	if (str.length==0)	{		document.getElementById("content").innerHTML="";		return;	}	xmlHttp=GetXmlHttpObject()	if (xmlHttp==null)	{		alert ("Your browser does not support AJAX!");		return;	}	// Rather than set this to a specific page, set it to the page that is	// passed in the parameters of the function:	var url = page;	url=url+"?q="+str;	url=url+"&sid="+Math.random();	xmlHttp.onreadystatechange=stateChanged;	xmlHttp.open("GET",url,true);	xmlHttp.send(null);}

Then call it on the page like this:

<a href="about.php" onclick="changePage(this.href, '???????'); return false;">About</a>