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

Revisió de 17:45, 27 abr 2022

Jquery i AJAX

VIDEOTUTORIAL

https://youtu.be/yzhdVgxJbrQ

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);
        },
    
        // 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:

Dreceres

Addicionalment a la funció AJAX, jQuery proveeix altres funcions per a usos més específics i estalviar-nos escriure unes quantes línies de codi:

• $.get

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

$("button").click(function () {
                $.get("./datos.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("datos.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["nom"]) && isset($_POST["ciutat"])){
    $nom = $_POST["nom"];
    $cit = $_POST["ciutat"];
    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:

$("button").click(function () {
                $.getJSON("datos.php", {
                    "nombre": "Julio",
                    "apellido": "Noguera"
                })
                .done(function (data, textStatus, jqXHR) {
                    if (console && console.log) {
                        console.log("La solicitud se ha completado correctamente.");
                        console.log(data);  //devuelve objeto del servidor
                        console.log(textStatus);    //devuelve 'success'
                        console.log(jqXHR);   //objeto AJAX
                    }
                })
                .fail(function (jqXHR, textStatus, errorThrown) {
                    if (console && console.log) {
                        console.log("ha fallado" + textStatus);
                    }

                });
            });

//datos.php

<?php
$jsondata = array();

if( isset($_GET['nombre']) ) {

    if( $_GET['nombre'] == 'julio' ) {

        $jsondata['success'] = true;
        $jsondata['message'] = 'Hola! El valor recibido es correcto.';

    } else {

        $jsondata['success'] = false;
        $jsondata['message'] = 'Hola! El valor recibido no es correcto.';

    }

    //Aunque el content-type no sea un problema en la mayoría de casos, es recomendable especificarlo
    header('Content-type: application/json; charset=utf-8');
    echo json_encode($jsondata);
    exit();
}

$.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.

AjaxStart(): Assigna una funció que s'ha d'executar quan comença una consulta AJAX.

AjaxStop(): Assigna una funció que s'executarà cada vegada que acaba una consulta.

$(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

Exercicis curs 2021-2022

• Exercicis 4 i 6 d'AJAX amb JQuery

Solucions

http://wikiserver.infomerce.es/index.php/Exercici4_axax_jquery

http://wikiserver.infomerce.es/index.php/Exercici6_axax_jquery