AJAX for Beginners
Now that you know what is AJAX, lets get started.
Once you have identified a page in your website that you would like to
use AJAX with you will have to create an instance of the XMLHttpRequest object.
<script language="javascript" type="text/javascript">
var objHttp = new ActiveXObject("Microsoft.XMLHttp");
</script>
The code segment above creates a new instance of the HttpRequest object, keep in
mind this example only works for Internet Explorer, later on we will discuss making
this work on other browsers.
The next step in this AJAX tutorial is to write the code that will make the request from the web page to the
server to pull down some content.
The first step is to publish some content on the server to retrieve using AJAX.
There is a simple text file on the server to show you at the most basic level
how you can use AJAX to get content.
Take a quick look at the contents of the file on the server:
http://what-is-ajax.com/ajax-listeners/beginners/simple_content.txt
Notice it was just some text with html in it.
The code to retrieve the content from the server realtime in a web
page utilizing AJAX is as follows:
<script language="javascript" type="text/javascript">
var objHttp = new ActiveXObject("Microsoft.XMLHttp");
objHttp.open("GET","http://what-is-ajax.com/ajax-listeners/beginners/simple_content.txt");
objHttp.send();
var content;
content = objHttp.responseXML;
alert(content);
</script>
The example above will only work in internet explorer but we can easily fix that.
Below is a javascript function that will make the example work for both Internet
Explorer and FireFox.
<script language="javascript" type="text/javascript">
function CreateXmlHttpRequest()
{
var xmlHttp;
if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var objHttp;
objHttp = CreateXmlHttpRequest();
objHttp.open("GET","http://what-is-ajax.com/ajax-listeners/beginners/simple_content.txt");
objHttp.send();
var content;
content = objHttp.responseXML;
alert(content);
</script>
The AJAX tutorial above has demonstrated the basic premise of what is AJAX. At its most basic level, it
is the ability to retrieve data from a remote server to the client web browser with
out the browser refreshing the page itself.
From what was demonstarted above, imagine the
different ways you could make this much more functional. There could be a page up
on the web server that is called from client-side javascript code to manipulate
data in a database.
Also notice that no other javascript code will run while objHttp.send()
is executing. This is called a synchronous request, meaning that the execution of
the code is synchronized or linear, each line of code executes after the last line
finishes.
The more efficient way, is to issue an asynchronous request. An asynchronous
request will allow other code to execute at the same time that objHttp.send() is processing. When
using this type of request you will want to assign an event handler that executes
when the state of the XmlHttpRequest object changes.
Ah yes, this is where the "Asynchronous Javascript" piece of the acronym AJAX comes
from.
Let's give this a try...
<script language="javascript" type="text/javascript">
function CreateXmlHttpRequest()
{
var xmlHttp;
if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function stateChangeHandler()
{
alert("test");
}
var objHttp;
objHttp = CreateXmlHttpRequest();
objHttp.open("GET","http://what-is-ajax.com/ajax-listeners/beginners/simple_content.txt",true);
objHttp.send();
objHttp.onreadystatechange = stateChangeHandler;
var content;
content = objHttp.responseXML;
alert(content);
</script>
STILL UNDER CONSTRUCTION - CHECK BACK LATER THIS WEEK