Staff en línea
Últimos temas
Nociones básicas sobre AJAX Origin10[Ocio] Contemos hasta el 5000
por Fibo Mar Nov 12, 2019 7:51 am

Nociones básicas sobre AJAX Origin10[Recursos] Paquetes de iconos
por Fibo Sáb Nov 09, 2019 9:46 pm

Nociones básicas sobre AJAX
Tema iniciado por y Añadir a favoritos

Nociones básicas sobre AJAX 
el Miér Ene 14, 2015 10:29 pm
staff
Nociones básicas sobre AJAX en jQuery, cómo se organizan los métodos de AJAX y cómo debemos utilizarlos según nuestras necesidades.
Uno de los objetivos principales que los desarrolladores tenemos cuando decidimos usar jQuery es implementar comportamientos AJAX para crear aplicaciones web más parecidas a las aplicaciones de escritorio, lo que se llama habitualmente como RIA o la experiencia de usuario enriquecida.
Nociones básicas sobre AJAX 2730
En jQuery existen diversas funciones para producir AJAX, con diversas aproximaciones que nos ofrecen soluciones diferentes y que serán acordes a distintos tipos de necesidades. En este artículo quiero ofrecer una guía básica que nos sirva de introducción a AJAX en el Manual de jQuery y que nos ayude a saber cuáles son los métodos disponibles y en qué casos nos pueden servir.

AJAX alto­ nivel y bajo ­nivel




En jQuery existen métodos AJAX con diversos niveles de complejidad. En la propia documentación de AJAX, los creadores los clasifican en métodos de "alto nivel" y "bajo nivel", haciendo un símil con lo que son los lenguajes de programación de alto y bajo nivel.
[info]
Nota: En programación decimos que un lenguaje es de bajo nivel cuando es más cercano a la máquina. Por ejemplo, ensamblador es de bajo nivel, porque se programa con instrucciones muy básicas, cercanas al lenguaje de la máquina. Los lenguajes de alto nivel son más cercanos al lenguaje de las personas y son por tanto más fáciles de usar. Los lenguajes de programación que usamos normalmente son de alto nivel y dentro de ellos habría incluso sub­clasificaciones como C, que aun siendo de alto nivel, es de nivel más cercano a la máquina que por ejemplo Javascript.
Al decir "funciones de bajo nivel" no significa que sean poco poderosas o poco útiles, sino que debemos entenderlo justamente al contrario. Son más cercanas a lo que sería el AJAX del navegador, más personalizables y más potentes. Las de alto nivel tienen una interfaz y uso muchísimo más simple, pero son menos potentes porque están preparadas para un uso en concreto.
La verdad es que casi todas las funciones de jQuery son de alto nivel, menos jQuery.AJAX() que es de bajo nivel, junto con otros métodos que normalmente no vamos a usar. Es bueno conocer bien jQuery.AJAX() porque es un método con el que podemos realizar cualquier tipo de comportamiento AJAX. También la encontraremos documentada o usada como $.AJAX() y yo la llamo "AJAX todopoderoso" porque con ella podremos realizar cualquier tipo de uso que podamos necesitar.
Nota: sabemos que $ es un sinónimo de jQuery, por lo tanto decir jQuery.AJAX() es lo mismo que $.AJAX().
[/info]


Ahora bien, lo cierto es que si sabemos escoger las funciones de alto nivel y configurarlas bien, raramente vamos a necesitar usar la función de bajo nivel $.AJAX(). Aunque también podríamos darle la vuelta a la tortilla y decir lo contrario, si sabemos usar $.AJAX() nunca necesitaríamos usar las funciones de alto nivel. Aunque esto es verdad, a veces conviene usar los comportamientos de alto nivel porque generan menos código y nuestros scripts serán menos pesados y también más entendibles.
Las funciones de alto nivel tienen especializaciones para realizar diversos tipos de conexiones AJAX y a su vez también tienen distintos niveles de complejidad. Por ejemplo, la función .load() simplemente carga un texto en un elemento del HTML, es solo para ese uso, no podemos enviar datos al servidor por POST y no admite que el servidor te dé la respuesta en JSON, pero es extremadamente potente, porque con una única llamada al método resuelvo todo lo que se necesita de una única vez. Sin embargo, hay otras funciones que todavía siendo sencillas tienen más posibilidades, como jQuery.post() que nos permite configurar una llamada AJAX que envíe datos al servidor por el método "post".
[ok]
Nota: En la documentación, los métodos que estoy llamando como de "alto nivel" los encontramos clasificados como "Shorthand Methods" y como nos da a entender, son algo así como atajos rápidos para invocar funcionalidades AJAX más específicas.
[/ok]


