Start learning Ajax: XMLHttpRequest and site structure

In this lesson we will see how to organize our site to use Ajax into our semplified del.icio.us-like application.

Step 1: create XMLhttpRequest file

This is a short definition of XMLhttpRequest form Wikipedia:

XMLHttpRequest (XHR) is an API that can be used by JavaScript, and other web browser scripting languages to transfer XML and other text data to and from a web server using HTTP, by establishing an independent and asynchronous communication channel between a web page's Client-Side and Server-Side.

The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats such as HTML, JSON or plain text.

XMLHttpRequest is an important part of the Ajax web development technique, and it is used by many websites to implement responsive and dynamic web applications.

In our site root we create a new folder AJAX and a file called ajax_framework.js where we will add in the next lessons all the javascript functions to use Ajax functionalities with our site.



Open ajax_framework.js and copy and past this code into the file to enable the XMLhttpReques into our ajax application (this code is standard and work with IE, Safari, and Firefox, on Windows based systems and Mac systems):

/* ---------------------------- */
/* XMLHTTPRequest Enable */
/* ---------------------------- */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

Save and close the file. Now, we are ready to work with some Ajax examples.