- AJAX Overview
AJAX stands for Asynchronous Javascript And XML which is based on the Javascript and HTTP Requests.moreover its a new way of technology to use existing standards since its not a programming language.it can be used to creating better, faster, and more interactive web applications.
we can using JavaScript to communicate directly with the server by using Ajax with the XMLHttpRequest object. it helps to accessing the web server without reloading the page.AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server that allowing web pages to request small bits of information from the server instead of whole pages.
AJAX based on the Following
- AJAX Provide better Internet-applications
Normally, Website applications are using more than the desktop applications; they can reach a much more audience, they are easier to handling, and easier to develop. However, Internet-applications are not always as "rich" and user-friendly as desktop applications. we can using AJAX to provide Internet applications with richer and more user-friendly.
- How AJAX is Working?
Ajax working as a programming model with display and events. These events are user actions, they call functions associated to elements of the web page.
To read and retrieve the contents from the server, XMLHttpRequest provides two methods:
- open: create a connection.
- send: send a request to the server.
Server Provided the Data by using attributes of XMLHTTPRequest objects as:
- responseXml for an XML file or
- responseText for a plain text.
along the time of processing the data, the state of data is given by the readyState attribute of XMLHttpRequest.those ready states are as follows,
- 0: not initialized.
- 1: connection established.
- 2: request received.
- 3: answer in process.
- 4: finished.
- AJAX with DHTML
-
Dynamic HTML contains the following
DHTML can be used to change the page display according to the user commands or user text. Ajax allows also to send requests asynchronously and load data from the server.
- The XMLHttpRequest object
the following Objects are used by AJAX to interact with the Server
Attributes
- readyState -the code successively changes value from 0 to 4 that means for "ready".
- status -200 : ok, 404 : page not found
- responseText -holds loaded data as a string of characters.
- responseXml -holds an XML loaded file, DOM's method allows to extract data.
- onreadystatechange property that takes a function as value that is invoked when the readystatechange event is dispatched.
Methods
- open(mode, url, boolean) here mode: GET or POST url: the location of the file, with a path. boolean: true (asynchronous) / false (synchronous).
- send("string") null for a GET command.
- Performing a request Step1: Create instance
use the following code snippets that denotes Instance of the Class, and two options for browser compatibility,
-
if (window.XMLHttpRequest) // Object of the current windows
{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else
if (window.ActiveXObject) // ActiveX version
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
-
- Step2: wait for the Response
The response of the server will be assigned to the onreadystatechange attribute of the object previously created.
-
xhr.onreadystatechange = function()
if (xhr.readyState == 4)
{
// Received, OK
} else
{
// Wait...
}
- Step3: Perform a Request
Two methods of XMLHttpRequest are used:
- open: GET or POST
- send: with POST only, the data to send to the server.
-
xhr.open('GET', 'http://www.xul.fr/somefile.xml', true);
xhr.send(null);
-
- Examples
Get a Text
-
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open(GET, "data.txt", true);
xhr.send(null);
}
</script>
</head>
<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>
-
Get a XML
To get data from an XML file, we have just to replace the code as:
-
var doc = xhr.responseXML; // Assign the XML file to a var
var element = doc.getElementsByTagName('root').item(0); // Read the first element
document.ajax.dyn.value= element.firstChild.data; // Assign the content to the form
-
Write on Body
the text read is put into the body of the page
-
document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;
-
Post a Text
a text is sent to the server and is written into a file.
-
xhr.open("POST", "ajax-post-text.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
- Using an external file
here,we can include a JavaScript file and calling a function using following code,
-
<script src="ajax.js" type="text/javascript"></script>
var xhr = createXHR();
-
- Disadvantages
- Ajax will not works when a JavaScript is not activated, . The user must be asked to set JavaScript from within options of the browser, with the "noscript" tag.
- Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not viewed by search engines.
- The asynchronous mode may change the page with delays (when the processing on the server take some times), this may be disturbing.
- The back button may be deactivated (this is not the case in examples provided here). This may be overcomed.