Curso de jQuery-Ajax

De WikiEducator
Saltar a: navegación, buscar


Ajax

JSON

  • JavaScript Object Notation
  • Se utiliza para almacenar e intercambiar información
  • Más pequeño que XML y más rápido y sencillo de analizar (parsear).
  • Se basa en la sintaxis del propio JavaScript para objetos. 
//Objeto JSON:
{ "nombre":"Pepe" , "apellido":"Pérez" }
 
//Array JSON
{
"estudiantes": [
    { "nombre":"Juan" , "lastName":"Alcocer" }, 
    { "nombre":"Ana" , "lastName":"Serrano" }, 
    { "nombre":"Mario" , "lastName":"Gil" }
  ]
}
//sintáxis en JavaScript:
var estudiantes = [
    { "nombre":"Juan" , "lastName":"Alcocer" }, 
    { "nombre":"Ana" , "lastName":"Serrano" }, 
    { "nombre":"Mario" , "lastName":"Gil" }
  ];

¿Qué es AJAX?

  • AJAX quiere decir Asynchronous JavaScript and XML.
  • Sirve para cargar datos en background y mostrarlos en la web sin necesidad de recargar la página, por eso lo de asíncrono.
  • XHR significa XML HTTP REQUEST y es hablar de lo mismo.
  • Lo podemos ver en el inbox de gmail, en google maps cuando aplicamos el zoom, etc.
  • jQuery y AJAX:
La implementación de AJAX es distinta en función del navegador.
Podremos recibir ficheros de tipo texto, XML, html o JSON mediante http GET o POST.

Cachear AJAX

$.ajaxSetup ({  
    cache: false  
});
  • Será útil usar caché solamente con contenidos estáticos.
  • Es aconsejable indicarlo porque el comportamiento por defecto puede variar en función del navegador.

Cachear AJAX

$.ajaxSetup ({  
    cache: false  
});
  • Será útil usar caché solamente con contenidos estáticos.
  • Es aconsejable indicarlo porque el comportamiento por defecto puede variar en función del navegador.

Método load

  • Es el método más sencillo. 
 <html>
<head>
   <title>Ajax Simple</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("contenido-ajax.html");
   });
})
</script>
</head>
<body>
 
<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>
 
</body>
</html>

Paso de parámetros

  • El método load puede llevar parámetros o una función de callback: 
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
         alert("recibidos los datos por ajax");
      });
   });
})
  • Fichero en php: 
Recibido el siguiente dato:
<br/>
Nombre: <?php echo $_POST["nombre"];?>
<br/>
Edad: <?php echo $_POST["edad"];?>

Con mensaje de "carga"

$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#cargando").css("display", "inline");
      $("#destino").load("pagina-lenta.php", function(){
         $("#cargando").css("display", "none");
      });
   });
})
</script>
  • Fichero en php:

Idioma no válido.

Necesita especificar un idioma como esto: <source lang="html4strict">...</source>

lenguajes soportados para sintaxis remarcada:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<?php
sleep(3);
echo ("He tardado 3 segundos en ejecutar esta p&aactute;gina...");
?>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Ajax&oldid=10092»