Diferència entre revisions de la pàgina «NF3 - JQUERY-AJAX»

Revisió de 17:40, 5 abr 2015

Jquery i AJAX

jQuery soporta AJAX permetent abstraer les diferencies que poden existir entre els navegadors. Els mètodes que podem utilitzar son:

• $.get()
• $.getScript()
• $.getJSON()
• $.post()
• $.load()

Però tots ells estan basats en el mètode:

• $.ajax()

$.ajax()

El mètode $.ajax és configurat a través d'un objecte, el qual conté totes les instruccions que necessita jQuery per completar la petició. Aquest mètode és particularment útil a causa que ofereix la possibilitat d'especificar accions en cas que la petició hagi fallat o no. A més, en estar configurat a través d'un objecte, és possible definir les seves propietats de forma separada, fent que sigui més fàcil la reutilització del codi. Pot visitar http://api.jquery.com/jquery.ajax/ per consultar la documentació sobre les opcions disponibles en el mètode. Exemple:

$.ajax({
        // la URL de la petició
        url : 'post.php',
    
        //informació a enviar
        // (també es posible utilitzar una cadena de dades)
        data : { id : 123 },
    
        // especificar si será una petició POST o GET
        type : 'GET',
    
        // el tipus d'informació que s'espera de resposta
        dataType : 'json',
    
        // codi a executar si la petició es satisfactoria;
        // la resposta es pasada com argument a la funció
        success : function(json) {
            $('<h1/>').text(json.title).appendTo('body');
            $('<div class="content"/>')
                .html(json.html).appendTo('body');
        },
    
        // codi a executar si la petició falla;
        // en pasen com arguments a la funció
        // l'objete jqXHR (extensió de XMLHttpRequest), un text amb l'estat
        // de la petició i un text amb la descripció del error que hagi donat el servidor
        error : function(jqXHR, status, error) {
            alert('hi ha un problema');
        },
    
        // codi a executar sense importar si la petició va fallar o no
        complete : function(jqXHR, status) {
            alert('Petición realizada');
        }
    });

El mètode $.ajax posseeix moltes opcions de configuració, i és justament aquesta característica la que fa que sigui un mètode molt útil. Per a una llista completa de les opcions disponibles, pot consultar http://api.jquery.com/jquery.ajax/; a continuació es mostren les més comunes:

Altres mètodes

Els mètodes que proveeix la biblioteca són:

• $.get

Realitza una petició GET a una URL proveïda.

$("button").click(function(){
        $.get("./dades.php?name=julio&city=valencia", function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });

//dades.php

<?php
if(isset($_GET["name"]) && isset($_GET["city"])){
    $nom = $_GET["name"];
    $cit = $_GET["city"];
    echo $nom .  $cit;
    exit;
}
echo "ERROR";
?>

• $.post

Realitza una petició POST a una URL proveïda.

$("button").click(function(){
        $.post("dades.php",
        {
          nom: "Julio",
          ciutat: "Valencia"
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);    //data muestra los datos recibidos y muestra el estado 
        });

//dades.php

<?php
if(isset($_POST["name"]) && isset($_POST["city"])){
    $nom = $_POST["name"];
    $cit = $_POST["city"];
    echo $nom .  $cit;
    exit;
}
echo "ERROR";
?>

• $.getScript

Afegeix un script a la pàgina.

$("button").click(function(){
        $.getScript("demo_ajax_script.js");
    });


//una altra forma
$("button").click(function(){
$.getScript('/static/js/myScript.js', function() {
        functionFromMyScript();
});

• $.getJSON

Realitza una petició GET a una URL proveïda i espera que una dada JSON sigui retornat.

           $.getJSON([url], [parámetres], [funció que rep les dades])

Els mètodes han de tenir els següents arguments, en ordre:

• url

La URL on es realitzarà la petició. El seu valor és obligatori.

• parámetres

La informació que s'enviarà al servidor. El seu valor és opcional i pot ser tant un objecte com una cadena de dades (com foo=bar&baz=bim).

Nota: Aquesta opció no és correcte per al mètode $.getScript.

• success callback

Una funció opcional que s'executa en cas que petició hagi estat satisfactòria. Aquesta funció rep com a arguments la informació de la petició i l'objecte en brut d'aquesta petició.

• data type

El tipus de dada que s'espera rebre des del servidor. El seu valor és opcional.

Nota

Aquesta opció és solament aplicable per a mètodes en què no està especificat el tipus de dada en el nom del mateix mètode. Exemples:

function presionSubmit()
{
  var v=$("#dni").attr("value");
  $.getJSON("pagina1.php",{dni:v},llegadaDatos);     //url, envia objecte, funció en cas de arribar dades
  return false;
}

function llegadaDatos(datos)    //funció que rep les dades
{
 $("#resultados").html("Nombre:"+datos.nombre+
                       "<br>"+"Apellido:"+
                       datos.apellido+"<br>"+
                       "Direccion:"+datos.direccion);
}

$.load()

El mètode $(selector).load() és l'únic que es pot cridar des d'una selecció. Aquest mètode obté el codi HTML d'una URL i als elements seleccionats els modifica amb la informació obtinguda.

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt");
    });
});

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("ejemplo.html #p1");      //carga la web e inserta su contenido dentro de #div1
    });
});

$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt", function(){
           alert("External content loaded successfully!");
         });
    });
});

Events AJAX ajaxStart ajaxStop

Sovint, voldrà executar una funció quan una petició hagi començat o acabat, com per exemple, mostrar o ocultar un indicador. En lloc de definir aquestes funcions dins de cada petició, jQuery proveeix la possibilitat de vincular esdeveniments Ajax a elements seleccionats. Per a una llista completa d'esdeveniments Ajax, pot consultar http://docs.jquery.com/ajax_events.

$(document)
        .ajaxStart(function() { $('#loading_indicator').show(); })
        .ajaxStop(function() { $('#loading_indicator').hide(); });

Podeu obtenir imatges per mostrar com a indicadors a: http://www.ajaxload.info/

Exercicis

Suma

Es tracta de crear un parell d'input dels quals s'introduiran valors numèrics que seran tractats en el servidor i tornarà la suma d'ells. Mentre es processa la informació haurà d'aparèixer un missatge de "processant ..."

exercici ajax post

Missatge

Mostra un missatge d'alerta per indicar que el JavaScript s'ha carregat des del servidor.

exercici missatge alerta

Formulari

En una consulta d'un dentista es vol registrar un nou client, es crearà un formulari amb nom, telèfon i un radi button que marcarà tard o demà. Aquestes dades s'enviaran al servidor i el servidor els tornarà en format JSON per mostrar-los en pantalla dues maneres. (JSON i tots els seus noms).

solució formulari ajax

Chat

Es vol crear un chat amb JQuery. El contingut del chat es guardarà en un fitxer al servidor php. Aquest fitxer es modificarà cada vegada que algú enviï informació. Els clients (navegadors) indicaran l'última línia del fitxer que han rebut per tal d'actualitzar els seus missatges

Podeu trobar al moodle la solució d'aquest exercici

Pilota

• a) Es vol moure una pilota per la pantalla. Aquesta pilota es mou en tots els navegadors alhora. Per fer-ho, el servidor php té la posició de la pilota a la pantalla i els navegadors, mitjançant jquery, la mostren.
• b) La pilota no ha de parar de moure's, però la seva direcció la decideix el client mitjançant les tecles (up, down, left, rigth).

Podeu trobar al moodle la solució d'aquest exercici