Scribd
Upload
15 views5 pages

Ajax

AJAX (Asynchronous JavaScript and XML) enables web pages to update data asynchronously, allowing for a more dynamic user experience without full page reloads. It utilizes JavaScript, HTML, and XML to communicate with the server, with key components including the XMLHttpRequest object for data exchange. The document provides multiple examples demonstrating AJAX implementation with HTML, JavaScript, PHP, and handling both GET and POST methods, as well as XML data processing.

Uploaded by

udccssanthiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
15 views5 pages

Ajax

AJAX (Asynchronous JavaScript and XML) enables web pages to update data asynchronously, allowing for a more dynamic user experience without full page reloads. It utilizes JavaScript, HTML, and XML to communicate with the server, with key components including the XMLHttpRequest object for data exchange. The document provides multiple examples demonstrating AJAX implementation with HTML, JavaScript, PHP, and handling both GET and POST methods, as well as XML data processing.

Uploaded by

udccssanthiya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

AJAX (Asynchronous JavaScript and XML)

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.

Key Concepts of AJAX:

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.

Example 1: Basic AJAX with HTML and JavaScript

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");
}

function getData(dataSource, divID) {


if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>An Ajax demo</H1>
<form>
<input type="button" value="Fetch the message"
onclick="getData('data.txt', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched message will appear here.</p>
</div>
</body>
</html>

In this example:

 XMLHttpRequestObject is created based on the browser type.


 When the button is clicked, it triggers the getData function, which fetches data from
data.txt and updates the targetDiv element with the response.

 The readyState and status are checked to ensure that the data is successfully fetched
before updating the webpage.

Example 2: AJAX with PHP

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");
}

function getData(dataSource, divID) {


if(XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<h1>AJAX with PHP</h1>
<form>
<input type="button" value="Fetch the message"
onclick="getData('datas.php', 'targetDiv')">
</form>
<div id="targetDiv">
<p>The fetched message will appear here.</p>
</div>
</body>
</html>

PHP Code (datas.php):

<?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.

Example 3: Passing Data to Server Using GET

In the following example, data is sent to the server using the GET method.

<input type="button" value="Fetch Message 1" onclick="getData('choosem.php?


data=1', 'targetDiv')">

PHP Code (choosem.php):

<?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.

Example 4: Handling Data with POST Method

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)">

JavaScript (Modified for POST):

function getData(dataSource, divID, data) {


if (XMLHttpRequestObject) {
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-
form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status
== 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send("data=" + data);
}
}

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.

Example 5: Handling XML Data with AJAX

AJAX can also be used to fetch and process XML data. Here's how it works:

<select id="productsList" onchange="setproducts()">


<option>Select an item</option>
</select>
<input type="button" value="Fetch products" onclick="getProducts()">

JavaScript (AJAX with XML):

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);
}
}

Example 6: Handling XML Data with PHP

In this example, PHP generates XML data dynamically, which is fetched via AJAX.

PHP Code (products.php):

<?php
header("Content-type: text/xml");

if ($_REQUEST["items"] == "1") {
$items = array('PHP Book', 'Television', 'Radio');
} else {
$items = array('Soda', 'Cheese', 'Salami');
}

echo '<?xml version="1.0" ?>';


echo '<items>';
foreach ($items as $item) {
echo '<item>' . $item . '</item>';
}
echo '</items>';
?>

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.

You might also like