How to get response data from ajax call


dailyaspirants.com


In this tutorial how to get response data from ajax call in Post method. Ajax is not a programming language.


what is Ajax ?

Ajax is a Asynchronous JavaScript and Xml .Ajax is the sever controls add script and page excuted and processed by the browser and cross platform speed up the response time.

Ajax is the server controls method and handles with them and asp.net having event handlers for  ajax server controls .
and in this tutroial to get a data from post methods and display data using mouseover event . 

  • A browser built-in XMLHttpRequest object (to request data from a web server).
  • JavaScript and HTML DOM (to display or use the data).


AJAX allows web pages to be updated asynchronously by exchanging data with a web server update  of a web page, without reloading the whole page.

Create an XMLHttpRequest Object:-


variable = new XMLHttpRequest();

var req = new XMLHttpRequest();


Send a Request To a Server Method:-

req.open("POST ",url, true);

req.send(); 


status 200: "OK"

403: "Forbidden"

404: "Page not found"

When readyState is 4 and status is 200, the response is ready.


Ajax.html

<html>

<head>
    <title>Ajax demo</title>
    <style type="text/css">
        .box{
        margin-top:50px;
        width:960px;
        border: 1px solid lightblue; 
        border-radius: 5px;
        padding:10px;
        }
        #contentArea{font-family: monospace; font-size: 16px;font-weight: 400;}
        .container-fluid{margin-top:40px !important;}
    </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="application/javascript">
        var req;
        function getContent(url)
        {
           if(window.ActiveXObject)
               {
                   req= new ActiveXObject("Microsoft.XMLHTTP");
               }
               else if(window.XMLHttpRequest)
                   {
                       req=new XMLHttpRequest();
                   }
                req.onreadystatechange= displayProfile;
                req.open('POST',url,true);
                req.send(null);
        }
        function displayProfile()
        {
            if(req.readyState==4)
            {
            document.getElementById('contentArea').innerHTML=req.responseText;    
            }
            
        }
        function clearContent(){
            document.getElementById('contentArea').innerHTML="";
            
            
        }
    </script>
        
 </head>
    <body>
        <div class="container-fluid">
    <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">MouseOver Image Information:</h3>
        </div>
        <div class="panel-body">
            
    <img src="img/1.jpg" width="200px" height="200px" onmouseover='getContent("dhoni1.html")' onmouseout="clearContent()"/>
    <img src="img/2.jpg" width="200px" height="200px" onmouseover="getContent('dhoni2.html')" onmouseout="clearContent()"/>
    <img src="img/3.jpg" width="200px" height="200px" onmouseover="getContent('dhoni3.html')" onmouseout="clearContent()"/>
    <img src="img/4.jpg" width="200px" height="200px" onmouseover="getContent('dhoni4.html')" onmouseout="clearContent()"/> </div></div>
    <div class="box" id="contentArea"></div>
        </div>
       
        <!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    </body>
</html>


dhoni1.html


<html>
<body>
<b>Full name:</b>MS Dhoni<br/><br/>
<b>Born :</b>Ranchi, Bihar (now Jharkhand)<br/><br/>
<b>Height:</b>5 ft 11 in (180 cm)<br/><br/>
<b>AGE:</b>39 years<br/>
<b>Role:</b>WK-Batsman
    <b>Batting Style:</b> Right Handed <br/>
    <b>BatBowling Style</b>Right-arm medium<br/>
    <b>Movies:</b>M.S. Dhoni: The Untold Story (2016 movie)<br/>
    
</body>
</html>

dailyaspirants.com



dhoni2.html


<html>
<body>
<b>MS Dhoni: Personal Life</b><br/><br/>
<p>
    Before marrying his schoolmate Sakshi Singh Rawat, MS Dhoni fell in love with Priyanka Jha, whom he met in his early 20s. At that time in the year 2002, Dhoni was trying his best to get selected in the Indian team. The same year, his girlfriend died in an accident. Dhoni also dated South Indian actress, Lakshmi Rai. Mahendra Singh Dhoni married Sakshi Singh Rawat, his school friend from DAV Jawahar Vidya Mandir, on July 4, 2010. At the time of their marriage, Sakshi was studying a hotel management course at Taj Bengal in Kolkata as a trainee. 
</p>
    
</body>
</html>

dailyaspirants.com


dhoni3.html


<html>
<body>
<b>MS Dhoni: Career</b><br/><br/>
<p>
    In the year 1998, MS Dhoni was selected for the Central Coal Fields Limited (CCL) team. Till 1998, he played for the school cricket team and club cricket. Whenever Dhoni hit a six in Sheesh Mahal tournament cricket matches, he was gifted Rs 50 by Deval Sahay, who selected him for CCL. With the help of his excellent performance, CCL moved to A division. Deval Sahay was impressed with his dedication and cricket skills and pushed for his selection in the Bihar team. For 1999-2000 season, he got selected in senior Bihar Ranji Team at the age of 18. He was not selected for East Zone U-19 squad (CK Nayudu Trophy) or Rest of India squad (MA Chidambaram Trophy and Vinoo Mankad Trophy).

    Bihar U-19 team advanced to finals but couldn't make it. Later, he was selected for East Zone U-19 squad for the CK Nayudu trophy. While the East Zone lost all the matches, Dhoni finished last in the tournament. 
</p>
    
</body>
</html>

dailyapirants.com


dhoni4.html



<html>
<body>
<b>MS Dhoni: Cricket Records</b><br/><br/>
<p>
    <b>Test Cricket:</b><br/>

1- In 2009, under Dhoni's captaincy, India topped the ICC Test Cricket rankings for the first time. <br/>

2- He is the most celebrated Indian Test Captain with 27 Test wins. <br/>

3- He has 15 overseas Test defeats, the most by an Indian captain. <br/>

4- He became the first Indian wicket-keeper to complete 4,000 Test runs.<br/>

5- Dhoni scored 224 against Australia. This is the highest score by a wicket-keeper–captain and third-highest score by an Indian Captain. <br/>

6- His maiden century against Pakistan is the fastest century to date scored by an Indian wicket-keeper and fourth overall. <br/>

7- Dhoni completed 50 sixes as a captain. <br/>

8- With 294 dismissals in his entire career, he tops the list in all-time dismissals list by Indian wicket-keepers.

9- He shares a record with most dismissals in an innings-- 6 with Syed Kirmani. <br/>

10- He also has a record of 9 dismissals in a match by an Indian wicket-keeper. <br/>
</p>
    
</body>
</html>
dailyaspirants.com


 output:-


dailyapriants.com



Previous Post Next Post