Sample program to list the author names in the XML file using AJAX.
AJAX Sample Codes

Sample code to list the author names in xml using AJAX

AJAX is a browser based technology to change the contents in a particular portion of a web page without reloads the whole page. AJAX is not a programming language. AJAX is based on browser built in object to change the contents in a web page without reload the whole page.

This tutorial mainly focused on a sample code to explain the working of AJAX in PHP. An XML file that contains book related information. This is an example to show the author names of book specified in the XML file. A button click event is used here to list the author names in the XML using AJAX. Before you proceed check here to see how to populate districts based on state name using AJAX.

Sample code to list the author names in xml using AJAX

This sample program to list the author names in the XML using AJAX. First you need to  create an XML file and save it with extension .xml. The XML file contains the following data as shown below.

books.xml

<?xml version="1.0" encoding="UTF-8"?>

<BOOK>

<COMPTER>

<TITLE>ABCDE</TITLE>

<AUTHOR>Jean</AUTHOR>

<ISBN>12345</ISBN>

<PUBLISHER>Penguin Random House India</PUBLISHER>

<PRICE>1000</PRICE>

<YEAR>2018</YEAR>

</COMPTER>

<COMPTER>

<TITLE>ABCDEFG</TITLE>

<AUTHOR>Steve</AUTHOR>

<ISBN>54123</ISBN>

<PUBLISHER>Rupa Publications</PUBLISHER>

<PRICE>1500</PRICE>

<YEAR>2018</YEAR>

</COMPTER>

<COMPTER>

<TITLE>ABCDEFGHIJ</TITLE>

<AUTHOR>Hennie</AUTHOR>

<ISBN>12354</ISBN>

<PUBLISHER>Jaico Publishing House</PUBLISHER>

<PRICE>2000</PRICE>

<YEAR>2018</YEAR>

</COMPTER>

</BOOK>

Design a PHP page to list the author names in the XML using AJAX as shown below. Sample code to design the PHP page is shown in Ajaxtest2.php.

 

Ajaxtest2.php

<!DOCTYPE html>

<html>

<body>

<h2>List of Book Authors Name</h2>

<button type="button" onclick="booksnames()">

Click Here to List Books Authors Name</button>

<p id="p1"></p>

<script>

function booksnames() {

var obj = new XMLHttpRequest();

obj.open("GET", "books.xml", true);

obj.send();

obj.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

callxmlfile(this);

}

};

}

function callxmlfile(xml) {

var k,z,xmlcontent, result;

xmlcontent = xml.responseXML;

result = "";

z = xmlcontent.getElementsByTagName("AUTHOR");

for (k = 0; k< z.length; k++) {

result += z[k].childNodes[0].nodeValue + "<br>";

}

document.getElementById("p1").innerHTML = result;

}

</script>

</body>

</html>

 

The Ajaxtest2.php page design is shown below

Sample program to list the author names in the XML file using AJAX
Page Design to display author names

In the PHP page a button named “Click Here to List Books Authors Name” is created and when we click on the button it will list all the authors name in the AUTHOR tag in the XML file. The web page contain a button and when the user clicks on the button onclick event is fired.  An event handler is registered to handle the onclick event. The event handler is booksnames()  funtion. This fuction will catch the event and perform the operations to list the author names in the XML file. If you want to list the price, year,publisher name etc change the sample code according to your need.

 

Sample program to list the author names in the XML file using AJAX.
List all the authors name in the AUTHOR tag in the XML file

You can also check how to change the contents of a web page using AJAX by visiting this link :

 

Leave a Reply

Your email address will not be published.