Codes AJAX

ajax-completo-comentado.js

$(document).ready(function(){

  // this is the container we'll load content into
  var container = $('#target');

  // adding a tabIndex of -1 makes it keyboard accessible,
  // and we can set the focus to it
  container.attr('tabIndex','-1');

  // if a user clicks on an element with the class ajaxtrigger...
  $('.ajaxtrigger').click(function(){

    // define trigger as the link
    var trigger = $(this);

    // read its href attribute (which is the URI we'll load with AJAX)
    var url = trigger.attr('href');

    // if the element does not have a class called "loaded" 
    if(!trigger.hasClass('loaded')){

      // add a new span to the element.
      trigger.append('<span></span>');

      // add a class called 'loaded' to the element
      trigger.addClass('loaded');

      // and define msg as the last span in the element
      var msg = trigger.find('span::last');

    // otherwise, simply define msg as the last span in the element
    } else {
      var msg = trigger.find('span::last');
    }
    // ^ this condition means we only add the span once and not
    //   every time users click the element.
    
    // call the doAjax function with the URI to load, 
    // the span inside the link to change and the 
    // target element to replace.    
    doAjax(url,msg,container);

    // tell the browser to not follow the link 
    return false;
  });

  // here's where the AJAX magic happens
  function doAjax(url,msg,container){

    // if the URI starts with http...
    if(url.match('^http')){
      // show an error and set the class of the span to 'error'
      msg.html(' (error!)').addClass('error');

      // tell the end user in the target element what the error is
      var errormsg = 'AJAX cannot load external content';

      // update the container with the error
      updateContainer(errormsg,'#c00');

    // if the URI does not start with http          
    } else {
      
      // start an AJAX request using the url
      $.ajax({
        url: url,

        // give the request five seconds time, otherwise call it 
        // a timeout error
        timeout:5000,
        
        // if all went well
        success: function(data){

          // set the span content to ready
          msg.html(' (ready.)');

          // update the container with the right data
          updateContainer(data,'#ff9');
        },
        
        // if there was an error
        error: function(req,error){
          
          // say in the link that there was an error and set the 
          // class of the span to 'error'
          msg.html(' (error!)').addClass('error');

          // if the error just says error, get the real status 
          // text from the browser (jQuery doesn't do this right)
          if(error === 'error'){error = req.statusText;}

          // tell the user that there is a communication error
          var errormsg = 'There was a communication error: '+error;

          // update the container with the error
          updateContainer(errormsg,'#c00');
        },
        
        // if the link was clicked but the AJAX request was not fired...
        beforeSend: function(data){

          // remove any "error" classes and set the span message to loading
          msg.removeClass('error').html(' (loading...)');
        }
      });
    }
  };
  
  // update the container 
  function updateContainer(content,colour){
    container.
      // set the content
      html(content).
        // shift the browser focus
        focus().
          // flash the container for a second in the 
          // specified colour
          effect('highlight',{color:colour},1000);
  }

});

ajax-completo.js

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    if(url.match('^http')){
      var errormsg = 'AJAX cannot load external content';
      container.html(errormsg).
        effect('highlight',{color:'#c00'},1000);
    } else {
      $.ajax({
        url: url,
        timeout:5000,
        success: function(data){
          container.html(data).
            effect("highlight",{},1000);
        },
        error: function(req,error){
          if(error === 'error'){error = req.statusText;}
          var errormsg = 'There was a communication error: '+error;
          container.html(errormsg).
            effect('highlight',{color:'#c00'},1000);
        },
        beforeSend: function(data){
          container.html('<p>Loading...</p>');
        }
      });
    }
  }
});

ajax-load.js

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

    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";
     
//  load() functions
    var loadUrl = "ajax/load.php";
    $("#load_basic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

ajax.js

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    $.ajax({
      url: url,
      success: function(data){
        container.html(data);
      },
      beforeSend: function(data){
        container.html('<p>Loading...</p>');
      }
    });
  }
});

get-json.js

// $.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;
    });

get-script.js

// $.getScript(): Load JavaScript from a Remote Location

//  $.getScript()
    var scriptUrl = "ajax/script.php";
    $("#getScript").click(function(){
        $("#result").html(ajax_load);
        $.getScript(scriptUrl, function(){
            $("#result").html("");
        });
    });

get.js

// $.get(): Make GET Requests

    $("#get").click(function(){
        $("#result").html(ajax_load);
        $.get(
            loadUrl,
            {language: "php", version: 5},
            function(responseText){
                $("#result").html(responseText);
            },
            "html"
        );
    });

post.js

// $.post(): Make POST Requests
    
    $("#post").click(function(){
        $("#result").html(ajax_load);
        $.post(
            loadUrl,
            {language: "php", version: 5},
            function(responseText){
                $("#result").html(responseText);
            },
            "html"
        );
    });