Pages

Tuesday, February 5, 2013

Ajax Tutorial to fetch data from other URL


  • url - The target of the request.
  • type - The type of HTTP request either: "GET" (Default) or "POST".
    Difference between GET and POST.
  • async - Set asyncronous to TRUE if you want it to load in background and this will allow you to run mutiple AJAX requests at the same time. If you set to FALSE the request will run and then wait for the result before preceeding with the rest of you code.
  • data - Specify data you wish to pass with the AJAX call in "{param1: 'value1'}" format.
  • dataType - Specify the type of data that is returned: "xml/html/script/json/jsonp".
  • success - The function that is fired when the AJAX call has completed successfully.
  • error - The function that is fired when the AJAX call encountered errors.
  • jsonp - Allows you to specify a callback function when making cross domain AJAX calls.
  • timeout - You can also set a timeout on the AJAX call in milliseconds.
//Listen when a button, with a class of "myButton", is clicked
//You can use any jQuery/JavaScript event that you'd like to trigger the call
$('.myButton').click(function() {
//Send the AJAX call to the server
  $.ajax({
  //The URL to process the request
    'url' : 'page.php',
  //The type of request, also known as the "method" in HTML forms
  //Can be 'GET' or 'POST'
    'type' : 'GET',
  //Any post-data/get-data parameters
  //This is optional
    'data' : {
      'paramater1' : 'value'
      'parameter2' : 'another value'
    },
  //The response from the server
    'success' : function(data) {
    //You can use any jQuery/JavaScript here!!!
      if (data == "success") {
        alert('request sent!');
      }
    }
  });
});

No comments:

Post a Comment