Diferència entre revisions de la pàgina «NF3 - JQUERY-AJAX»
(→Altres mètodes) |
(→$.ajax()) |
||
(Hi ha 17 revisions intermèdies del mateix usuari que no es mostren) | |||
Línia 12: | Línia 12: | ||
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. | 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: | Exemple: | ||
− | < | + | <source lang="java"> |
$.ajax({ | $.ajax({ | ||
// la URL de la petició | // la URL de la petició | ||
Línia 48: | Línia 48: | ||
} | } | ||
}); | }); | ||
− | </ | + | </source> |
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: | 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: | ||
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;" | {|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;" | ||
Línia 55: | Línia 55: | ||
|- | |- | ||
| 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. | | 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. | ||
+ | |- | ||
+ | | 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ó. | | 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ó. | ||
Línia 64: | Línia 66: | ||
| 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.) | | 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 || | + | | 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: |
+ | *xml: devuelve un documento XML que podrá tratarse con jQuery. | ||
+ | *html: devuelve código Html en formato texto. | ||
+ | *script: evalúa la respuesta en JavaScript y la devuelve en formato texto. | ||
+ | *json: evalúa la respuesta en JSON y devuelve un objeto JavaScript. | ||
|- | |- | ||
| 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). | | 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). | ||
Línia 76: | Línia 82: | ||
| 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/. | | 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 || | + | |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; | |url || Estableix la URL on es realitza la petició. L'opció url és obligatòria per al mètode $.ajax; | ||
|} | |} | ||
+ | |||
=== Altres mètodes === | === Altres mètodes === | ||
Els mètodes que proveeix la biblioteca són: | Els mètodes que proveeix la biblioteca són: | ||
− | *$.get | + | *'''$.get''' |
Realitza una petició GET a una URL proveïda. | Realitza una petició GET a una URL proveïda. | ||
Línia 108: | Línia 115: | ||
</source> | </source> | ||
− | *$.post | + | *'''$.post''' |
Realitza una petició POST a una URL proveïda. | Realitza una petició POST a una URL proveïda. | ||
Línia 136: | Línia 143: | ||
</source> | </source> | ||
− | *$.getScript | + | *'''$.getScript''' |
Afegeix un script a la pàgina. | Afegeix un script a la pàgina. | ||
Línia 153: | Línia 160: | ||
</source> | </source> | ||
− | *$.getJSON | + | *'''$.getJSON''' |
+ | |||
Realitza una petició GET a una URL proveïda i espera que una dada JSON sigui retornat. | 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: | Els mètodes han de tenir els següents arguments, en ordre: | ||
Línia 161: | Línia 171: | ||
La URL on es realitzarà la petició. El seu valor és obligatori. | 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). | 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). | ||
Línia 171: | Línia 181: | ||
*data type | *data type | ||
El tipus de dada que s'espera rebre des del servidor. El seu valor és opcional. | El tipus de dada que s'espera rebre des del servidor. El seu valor és opcional. | ||
+ | |||
+ | |||
Nota | Nota | ||
Línia 176: | Línia 188: | ||
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. | 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: | Exemples: | ||
− | < | + | <source lang="java"> |
+ | 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); |
− | </ | + | } |
+ | </source > | ||
=== $.load() === | === $.load() === | ||
Línia 217: | Línia 236: | ||
</source> | </source> | ||
− | === Events AJAX === | + | === Events AJAX [http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxstart ajaxStart] [http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajaxstop 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. | 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. | ||
<pre> | <pre> | ||
Línia 227: | Línia 246: | ||
== Exercicis == | == 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 === | === 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 | 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 |
Revisió de 17:40, 5 abr 2015
Contingut
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:
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. |
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; |
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 ..."
Missatge
Mostra un missatge d'alerta per indicar que el JavaScript s'ha carregat des del servidor.
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).
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