Métodos AJAX jQuery, uno a uno




.load() 
Este método nos sirve para cargar datos en un elemento de la página. Simplemente le indicamos la URL del archivo que queremos traernos por AJAX. El propio método actualiza el HTML del elemento sobre el que estamos invocando .load(). No acepta más parámetros y no realiza más acciones de las mencionadas.

[ic]$("#elemento").load("pagina.html"); 
[/ic]


Si queremos enviar datos por GET a una página, podríamos usar .load() indicando esos datos "a mano" en la URL del archivo que estamos accediendo, pero existen métodos más indicados para hacer ésto.

[ic]$("#elemento").load("pagina.php?dato=222");
[/ic]


El método load() se encarga de todo, hacer la solicitud al servidor y enviar el HTML de la respuesta al contenedor sobre el que hemos invocado .load(). 
$.get() y $.post() 
Dos métodos hermanos que hacen prácticamente lo mismo: una conexión AJAX enviando datos al servidor. La única diferencia es que $.get() envía los datos por GET (en la URL) y $.post() los envía por POST (en las cabeceras del HTTP).
A estos métodos les enviamos un juego de parámetros un poco más complejo, aunque solamente es obligatorio el primero de ellos.
[ic]
$.get("url.php", {
dato: "valor",

}, function(respuesta){
dato2: "valor2"

$( "#resultado" ).html( data );
}, "html");
[/ic]


Esto llamaría a la URL "url.php" pasando por método GET los datos y valores indicados en el segundo parámetro. Cuando se reciba la respuesta se ejecutará la función indicada en el tercer parámetro y el dato que se espera recibir del servidor como respuesta tiene el formato indicado en el cuarto parámetro, existiendo varios formatos de respuesta, como JSON, script, HTML o XML.
Como decía, $.post() es exactamente igual, pero los datos los enviará jQuery con el método POST, por lo demás, todo lo que aprendemos sobre $.get() lo podemos aplicar a $.post().
[ok]
Nota: se debe apreciar que .load() se invoca sobre un objeto jQuery, que tenga uno o varios elementos de la página, donde queremos cargar un contenido que traemos por AJAX. Sin embargo, para ejecutar un método como $.post() o $.get() lo hacemos a partir de la función $ o función jQuery, por lo tanto esta llamada no está asociada a un elemento dado de la página. En la función que se ejecuta cuando se produce el resultado de la solicitud AJAX debemos seleccionar el elemento o elementos donde queremos mostrar los resultados.
Como utilidad adicional, estos métodos que estamos viendo ahora devuelven un "objeto AJAX" que podemos usar para realizar nuevas acciones que configuren nuestra solicitud. Por ejemplo, podremos definir cosas como qué hacer cuando la solicitud se ejecute si se produce un error, etc.
[/ok]


[ic]
var objetoAJAX = $.get( "loquesea.php", function() {
//hacer algo cuando hay respuesta del AJAX
});

//hacer otra cosa cuando hay respuesta correcta de la solicitud
objetoAJAX.done(function() {
})
objetoAJAX.fail(function() {

objetoAJAX.always(function() {
//hacer algo cuando se produce un error
})
//hacer algo tanto en error como en éxito
});
[/ic]

