Ajax
Ajax
AJAX allows web pages to update data asynchronously, which means that only the necessary
parts of the page are updated without the need to reload the entire page. This creates a more
dynamic and interactive user experience, similar to a desktop application. AJAX uses JavaScript,
HTML, and XML to communicate with the server in the background.
1. Asynchronous: AJAX operations do not require waiting for the server's response before
proceeding with other actions. This makes web applications faster and more efficient.
2. XMLHttpRequest Object: The XMLHttpRequest object is central to AJAX
communication, enabling the sending and receiving of data from the server without
refreshing the page.
3. Server Communication: AJAX interacts with a server-side language (like PHP) to fetch
data. This data can be in various formats, such as XML, JSON, or plain text.
4. No Page Reloading: When implementing AJAX, only specific parts of the web page are
updated, without a full page refresh.
In this example, a button click triggers an AJAX call that fetches data from a file ( data.txt) and
displays it on the page without reloading.
<html>
<head>
<title>An Ajax demo</title>
<script language="javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
In this example:
The readyState and status are checked to ensure that the data is successfully fetched
before updating the webpage.
You can also use AJAX with server-side technologies like PHP. In this example, the
index.html file calls a PHP script (datas.php) to fetch data from the server.
<html>
<head>
<title>AJAX with PHP</title>
<script language="javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
<?php
echo "This text was echoed from datas.php with AJAX";
?>
When the button is clicked, the browser sends a request to the datas.php file on the server, and
the result is displayed in the targetDiv without refreshing the page.
In the following example, data is sent to the server using the GET method.
<?php
if ($_REQUEST["data"] == "1") {
echo "Value sent to the server is 1";
}
if ($_REQUEST["data"] == "2") {
echo "Value sent to the server is 2";
}
?>
In this example:
The value (data=1) is passed in the URL when the button is clicked.
The server-side script (choosem.php) reads this data and sends a response, which is
displayed in the targetDiv.
The POST method allows for more secure data transmission as the data is not appended to the
URL. Here's how data can be passed to the server using POST in an AJAX request.
<input type="button" value="Fetch Message 1" onclick="getData('choosem.php',
'targetDiv', 1)">
In this example:
The POST method is used to send data to the server, which is not visible in the URL.
The server (PHP) processes the data and returns a response.
AJAX can also be used to fetch and process XML data. Here's how it works:
function getProducts() {
var XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObject.open("GET", "products.xml", true);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status ==
200) {
var xmlDoc = XMLHttpRequestObject.responseXML;
var products = xmlDoc.getElementsByTagName("item");
listProducts(products);
}
};
XMLHttpRequestObject.send(null);
}
function listProducts(products) {
var selectControl = document.getElementById('productsList');
for (var i = 0; i < products.length; i++) {
selectControl.options[i] = new Option(products[i].firstChild.data);
}
}
In this example, PHP generates XML data dynamically, which is fetched via AJAX.
<?php
header("Content-type: text/xml");
if ($_REQUEST["items"] == "1") {
$items = array('PHP Book', 'Television', 'Radio');
} else {
$items = array('Soda', 'Cheese', 'Salami');
}
In this case:
PHP returns dynamic XML content based on the query string passed (items=1 or
items=2).
JavaScript processes the returned XML data and displays it.