Contents hide 1) AJAX : Asynchronous JavaScript and XML 2) # The XMLHttpRequest Object 3) Main page creation 4) The AJAX Script 5) Fetch On Cursor Hover 6) # Full HTML & JS Code Download AJAX : Asynchronous JavaScript and XML Itβs a combination of javaScript and XML. In this Tutorial, we will see how to read the data from the text file. On the mouse hover, the AJAX read the data from the text file and display on the web page. # The XMLHttpRequest Object To fetch the data from the file to display on the web page we use the XMLHttpRequest Objects. One of the methods of XMLHttpRequest is : XMLHttpRequest.open() The open() method has 2 parameters: -The first parameter having the values POST/GET this depends on our requirement, for this blog the requirement is. -The second parameter is the destination, to where we need to get the request. It may be any file path or URL or URL patterns [ in java ] or whatever. Main page creation Starting with designing the index page in which images and data that should be displayed. index.html <html> <head> <title>AJAX - Fetching Data On Mouse Hover</title> <style type="text/css"> .img { height: 40%; } </style> </head> <body> <h1 style="text-align:center;">Fetching data with Ajax</h1> <form> <img class="img" src="img/Image1.jpg"> <img class="img" src="img/Image2.jpg"> <img class="img" src="img/Image3.jpg"> </form> <h1 style="text-align:center;"> <div id="targetDiv"> <h1>The fetched data will go here.</h1> </div> <h1> </body> </html> The AJAX Script Write AJAX script code that fetches the data from files using XMLHttpRequest in which get() method will retrieve the data from the given file destination. script.js //Declaring Variable var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } // Gets The Data From The Html 'div' tag function getData(dataSource, divID) { if (XMLHttpRequestObject) { var obj = document.getElementById(divID); // Get Method Will Fatch The data From Given dataSource XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { // defines the status : "200" Means 'OK' if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } Fetch On Cursor Hover Now set the data source as we set in the index file i.e. targetDiv Set the file path from which the get() method will fetch the data. index.html <body> <h1 style="text-align:center;">Fetching data with Ajax</h1> <!-- *Setting File Path From Which The Data Is Being Fetch *i.e. "getData('<_FILE-PATH_>', '<_SOURCE_>')" --> <form> <img class="img" src="img/Image1.jpg" onmouseover="getData('data/soup.txt', 'targetDiv')"> <img class="img" src="img/Image2.jpg" onmouseover="getData('data/pizza.txt', 'targetDiv')"> <img class="img" src="img/Image3.jpg" onmouseover="getData('data/sandwiches.txt','targetDiv')"> </form> <h1 style="text-align:center;"> <div id="targetDiv"> <h1>The fetched data will go here.</h1> </div> <h1> </body> Create your own custome data i.e .txt file with appropriate data. # Full HTML & JS Code index.html <html> <head> <title>AJAX - Fetching Data On Mouse Hover</title> <style type="text/css"> .img { height: 40%; } </style> <script> 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 style="text-align:center;">Fetching data with Ajax</h1> <form> <img class="img" src="img/Image1.jpg" onmouseover="getData('data/soup.txt', 'targetDiv')"> <img class="img" src="img/Image2.jpg" onmouseover="getData('data/pizza.txt', 'targetDiv')"> <img class="img" src="img/Image3.jpg" onmouseover="getData('data/sandwiches.txt','targetDiv')"> </form> <h1 style="text-align:center;"> <div id="targetDiv"> <h1>The fetched data will go here.</h1> </div> <h1> </body> </html> DEMO Related Tags: AJAX, css3, html5, JavaScript, xml