IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

És molt important recordar que AJAX (com diu la A inicial del seu nom) és asíncron. Cada cop que executeu una petició AJAX l'execució del javascript no s'atura i continua amb la següent/s línies de codi. Per tant no podem programar de forma lineal o procedimental sinó que cal programar per esdeveniments. El mètode Ajax de Jquery us permet indicar una sèrie de funcions que s'executaran en cas que succeeixin certs esdeveniments (petició AJAX correcta, petició AJAX incorrecte, segons el HTTP Response Code, etc.)

Mètodes POST i AJAX

Hi ha dos mètodes que són els més utilitzats per a executar peticions Ajax a Jquery: post i ajax. De fet el mètode post utilitza Ajax i equival a:

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

Per tant només cal que aprengueu com funciona el mètode ajax ja que el mètode post és una part del mètode ajax.

La definició del mètode ajax:

Perform an asynchronous HTTP (Ajax) request.

La sintaxi bàsica és:

jQuery.ajax( url [, settings ] )

És obligatori indicar una URL de la petició HTTP que volem realitzar i normalment indicarem un conjunt de settings configurant la petició AJAX com per exemple el tipus de petició HTTP (POST,GET, DELETE, etc. Vegeu REST)), les accions a executar (event handlers), etc. El mètode ajax retorna un objecte jqXHR:

http://api.jquery.com/Types/#jqXHR ([1])

que és un superseed de l'objecte XMLHTTPRequest

Les settings són de tipus Plain Object (concepte similar als POJOs Java). Es poden pre-configurar les settings per a qualsevol petició amb el mètode ajaxSetup. Vegeu:

http://api.jquery.com/jQuery.ajaxSetup/

La sintaxi és:

jQuery.ajaxSetup( options )

On options és el Plain Object amb les settings. Un exemple:

Ara ja no cal indicar la URL a cada petició AJAX. Per exemple: 

<pre class="brush:javascript"
$.ajax({
  // url not set here; uses ping.php
  data: { "name": "Dan" }
});

D'opcions de configuració hi ha moltes i les podeu trobar totes a la documentació:

http://api.jquery.com/jQuery.ajax/#jQuery-ajax-url-settings

Vegeu un exemple complet a JSFiddle:

http://jsfiddle.net/2tqja09e/light/

Recursos:

jqXHR

Des de la versió 1.5 de Jquery el mètode ajax retorna un objecte XHR anomenat jqXHR que és un superset de l'objecte XMLHTTPRequest Aquest mètode implementa la interfície Promise i per tant podem utilitzar els mètodes:

jqXHR.done() (for success)
jqXHR.fail() (for error)
jqXHR.always() (for completion, whether success or error) 

Un exemple:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });
 
// Perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});

Altres mètodes

Vegeu la llista a:

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

getJSON

Sintaxi:

jQuery.getJSON( url [, data ] [, success ] )

Envia una petició HTTP de tipus GET a la URL indicada amb les dades indicades a data i success és el eventhandler que s'executa en cas que tot funcioni correctament.

És equivalent a:

 $.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

On:

  • data: és PlainObject o String amb les dades que s'enviaran a la URL
  • success: és un funció de tipus callback que s'executa si la petició s'executa correctament.

A callback function that is executed if the request succeeds. La sintaxi és:

success(data,status,xhr)

On:

  • data: Conté les dades retornades pel servidor és a dir un JSON.
  • status: Un string amb el request status ("success", "notmodified", "error", "timeout", or "parsererror").
  • xhr: Conté el objecte XMLHttpRequest object complet.

Vegeu un exemple senzill amb l'API de flick a Codepen:

http://codepen.io/ezchile/pen/jxJKA

A l'exemple s'utilitza l'objecte jqXHR.

Resources

Laravel

CSRF

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

Exemple ebre-escool

Passar faltes amb AJAX

Utilitza gritter per a mostrar errors.

Un exemple de select:

<select studysubmoduleid="136" id="13_136_check_attendance_select_4676" width="50" onchange="check_attendance_select_on_click(this,4676,13,2,'2015-04-21')" style="width: 50px;display:inline;">
 <option value="0">--</option>
 <option value="1">F</option>
 <option value="2">FJ</option>
 <option value="3">R</option>
 <option value="4">RJ</option>
 <option value="5">E</option>
</select>
function check_attendance_select_on_click(element,person_id,time_slot_id,day,date){
  id = element.id;
  study_submodule_id = $("#"+id).attr("studysubmoduleid");
  selected_value = $("#"+id).val();
  previous_selected_value = $("#"+id).val();
  //DEBUG INFO:
  /*console.debug("check_attendance_select_on_click!!!");
  console.debug("id: " + id);
  console.debug("person_id: " + person_id);
  console.debug("time_slot_id: " + time_slot_id);
  console.debug("day: " + day);  
  console.debug("date: " + date);  
  console.debug("study_submodule_id: " + study_submodule_id);
  console.debug("selected_value: " + selected_value);
  */
  //AJAX
  $.ajax({
    url:'<?php echo base_url("/index.php/attendance/crud_incidence");?>',
    type: 'post',
    data: {
        person_id : person_id,
        time_slot_id : time_slot_id,
        day : day,
        date : date,
        study_submodule_id: study_submodule_id,
        absence_type : selected_value  
    },
    datatype: 'json',
    statusCode: {
      404: function() {
        $.gritter.add({
          title: 'Error connectant amb el servidor!',
          text: 'No s\'ha pogut contactar amb el servidor. Error 404 not found. URL: index.php/attendance/crud_incidence ' ,
          class_name: 'gritter-error gritter-center'
        });
      },
      500: function() {
        $("#response").html('A server-side error has occurred.');
        $.gritter.add({
          title: 'Error connectant amb el servidor!',
          text: 'No s\'ha pogut contactar amb el servidor. Error 500 Internal Server error. URL: index.php/attendance/crud_incidence ' ,
          class_name: 'gritter-error gritter-center'
        });
      }
    },
    error: function() {
      $.gritter.add({
          title: 'Error!',
          text: 'Ha succeït un error!' ,
          class_name: 'gritter-error gritter-center'
        });
    },
  }).done(function(data){
    
    var all_data = $.parseJSON(data);
    //console.debug (all_data);
    result = all_data.result;
    result_message = all_data.message;
    if (result) {
      console.debug(result_message);
    } else {
      $.gritter.add({
        title: 'Error guardant la incidència a la base de dades!',
        text: 'No s\'ha pogut guardar la incidència. Missatge d\'error:  ' + result_message ,
        class_name: 'gritter-error'
      });
    }
  });
}

Resources:

Vegeu també

Enllaços externs