JS HTTP XML Requests

[iGuest 3]

Alright. This script, when complete, will use javascript to request the contents of a page on any server, then update the current page, placing the new content into a div somewhere on the page. With a little modification, you can use it for your sites, provided that your site is not very complicated. If you want me to help you implement this on your site, or would like me to do it, PM me.

 

You can view a demo of the technology at http://codefx.titaniumhosting.com/jstest/index.php I spent very little time on the graphics and content, so it won't look very pretty, but you can see the script in action. Right now it's down, but it should be back up soon. I believe it should work, but I'll have to verify that once it goes back.

 

scripts.js:

var xmlhttp=false;/*@cc_on @*//*@if (@_jscript_version >= 5)// JScript gives us Conditional compilation, we can cope with old IE versions.// and security blocked creation of the objects.	try {  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");	} catch (e) {  try {  	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  } catch (E) {  	xmlhttp = false;  }	}@end @*/if (!xmlhttp && typeof XMLHttpRequest!='undefined') {	xmlhttp = new XMLHttpRequest();}function loadpage(fragment_url, element_id) {	var element = document.getElementById(element_id);	element.innerHTML = '<em>Loading ...</em>';	xmlhttp.open("GET", fragment_url);	xmlhttp.onreadystatechange = function() {  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  	element.innerHTML = xmlhttp.responseText;  }    	}	xmlhttp.send(null);}

That was the only important part. The rest is site-specific.

 

To implement this, you'll have to make two things different from a normal site.

1. You'll have to have a container of some sort with a unique id attirbute. This will be where new page are loaded into, so make it fairly big. A table cell will work, but the msot effective element for this is a div. You can set its scrolling method to auto using CSS, which will allow the content to overflow without causing problems for your layout.

2. For EVERY SINGLE LINK that you want to load into the element, you'll have to change its format:

The normal style for a link is as follows:

<a href="somepage.html">Click</a>

The correct suntax for the new style is: (This applies to the example)

<a href="javascript: loadpage('somepage.html','div_id_here');">Click</a>

Notes:

1. You need to replace the div_id_here part of the link to the id you have given your container.

2. For this script to be compatable with Mozilla/Firefox/Netscape, EVERY URL must be a relative one!!! This is because these browsers are mroe secure and will not allow you to perform this action to get a page from a difference domain. This includes simply adding a "www." where there is not one in the path. If you truly want to link to another page, you'll have to get your version of the script signed. Click here for more information on that.

3. I have not yet figured out a way to pass form data along through the request. This may or may not be possible. I'll get back to you on that.

 

 

Any other questions you can psot in here. Again, if you want help implementing it, PM me.

 

 

If you use this, I would greeatly appreciate it if you would link back to my site, http://codefx.titaniumhosting.com/. Thanks. My button is in one of the blocks.

[iGuest 3]

I dont understand...does this script make it show 'loading' while the page loads... or is that something else?

[iGuest 3]

No, go see the demo!