Using AJAX with XML is a common technique to fetch and manipulate XML data from the server asynchronously, without the need to reload the entire page. You can use JavaScript and XMLHttpRequest (or Fetch API) to make AJAX requests to a server-side script (e.g., PHP) that generates XML data. The client-side JavaScript can then process the received XML data and update the web page accordingly.

Here's an example of how to use AJAX with XML:

1. Client-Side (JavaScript):

- Write JavaScript code to handle the AJAX request and process the received XML data.

Html

<!-- HTML file with a button to trigger the AJAX request -->
<button onclick="getData()">Get Data</button>
<div id="result"></div>

<script>
function getData() {
    // Create a new XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Configure the AJAX request
    xhr.open('GET', 'get_data.php', true);

    // Define the callback function when the request is complete
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            // Parse the XML data received from the server
            var xmlData = xhr.responseXML;
            // Process the XML data and update the web page
            var items = xmlData.getElementsByTagName('item');
            var output = "";
            for (var i = 0; i < items.length; i++) {
                var name = items[i].getAttribute('name');
                var price = items[i].getAttribute('price');
                output += "<p>" + name + ": $" + price + "</p>";
            }
            document.getElementById('result').innerHTML = output;
        }
    };

    // Send the request
    xhr.send();
}
</script>

2. Server-Side (PHP):

- Create a PHP script (`get_data.php`) to generate XML data and send it as a response to the AJAX request.

php
// get_data.php (PHP script to generate XML data and send it as a response)
<?php
    // Set the response header to indicate XML data
    header('Content-Type: application/xml');

    // Generate some sample XML data
    $xmlString = '<?xml version="1.0" encoding="UTF-8"?>
    <root>
        <item name="Item 1" price="10.99"/>
        <item name="Item 2" price="5.99"/>
    </root>';

    // Output the XML data
    echo $xmlString;
?>

In this example, when the "Get Data" button is clicked, the JavaScript function `getData()` initiates an AJAX request to the `get_data.php` script. The PHP script generates sample XML data and sends it back as an XML response. The client-side JavaScript processes the received XML data and updates the web page with the information extracted from the XML.

Please note that in a real-world scenario, the PHP script (`get_data.php`) would typically interact with a database or external API to fetch real data and generate XML dynamically. Using AJAX with XML enables you to retrieve and process XML data from the server, making your web applications more dynamic and responsive.

About the Author

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc