Ajax call using Jquery

Ajax

--------------

• Ajax stands for asynchronous JavaScript and XML.

• USE      :   If you want to load some specific part of web page then it used.

• Benifit : With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

• Example : In Google Maps, zoom in or zoom out. 

Jquery  

----------------

• jQuery is free ,open source Software.

• jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications

• jQuery library allows the creation of powerful dynamic web pages  and web applications.

Now , How to make Ajax call using Jquery

-------------------------------------------------------

• load() method  is used to load HTML from the url and put it into the DOM.

Problem : Suppose we have following code in html

                  <div>

                        <div id="result">

                        </div>

                        <div>

                                <form action="" method=""> 

                                       <input type="text" name="txtname">

                                       <button name="getdata" id="getdata">

                                 </form>

                         </div>

                   </div>

               - Now when we click on getdata then  it will load the data from another page into the "result" div.

Solution : Write down below code into javascript file or bottom of page to get effect

                  

                   $("#getdata").click(function() {

                          $("#result").load("demo/load.php");

                  });

                 so this is simple code to get data from the load.php page. when we click on getdata button the it                    load  the data without refreshing the page and inject into the "Result".

               

    Note : we have to setup following because we dont want cache of ajax call.

                $.ajaxSetup({ 

                            cache : false;

                 });

               so using this it will not store result in cache so it will not load it again.

•      After button is clicked it take some time to load the html , so if we want show some animation during that time then we can add it using html() 

                   like ... $("#result").html("<img src="loading.gif/>").load("demo/load.php");

                  it will show you gif image upto loading of page content get completed.

•  Get and Post Method Parameter 

             - if we want to append the paramater to URL then we can do that.

             -> suppose we want txtname as parameter and method is GET the we have write as follow

                   $("#getdata").click(function() {

                          $("#result").html().load("demo/load.php","txtname=hitesh");

                  });                        

                 -so for the GET we have pass parameter as String

              

              ->suppose we want txtname as parameter and method is POST the we have write as follow

                   $("#getdata").click(function() {

                          $("#result").html().load("demo/load.php",{txtname:"hitesh"});

                  });                        

                 -so for the POST we have pass parameter as Object        

• And last if we want notify user on success call of ajax the we have add another new parameter in load()

                   $("#getdata").click(function() {

                         $("#result")

                                 .html()

                                 .load("demo/load.php",{txtname:"hitesh"},function(){

                                             alert("Load successfully....!!!!!");                                                                                                      });

                   }); 

----- For more detail about jquery and ajax Click here.