Así AJAX AJAX y AJAX, que es lo que hacemos extensiva en estos días. Se ahorra tiempo, se suma la dinámica y te da una sensación de usar un tipo de software de aplicación de la sensación. No tenemos muchas maneras de utilizar AJAX con muchas bibliotecas. Pero como se puede ver este sitio es para jQuery, vamos a ver los básicos o tal vez algunos usos avanzados de AJAX.
¿Qué necesitamos?
librería jQuery (por supuesto)
Un pequeño script php
Vamos a empezó a hablar. En jQuery, básicamente hay 6 tipos de método para hacer las operaciones de AJAX. Estos son
- $. Ajax (opciones)
- $. Get (url, de datos, de devolución de llamada)
- $. GetJSON (url, de datos, de devolución de llamada)
- $. GetScript (url, callback)
- carga (url, de datos, de devolución de llamada)
- $. Post (url, de datos, de devolución de llamada,
Aparte del número 1, todos los otros métodos de usar $. Ajax internamente. Así que eso significa $. Ajax () es nuestra función de madre para las operaciones de jQuery AJAX. Echemos un vistazo a cómo $. Ajax () se parece a
msg ) ; } } ) ; Respuesta "+ msg);}});
Eso es lo lindo. El parámetro de tipo de toma "GET" o "POST", que significa que puede enviar requestion AJAX como POST o GET (prefiero la POST siempre). El resto de los parámetros son bastante explica por sí mismo, si usted echa un vistazo en el código de nuevo.
Ahora vamos a hacer un pequeño script de AJAX que lee el enlace de etiquetas de hipervínculo (<a>) y carga de la solicitud de algunos elementos div en el documento.
En primer lugar tomamos un HTML normal del documento php que se verá así
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="ES"> <head> <title> prueba de enlace Ajax </ title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script> </ Head> <body> </ Body> </ html>
Ahora vamos a añadir algunos enlaces al documento. Para un tipo mejor menú de aspecto vamos a utilizar una UL> LI y Link. Eso se verá así
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> de carga en la División 1 </ a> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> de carga en la División 2 </ a> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> de carga en la Div. 3 </ a> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> de carga en la Div. 4 </ a> </ li> </ Ul>
Como puede ver hemos puesto enlaces en elementos de la lista dentro de un objeto lista desordenada. Eche un vistazo más de cerca a las propiedades de la etiqueta de <a>. Tenemos href, clase y atributo rel, que se parece en nada diferente a una relación normal. Si usted ve, hemos dado el atributo rel a algunos nombres div saber div1 y div2 .. así sucesivamente. Esto significa que queremos la respuesta de la href para ser cargado en los divs. ¿Cómo hacer eso? Vamos a añadir los divs primero
<span> DIV -1 </ span> <div id="div1" class="content_loader"> </ div> <span> DIV -2 </ span> <div id="div2" class="content_loader"> </ div> <span> DIV -3 </ span> <div id="div3" class="content_loader"> </ div> <span> DIV -4 </ span> <div id="div4" class="content_loader"> </ div>
Y ahora la parte real - que han dado los vínculos de una clase "ajax_link". Sólo vamos a agregar de forma dinámica las acciones AJAX sólo enlaza con un nombre de la clase llamada "ajax_link". El infierno, no todos los enlaces de una página que tiene un efecto ajax, ¿verdad?
Por lo tanto, la carga de documentos que haríamos esto.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { this ) ; $ Current_link = $ (this); $. Ajax ({ , tipo: "mensaje", ( "href" ) , url:. $ current_link attr ("href"), ( e ) { el éxito: function (e) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (e); } }); ; return false; }); });
Voy a explicar un poco el script. El evento document.ready es un evento que se activa al cargar la página. Y luego está la asignación de algún tipo de códigos en el evento de clic de los vínculos que tienen una clase de "ajax_link". Hacer esto current_link $ = $ (this); permite tener el objeto de vínculo actual estará disponible dentro de la función de callback. Y tenemos que
$ ("#" + $ Current_link.attr ("rel")). Html (e)
lo que significa $ ("div_id") html (server_response) y hemos establecido el parámetro url de la función $ ajax de forma dinámica con url:.. $ current_link.attr ("href"). Así que ahora todos los medios "Todos los enlaces que tienen una clase de" ajax_link "- Agregar un controlador de eventos click - a continuación, ejecutar y tomar la petición AJAX enlaces href poperty y cargar la respuesta en un div, cuyo identificador coincide con el atributo" rel "de la vincular ". Y el return false impide que el trabajo enlace como enlace normal 
¿Quieres verlo una acción? Aquí va.
Y usted puede descargar el código fuente , así.
En la siguiente sección de este pequeño tutorial vamos a utilizar la misma cosa pero con un poco de comodidad.
Aplicando el método más fácil
Todo lo que sigue siendo prácticamente la misma. Vamos a cambiar el método de ajax aquí. Así que en lugar de escribir todo el $. Ajax bloque podemos lograr lo mismo con la siguiente.
. ready ( function ( ) { $ (Document). Ready (function () { ) . click ( function ( ) { $ ("A.ajax_link"). Click (function () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (This) attr ("rel")) carga ($ (this) attr ("href").); ; return false; }); });
Es mucho menos complicado, ¿no? El método de carga se carga el contenido ajax dentro del elemento al que está conectado. Si $ ("# somediv_id"). Load ("mypage.php"), que va a tratar de cargar el contenido mypage.php @ s en ella. Bastante simple, ¿eh? Pero te sugiero que te acostumbras a el método principal (que se muestra en la primera parte).
En el archivo zip hay otro archivo llamado ajax2.php que demuestra este methos que tiene el mismo resultado.
Por lo tanto, AJAX no es tan difícil como parece, ¿verdad? Al llegar a ser muy fluida con las operaciones de AJAX, que va a crear magia.
Gracias por leer por cierto.
Comentarios recientes