Fetching Data On Mouse Hover Using AJAX

on April 24, 2017
πŸ”₯ 8321 views
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

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

AJAX: Fetching Data On Mouse Hover Using AJAX | Geeks Trick

Tags: , , , ,