Free as Freedom, not Free as Free Pizza!” />

-

Udruženje Informatičara BiH - Cross-platform and Portable Development With PHP, LAMP/WAMP development, AJAX and Javascript, ASP, dot NET, C sharp, C++, C, VB, Oracle, tutorials and tips...
Free as Freedom, not Free as Free Pizza!


 
Web http://www.uibih.co.nr

Add to Google

Friday, October 06, 2006

5 minutes AJAX Tutorial

Today I will talk a little bit about AJAX, you all have heard about new applications using AJAX technology, so what is AJAX:
AJAX or Asynchronous JavaScript and XML is a term describing a web development technique for creating interactive web applications using a combination of: * HTML (or XHTML) and Cascading Style Sheets for presenting information* Document Object Model, JavaScript to dynamically display and interact with the information presented* XML, XSLT and the XMLHttpRequest object to interchange and manipulate data asynchronously with the web server (although AJAX applications can use other technologies ... -- from en.wikipedia.org/wiki/AJAX
In a simple language, we are using server side technologies without refreshing the page, by the power of JavaScript and XML we connect to the server execute scripts then return the result to the browser.
Now we will leave the talk and see the script.
function createRequestObject(){
var request_;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_ = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_ = new XMLHttpRequest();
}
return request_;
}


We will create a function "createRequestObject()" which will initialize the Http Request and return it as an object, if you know JavaScript you will understand how we are creating a JavaScript function, after that we are creating a variable "request_" to hold the request object. Next we need the browser type which navigates our web page, we create a variable "browser" and put the type in it. In the IF Statement we check first if it is a Microsoft Internet Explorer (IE), if yes we use an ActiveXObject object and put it in our object container we created before, if not then we use the XMLHttpRequest object, which is normally Firefox and other browsers. Now when we have the object we return it.


var http = new Array();
function getInfo(){
var curDateTime = new Date();
http[curDateTime] = createRequestObject();
http[curDateTime].open('get', 'our_server_side_file.php');
http[curDateTime].onreadystatechange = function()
{
if (http[curDateTime].readyState == 4)
{
if (http[curDateTime].status == 200 || http[curDateTime].status == 304)
{
var response = http[curDateTime].responseText;
document.getElementById('our_div').innerHTML = response;
}
}
}
http[curDateTime].send(null);
}


After writing the Http Object function, we will use it now. We create an Array "http" to hold the object returned by the function, now we write a function "getInfo()" which will call the request every time we call it. In the function "getInfo()", we define a variable "curDateTime" and we put in it the current time/date, we call the element "curDateTime" of the array http, and put in it the object returned by "createRequestObject()". Now "http" Array is an object, we call the function open and by get method we call our PHP file script. Now when the script is executed on the server side, we open an unnamed function (internal) and receive the data from the script if any, after checking the AJAX status (4,200,304) which means ok --Google the net for more meaning--, we write a variable "response" which receives in it self the response from the server in HTML. To show the data in our page, we call a HTML tag by its ID and put in it the retrieved HTML code from the server, by using document.getElementById('our_div').innerHTML.
Finally we close our connection by send(null).

This is the JavaScript needed for AJAX, in HTML we need a div with an ID we call here, on the server side we need a PHP or a server side script.

I hope this 5 minutes course will put you on the track to start making your own AJAX scripts, in this script you will note that I used the time/date to give every object a unique element to prevent the objects conflict in Firefox browsers, a very popular bug.
"visitor uncaught exception: [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 ..."