$.getScript() 
Se trata de otro método "shorthand", interesante por ser un atajo para cargar un script Javascript y ponerlo en ejecución cuando se haya recibido correctamente. Podemos configurar un envío de datos y este método lo hará por GET, igual que se enviaban en $.get(). Podemos decir, en resumen, que se usa igual que $.get(), pero la resuesta del servidor estás diciéndole que se recibirá en un script Javascript que se debe ejecutar según se tenga.
$.getJSON() 
Es otro "shorthand method" bastante utilizado que recibe una respuesta en JSON. Es exactamente igual que lo comentado con "getScript()", solo que en la respuesta recibiremos un objeto Javascript. El contenido del objeto nos lo debe enviar el servidor como respuesta, siempre en un JSON que jQuery de manera interna se encargará de interpretar y convertir en un objeto nativo de Javascript, al que podremos acceder para recuperar cualquiera de sus datos.

Eventos globales de AJAX




Hay otra clasificación de métodos en la documentación de jQuery que se llama "Global AJAX Event Handlers", que son eventos globales que podemos asignar a cualquier solicitud AJAX que se produzca en una página.
La utilidad que tienen es que se definen una única vez y afectan a todas las llamadas AJAX que podamos realizar en esa página, de modo que podemos ahorrarnos la parte de configuración de diversos comportamientos típicos, como los mensajes de "cargando...", en cada una de las funciones AJAX. Es decir, los defines una vez y ya valen para todas las llamadas AJAX.
Existen eventos para cuando se produce una solicitud, como para cuando se produce un error, éxito en la respuesta, etc. Estos eventos los añades al objeto jQuery del documento extendido.
[ic]
$( document ).AJAXError(function() {
alert("error en una solicitud AJAX (no me preguntes en cuál)");
});
[/ic]


$.AJAX()



Todo lo que hemos visto que se puede hacer con las funciones de más alto nivel lo podemos implementar con la función $.AJAX(). La potencia de ese método es impresionante y permite realizar diversas configuraciones específicas que no podríamos hacer por los métodos shorthand, como por ejemplo configurar un mecanismo para que una solicitud AJAX no pase nunca por la caché del navegador, utilizar crossDoman en una solicitud como JSONP, controlar diversas respuestas del servidor específicas como errores 404, definir un tiempo máximo de espera para una solicitud AJAX, indicar un nombre de usuario y contraseña si estamos conectando con un servidor que requiera autenticación HTTP, etc.
El estudio de este método es interesante y no nos costará mucho cuando ya conozcamos bastante los métodos de atajos.


Funciones como ayudas adicionales



En la categoría de "Helper Functions" de AJAX en jQuery encontraremos varias funciones para hacer serialización de formularios, arrays, objetos, etc. Es común que los datos que queramos enviar al servidor estén en estructuras como objetos o arrays, incluso puede que estén simplemente escritos en campos de formulario. Para facilitarnos el trabajo en estas situaciones habituales existen métodos que nos permiten, en una simple llamada, obtener una cadena que realice una serializacion de estos objetos arrays o formularios, que podemos enviar de una manera inmediata en una solicitud HTTP.
El ejemplo más típico es la serialización de un formulario.

[ic]$( "#miformulario ).serialize()[/ic]

La respuesta a este método serialize() la puedes usar directamente como datos que envias al servidor al hacer una llamada AJAX.

[ic]$.post(url, $( "#miformulario ).serialize(), FuncionExito);[/ic]

Conclusión




Lo que has podido leer en este artículo te ofrecerá una visión global de todo lo que hay para el trabajo con AJAX en jQuery. Es bueno tener una idea previa sobre lo que te vas a encontrar para a partir de aquí saber qué funciones podrán ser las que te interesen para resolver tus problemas.
Podrás encontrar más información sobre AJAX en jQuery en los siguientes artículos de este manual. No dejes de practicar y documentarte también desde la documentación oficial de la librería, en donde encontrarás siempre contenido actualizado y nuevos ejemplos con los que entender las utilidades que se nos ofrece
.
Chalo
Chalo

¿Que estoy pensando? :

saquen el wato..... [table class=fecha_up][td]Se modifico:8/11/19 - 9:09 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/374/37476.png


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

7022


Puntos :

9140


Me gusta :

1049


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.