Diferència entre revisions de la pàgina «JQUERY - AJAX»
(→Jquery i AJAX) |
(→Exercicis) |
||
| Línia 294: | Línia 294: | ||
== Exercicis == | == Exercicis == | ||
| − | + | <!-- | |
=== FOTOS === | === FOTOS === | ||
| Línia 347: | Línia 347: | ||
'''Podeu trobar al moodle la solució d'aquest exercici''' | '''Podeu trobar al moodle la solució d'aquest exercici''' | ||
| + | |||
| + | --> | ||
Revisió del 14:53, 11 maig 2020
Contingut
Jquery i AJAX
VIDEOTUTORIAL
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:
| Opcions | Explicació |
|---|---|
| async | Estableix si la petició serà asíncrona o no. De forma predeterminada el valor és true. Ha de tenir en compte que si l'opció s'estableix en false, la petició bloquejarà l'execució d'altres codis fins que aquesta petició hagi finalitzat. |
| jqXHR | es un objeto jqXHR que contiene todos los datos de la solicitud Ajax realizada, incluyendo la propiedad jqXHR.status que contiene, entre otros posibles, el código de estado HTTP de la respuesta. |
| textStatus | texto que describe el tipo de error, que puede ser, además de null, “abort”, “timeout”, “No Transport” o "parseerror". |
| errorThrown | si hay un error HTTP, errorThrown contiene el texto de la cabecera HTTP de estado. Por ejemplo, para un error HTTP 404, errorThrown es “Not found”; para error un HTTP 500 es “Internal Server Error”. |
| beforeSend | una funció que s'ha d'executar abans de l'enviament de la consulta.Això permet modificar l'objecte XMLHttpRequest abans que s'enviï per especificar, per exemple, encapçalats HTTP personalitzats. |
| cache | Estableix si la petició serà guardada en la cache del navegador. De forma predeterminada és true para tots els dataType excepte para “script” i “jsonp”. Quan posseeix el valor false, s'agrega una cadena de caràcters anti-cache al final de la URL de la petició. |
| complete | Estableix una funció de devolució de trucada que s'executa quan la petició aquesta completa, encara que hagi fallat o no. La funció rep com a arguments l'objecte jqXHR (en versions anteriors o iguals a jQuery 1.4, rep en el seu lloc l'objecte de la petició en cru XMLHTTPRequest) i un text especificant l'estatus de la mateixa petició (success, notmodified, error, timeout, abort, o parsererror). |
| context | Estableix l'abast en què la/les funcionis de devolució de trucada s'executessin (per exemple, defineix el significat de this dins de les funcions). De manera predeterminada this fa referència a l'objecte originalment passat al mètode $.ajax. |
| data | Estableix la informació que s'enviarà al servidor. Aquesta pot ser tant un objecte com una cadena de dades (per exemple foo=bar&baz=bim.) |
| dataType | una cadena de caracteres que especifica el formato de los datos que se enviarán por el servidor (xml, html, json o script). Si no se especifica nada, jQuery usa el tipo MIME para determinar el formato adecuado: responseXML o ResponseText . Los tipos disponibles son:
|
| error | Estableix una funció de devolució de trucada (CALLBACK) a executar si resulta algun error en la petició. Aquesta funció rep com a arguments l'objecte jqXHR (en versions anteriors o iguals a jQuery 1.4, rep en el seu lloc l'objecte de la petició en cru XMLHTTPRequest), un text especificant l'estatus de la mateixa petició (timeout, error, abort, o parsererror) i un text amb la descripció de l'error que hagi enviat el servidor (per exemple Not Found o Internal Server Error). |
| jsonp | Estableix el nom de la funció de devolució de trucada a enviar quan es realitza una petició JSONP. |
| succes | Estableix una funció a executar si la petició a estat satisfactòria. Aquesta funció rep com a arguments l'objecte jqXHR (en versions anteriors o iguals a jQuery 1.4, rep en el seu lloc l'objecte de la petició en cru XMLHTTPRequest), un text especificant l'estatus de la mateixa petició i la informació de la petició (convertida a objecte Javascript en el cas que dataType sigui JSON), l'estatus de la mateixa. |
| timeout | Estableix un temps en mil·lisegons per considerar a una petició com fallada |
| traditional | Si el seu valor és true, s'utilitza l'estil de serialización de dades utilitzat abans de jQuery 1.4. Per a més detalls pot visitar http://api.jquery.com/jquery.param/. |
| type | una cadena de caràcters que defineix el mètode HTTP que es va a utilitzar per la consulta (GET o POST). El valor per defecte és GET. Es poden usar altres mètodes d'enviament HTTP, com PUT o DELETE, però no estan suportats per tots els navegadors. |
| url | Estableix la URL on es realitza la petició. L'opció url és obligatòria per al mètode $.ajax; |
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:
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";
?>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/
