5 Ways to Make Ajax Calls with jQuery

The basic components of a AJAX are:

  • load(): Load a piece of html into a container DOM.
  • $.getJSON(): Load a JSON with GET method.
  • $.getScript(): Load a JavaScript.
  • $.get(): Use this if you want to make a GET call and play extensively with the response.
  • $.post(): Use this if you want to make a POST call and don’t want to load the response to some container DOM.
  • $.ajax(): Use this if you need to do something when XHR fails, or you need to specify ajax options

 

  •  load(): Load HTML From a Remote URL and Inject it into the DOM

    Initial Configuration:

    $.ajaxSetup ({  cache: false  });
    var ajax_load = “<img src=’img/load.gif’ alt=’loading…’ />”;
    var loadUrl = “action.php”;
    $(“#load_basic”).click(function(){
    $(“#result”).html(ajax_load).load(loadUrl);
    });Load Part of the Remote File:
    $(“#load_dom”).click(function(){
    $(“#result”)
    .html(ajax_load)
    .load(loadUrl + ” #picture”);
    });

    Pass Parameters Through the GET Method:
    $(“#load_get”).click(function(){
    $(“#result”)
    .html(ajax_load)
    .load(loadUrl, “language=php&version=5”);
    });

    Pass Parameters Through the POST Method:
    $(“#load_post”).click(function(){
    $(“#result”)
    .html(ajax_load)
    .load(loadUrl, {language: “php”, version: 5});
    });

    Action on AJAX Success:
    $(“#load_callback”).click(function(){
    $(“#result”)
    .html(ajax_load)
    .load(loadUrl, null, function(responseText){
    alert(“Response:\n” + responseText);
    });
    });

  • $.getJSON(): Retrieve JSON from a Remote Location:var jsonUrl = “ajax/json.php”;
    $(“#getJSONForm”).submit(function(){
    var q = $(“#q”).val();
    if (q.length == 0) {
    $(“#q”).focus();
    } else {
    $(“#result”).html(ajax_load);
    $.getJSON(
    jsonUrl,
    {q: q},
    function(json) {
    var result = “Language code is \”<strong>” + json.responseData.language + “\””;
    $(“#result”).html(result);
    }
    );
    }
    return false;
    });
  • $.getScript(): Load JavaScript from a Remote Location:var scriptUrl = “ajax/script.php”;
    $(“#getScript”).click(function(){
    $(“#result”).html(ajax_load);
    $.getScript(scriptUrl, function(){
    $(“#result”).html(“”);
    });
    });
  • $.get(): Make GET Requests:$(“#get”).click(function(){
    $(“#result”).html(ajax_load);
    $.get(
    loadUrl,
    {language: “php”, version: 5},
    function(responseText){
    $(“#result”).html(responseText);
    },
    “html”
    );
    });
  • $.post(): Make POST Requests:$(“#post”).click(function(){
    $(“#result”).html(ajax_load);
    $.post(
    loadUrl,
    {language: “php”, version: 5},
    function(responseText){
    $(“#result”).html(responseText);
    },
    “html”
    );
    });

 

0

About the author

Janaki(http://mjanaki.com) - A Software developer with 9+ years of experience in multiple technology projects across web, mobile, and cloud applications with expertise in PHP, C#, MySQL, Web services and open source platforms.

Similar Posts

Comments are closed.