Veiga: /* Facendo peticións con POST */

2015-03-05T13:25:50Z

Facendo peticións con POST

Página nueva

O comando '''load()''' serve tanto para facer peticións GET ou POST dependendo de como configuremos a petición.

'''¿Cando deberemos usar un método ou outro?'''

Pois por temas de seguridade e versatilidade ó enviar datos ó servidor usaremos o método POST.

Nalgúns casos por facilidade de programación e sempre e cando non hai ningún conflicto na seguridade poderemos empregar o método GET. O método GET tamén ten a limitación da cantidade máxima de datos que se pode enviar (estaría limitada pola cantidade máxima de texto que poderemos escribir na URL).

{{Alerta|Sobre o método GET|
Un dato importante é que moitos navegadores cando fan a caché de páxinas, si estamos empregando o método GET, pode darse o caso de que en vez de baixar de novo a páxina do servidor, amósanos a páxina da caché, dando lugar a confusións moitas veces imcomprensibles.}}

=== Obtendo datos con jQuery ===

<source lang="javascript">
jQuery.get( url, [data], [callback], [type] )
</source>
Cando queremos obter datos dende o servidor e decidir o que queremos facer con eles (en vez de deixar que o comando load() o asigne como contido dun elemento HTML), podemos empregar o comando '''$.get()''':

A sintaxe é a seguinte:

'''$.get(url,parametros,retorno)'''

Como parámetros introduciremos os datos que se enviarán á url. Exemplos de uso:

<source lang="javascript">
// Chama á páxina test.php sin pasar ningún parámetro adicional.
$.get("test.php");

// Chama á páxina test.php pasando como datos o nome e a hora.
$.get("test.php", { nome: "Carlos", hora: "4pm" } );

// No seguinte exemplo pasamos un array de datos ó servidor, e ignoramos a resposta
// devolta polo servidor.
$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

// Chamamos á páxina test.php, e ó rematar a execución amosará unha alerta cos datos devoltos
// pola páxina test.php e que se atopan na variable data.
$.get("test.php", function(data){
alert("Datos devoltos: " + data);
});

// Chama á páxina test.cgi pasando o nome e hora como párametros polo método GET, e xestiona a
// resposta mediante a función e amosa unha alerta cos resultados devoltos.
$.get("test.cgi", { nome: "Carlos", hora: "8pm" },
function(data){
alert("Datos devoltos: " + data);
});
</source>

Exemplo completo:

<source lang="javascript">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo: $.get()</title>
</head>
<body>
<button type="button" id="testButton">Pulsame!</button>

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$('#testButton').click(function(){
$.get(
'reflectData.php',
{a:1, b:2, c:3},
function(data) { alert(data); }
);
});
});
</script>
</body>
</html>
</source>

=== Obtendo datos JSON ===

{{Alerta|¿Qué é JSON?|'''JSON''', é un acrónimo de '''JavaScript Object Notation''', é un formato lixeiro para o intercambio de datos. '''JSON''' é un subconxunto da notación literal de obxectos de JavaScript que non precisa do uso de XML.}}

[[http://es.wikipedia.org/wiki/JSON Máis información sobre JSON]]

Cando a páxina á que lle enviamos datos nos devolve o resultado en formato XML, pode ser unha tarefa complicada o xestionar eses datos. O XML ten como vantaxes a flexibilidade e é un formato axeitado cando traballamos con estructuras xerárquicas de datos.

Cando o XML non nos aporta vantaxes no seu uso, temos á nosa disposición un novo formato que pode sustituilo: o JSON.

O JSON tamén conta coa vantaxe de que representa mellor a estructura dos datos e require menos codificación e procesamento.

Características máis importantes de JSON:
# Representación de información xerarquizada dende javascript.
# É a alternativa máis extendida ó XML, quizais porque é moito máis simple (ainda que non moi humano), e sobre todo é máis rápido de parsear.
# Existen montón de servizos ofertados en JSON (en lugar de con XML): Google (kml), Yahoo(pipes), Flickr...
# É a forma máis rápida de servir a jQuery datos estructurados nunha soa petición.

Exemplo:
{
clave : 'hola',
clave2 : ['mundo','luna','marte']
}

Exemplo de uso de JSON:
<source lang="javascript">
// Partindo deste JSON como resposta do noso servidor:
{
clave : 'hola',
clave2 : ['mundo','luna','marte']
}

$.getJSON( data.php ,{id:$(this).attr( id ),function(j) {
if (j.error) {
alert( Error [ +j.error+ ] ;
return;
}

$( #input1 ).val(j.clave);

for(var idx in j.clave2) {
$( #textarea1 ).append(j.clave2[idx]);
}
});
</source>

Outro exemplo de representación de datos en formato JSON:
<source lang="javascript">
{
"firstName": "John",
"lastName": "Smith",
"address": {"streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "Code": 10021 },
"phoneNumbers": ["212 555-1234","646 555-4567"]
}
</source>

Con jQuery dispomos dispomos da función '''$.getJSON(url, parametros, retorno,tipo)''':

O formato dos parámetros é idéntico á función anterior '''$.get()''' salvo que temos un parámetro adicional '''tipo''', que é opcional e indicará o tipo de datos que devolverá a función de retorno: '''"xml", "html", "script", "json", "jsonp", ou "text"'''.

Outro exemplo de uso:

<source lang="javascript">
$.getJSON("test.php", function(datos){
alert("Datos obtidos en formato JSON: " + datos.address[3].name);
});
</source>

{{Alerta | MOI INTERESANTE|Unha das restriccións de seguridade máis importantes no uso de AJAX, é que soamente permite facer peticións a páxinas localizadas no mesmo dominio. Pois ben con este método $.getJSON , si na función de retorno especificamos unha funcion [[http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ JSONP]] de retorno, poderemos obter datos JSON dun dominio externo ó noso.}}

=== Facendo peticións con POST ===

Se queremos face-la chamada enviando os datos polo método POST empregaremos esta función:

'''$.post(url, parametros, retorno, tipo)'''

O formato dos parámetros é idéntico á función anterior '''$.get()'''.

'''IMPORTANTE:'''

O parámetro opcional '''tipo''', indicará o tipo de datos que devolverá a función de retorno: '''"xml", "html", "script", "json", "jsonp", ou "text"'''.
Ésto é necesario si dende o servidor devólvese un objeto JSON empregando a cabeceira: application/json; charset=utf-8
Deste xeito non teremos que facer o $.parseJSON() ou JSON.parse() cando recibamos ese obxecto JSON.

'''Exemplos:'''

<source lang="javascript">
$.postJSON = function(url, data, callback) {
$.post(url, data, callback, "json");
};

$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");

// Obtén os datos devoltos pola páxina test.php en formato JSON.
// En PHP para devolve-los datos en formato JSON:
// <?php echo json_encode(array("name"=>"John","time"=>"2pm")); ?>
// A función de PHP json_encode está dispoñible a partir da versión 5.2

$.post("test.php", { func: "obterNomeHora" },
function(data){
alert(data.name); // John
alert(data.time); // 2pm
}, "json");
</source>

--[[Usuario:Veiga|Veiga]] ([[Usuario discusión:Veiga|discusión]]) 14:16 5 mar 2015 (CET)

Xestionando peticións GET e POST - Historial de revisiones

Veiga: /* Facendo peticións con POST */