jQuery Ajax Methods

The methods are listed below:

MethodsDescription
$.ajax(option)Loads a remote page using an HTTP request.
$.ajaxSetup(options)Used for setting up a global settings for AJAX requests.
JQuery.get( )Loads a remote page using an HTTP Get request.
JQuery.getJSON( )Loads a JSON data using an HTTP GET request.
$.getScript( )Loads and executes a JavaScript from a server.
$.post()Posts the data to the specified url on the server.
load()Loads a data from server.
serialize( )Serializes a set of input elements into string data.
ajaxStart( )Specifies a function to run, when the AJAX request begins.
ajaxStop( )Specifies a function to run, when all AJAX request are completed.

The options in $.ajax( ) and $.ajaxSetup( ) are listed below:

OptionsDescription
DataData is sent to the server with the request.
ErrorCallback function executed when the request fails.
PasswordIt is used to respond to an Http access authentication request.
SuccessThis is a callback function executed if request succeeds.
urlURL to which the request is sent.
timeoutNumber of milliseconds after which the request will time out in failure.
typeDefines the HTTP method to use (GET or Post)
dataTypeDefines the data type expected back from the server.
completeIt is a callback function, executes when the request is finished.

Example 1 : Write a function for $.ajax() methods using success event

<h4>AJAX methods</h4>
<html>
     <head>
     <script type="text/javascript" scr="jquery-1.3.2.min.js"></script>
     <script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
          $("#btn").click(function(event)
          {
               $.ajax({url:'show.html'. sucess:function(data){$('#d1').html(data);}});
          });
     });
     </script>
     </head>
     <body>
          <p>Click to learn AJAX methods:</p>
          <!--<div id="d1 style="background-color:blue;">DIV </div>-->
          <input type="button" id="btn" value="Show Data"/>
     </body>
</html>


Output:

ajax method example 1

Example 2 : Write a function for $.get() method

<html>
<body>
     <script type="text/JavaScript">
     if(document.getElementById("name").value)
     {
          var fname = document.getElementryById("name").value;
          document.write?("Welcome<b>"+ pname +"</b>!");
     }
     </script>
</body>
</html>
<html>
<head>
     <script type="text/javascript" src="jquery-1.3.2min.js"></script>
     <script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
          $("#btn").click(function(event)
          {
               $.get("show.js",{name:"BOB"},function(data){$('#d1').html(data);});
          });
     });
     </script>
</head>
<body>
     <p>Click on button</p>
     <div id="d1" style="background-color: white;">To learn AJAX:
     <input type="button" id="btn" value="show data"/>
</body>
</html>


Output:

ajax method example 2

Example 3 : Write a function for load() method

<h4>AJAX methods</h4>
<html>
     <head>
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
     <script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
          $('#d1').load('show.html');
     });
     </script>
     </head>
     <body>
          Click on the button
          <div id="d1" style="background-color:white;">To learn AJAX</div>
          <input type="button" id="btn" value="Show Data"/>
     </body>
</html>


Output:

ajax method example 3
▲