gabrielcrowe
23-May-2007, 10:56 AM
AJAX is a javascript based technology, that lets you fetch pages, and use their data in your hosting page, without re-loading them.
In fact, its very much like server side includes, with respect to allowing external content to be included in your pages, but with the added bonus of allowing the included content to be changed when you want it to, and not when the server puts the page together on the server.
So, this is all a little complex, but what does it mean for actinic?
Firstly, it does not require any server side scripting, like php, or asp to make it work. its all client side javascript.
This is also not very good for SEO, since most search engines have no idea what javascript included content looks like and wont see it in your final pages.
For example, you could take the information from the popup, normally associated with a product, and add it inline to the page, when the user clicks a button. And then hide it again, when they click it again. In this example, i'm going to simply include some text.
Here is a javascript function, that we need to trigger an AJAX call.
function ajaxGetPage(pageUrl,divID)
{
var d = new Date();
var time = d.getTime();
pageUrl=pageUrl+'&t='+time;
var xmlHttp;
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;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//alert (xmlHttp.responseText);
if(divID=="dispcontent") {
document.getElementById(divID).innerHTML = xmlHttp.responseText;
}
else {
if(document.getElementById(divID).innerHTML=="") {
document.getElementById(divID).innerHTML = xmlHttp.responseText;
}
else {
document.getElementById(divID).innerHTML = "";
}
}
}
}
xmlHttp.open("GET",pageUrl,true);
xmlHttp.send(null);
}
looks complex, doesnt it?
Its actually more complex than it should be, but only becasue i'v added some clever browser compatibility i found floating around on the web.
notice this part, right at the top of the code: ajaxGetPage(pageUrl,divID)
'ajaxGetPage' is the name of the function. We'll use this later on, to call this block of code.
'pageurl' is the name of the page we want to load date from. This is going to be simple text in this example.
'divID' is the name of the container, that we will insert the code from our fetched page into.
It works like this:
1: the user clicks the link triggering the function above
2: the function uses AJAX to fetch the page we want to fetch.
3: the function inserts the data into the host page without re-loading.
4: the loaded content assumes any styles and colours that the parent page has.
5: the user clicks on the link again, and the data in the container is removed.
Next we need a container to keep our data in once we load it.
<div id="mytarget"></div>
Remember earlier, the 'divID' variable in our function? if the name 'mytarget' is passed into it, then, it will tell our function to load the data into that container. easy huh?
Now, we need to make a link. This link will have some javascript, that causes the function to trigger.
In this simple example, mine looks like this:
<a href="#" onclick="ajaxGetPage('include.htm','mytarget')">click here to toggle</a>
but wait? whats this 'include.htm' you can see in the link? well, thats the data we'll be including. it can be anything you want. it could just as easily be one of your info_000.html files that actinic generates.
Remember, that the included page will be included in your sites html structure. so remember to remove all the body, html and head tagging. sicne the parent page allready has those!
Included is a very simple working example. 2 files. 'parent.html' and 'child.html'. put these in the same folder and load 'parent.html' to see ajax in action.
REMEMBER: THIS IS A SERVER TECHNOLOGY ONLY. it wont work on your desktop. you'll need to upload it to an actual webserver.
hope this has been any help to anyone learning AJAX.
In fact, its very much like server side includes, with respect to allowing external content to be included in your pages, but with the added bonus of allowing the included content to be changed when you want it to, and not when the server puts the page together on the server.
So, this is all a little complex, but what does it mean for actinic?
Firstly, it does not require any server side scripting, like php, or asp to make it work. its all client side javascript.
This is also not very good for SEO, since most search engines have no idea what javascript included content looks like and wont see it in your final pages.
For example, you could take the information from the popup, normally associated with a product, and add it inline to the page, when the user clicks a button. And then hide it again, when they click it again. In this example, i'm going to simply include some text.
Here is a javascript function, that we need to trigger an AJAX call.
function ajaxGetPage(pageUrl,divID)
{
var d = new Date();
var time = d.getTime();
pageUrl=pageUrl+'&t='+time;
var xmlHttp;
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;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//alert (xmlHttp.responseText);
if(divID=="dispcontent") {
document.getElementById(divID).innerHTML = xmlHttp.responseText;
}
else {
if(document.getElementById(divID).innerHTML=="") {
document.getElementById(divID).innerHTML = xmlHttp.responseText;
}
else {
document.getElementById(divID).innerHTML = "";
}
}
}
}
xmlHttp.open("GET",pageUrl,true);
xmlHttp.send(null);
}
looks complex, doesnt it?
Its actually more complex than it should be, but only becasue i'v added some clever browser compatibility i found floating around on the web.
notice this part, right at the top of the code: ajaxGetPage(pageUrl,divID)
'ajaxGetPage' is the name of the function. We'll use this later on, to call this block of code.
'pageurl' is the name of the page we want to load date from. This is going to be simple text in this example.
'divID' is the name of the container, that we will insert the code from our fetched page into.
It works like this:
1: the user clicks the link triggering the function above
2: the function uses AJAX to fetch the page we want to fetch.
3: the function inserts the data into the host page without re-loading.
4: the loaded content assumes any styles and colours that the parent page has.
5: the user clicks on the link again, and the data in the container is removed.
Next we need a container to keep our data in once we load it.
<div id="mytarget"></div>
Remember earlier, the 'divID' variable in our function? if the name 'mytarget' is passed into it, then, it will tell our function to load the data into that container. easy huh?
Now, we need to make a link. This link will have some javascript, that causes the function to trigger.
In this simple example, mine looks like this:
<a href="#" onclick="ajaxGetPage('include.htm','mytarget')">click here to toggle</a>
but wait? whats this 'include.htm' you can see in the link? well, thats the data we'll be including. it can be anything you want. it could just as easily be one of your info_000.html files that actinic generates.
Remember, that the included page will be included in your sites html structure. so remember to remove all the body, html and head tagging. sicne the parent page allready has those!
Included is a very simple working example. 2 files. 'parent.html' and 'child.html'. put these in the same folder and load 'parent.html' to see ajax in action.
REMEMBER: THIS IS A SERVER TECHNOLOGY ONLY. it wont work on your desktop. you'll need to upload it to an actual webserver.
hope this has been any help to anyone learning AJAX.