Olvidastetuusuariooclave?

Contrasea

Usuario

Entrar

o registrate

Buscar..

Foros Blog Tutoriales Cursos Videotutoriales Comic

Publicauntutorial

QuesCristalab?

Tags

Ququieresbuscar?

Ejemplos

Contctanos

Buscar

Tutoriales / AJAXenjQuery

AJAXenjQuery
PorLunaticLycanthrop el26deJuniode2007 con319,357visitas
HTML,CSSyJavascript OtrostutorialesporLunaticLycanthrop.

43

32

13

LikeTw ittear

LalibreraenJavaScriptjQueryesunadelasmssencillasytilesquesepuedannecesitaralahoradedesar
unsitioweb.Poseecaracteristicaspotentes(selectoresdeCSS,XPath,conelpoderdejavascriptdecrear
variablesyfuncionesqueinteractuenconeldocumento)yesmuyfcildeusar,yesalavezmuyliviana.Adem
traeincorporadasfuncionesadicionales,comoAJAX,manipulaciondelDOMydetecciondenavegadores.

EnestetutorialvamosaestudiarelusodejQueryparaAJAX,conlasfacilidadesyparametrosdeopcinquen
brinda.

Requerimientos
HaberledoeltutorialdeAJAX
HaberledoeltutorialdeusobsicodejQuery

ComousarAJAXenjQuery?
jQuerytraeincorporadoun"mdulo"deAJAX,quehacemuyfacillautilizacindeeste.Accedemosalafunciondelasiguientemanera:
$(document).ready(function(){
$.ajax({
});
});

Estesepuedeponerdelaformaexpuestaarribaoenunavariable(comoen"myajax=$.ajax({})").

Parmetros
jQueryadmiteungrannumerodeparmetrosparaajax.(Hayejemplosdecdigodespuesdelatabla):
Parmetro
async

Explicacion
Determinaquelacargadadelobjetoajaxsesncronaoasncrona.Porlogeneralasncronaesmstil,
yaquelaformasncroapuedetrabarelnavegadorhastaquelacargaestecompleta

Valores
Boolean:truepordefecto

beforeSend Permitellamarunafuncinantesdemandarelobjetoajax.

Funcin:Elunicoparametroelelobje

complete

Funcion:Losvaloresqueretornasone
objetoXMLHttpRequestyunstringqu
indicaelresultado.

Esunafuncionqueseejecutacuandoelllamadoalajaxestacompleto.Permitesabersifueexistoso

contentType Seusacuandosemandandatosalosservidoresamododeencabezado.

data

dataType

Seusaparaespecificardatosamandar.Estostienenlasiguienteforma:foo=bar&foo2=bar2.Silos
datosaenviarsonunvector(array)jQuerylosconvierteavariosvaloresconunmismonombre(si
foo["alt1","alt2"],foo="alt1"&foo="alt2")

Indicaeltipodedatosquesevanallamar.SinoseespecificajQueryautomaticamenteencontrarel
tipobasadoenelheaderdelarchivollamado(perotomamastiempoencargar,asiqueespecificalo
u_u)

String:"application/xwwwform
urlencoded"funcionaperfectamente
Array/Stringconlaformaantes
mencionada.

"xml":DevuelveundocumentoXM
"html":DevuelveHTMLcontextop
yrespetalasetiquetas.
"script":EvaluaelJavaScripty
devuelvetextoplano.
"json":EvalualarespuestaJSONy
devuelveunobjetoJavascript

Seejecutasiocurreunerroralllamarelarchivo.Devuelve3parametros:Elobjeto,unstringconelerror,
yunobjetoadicionaldeerror,siesteocurre.

error

Permitehacerqueelobjetoajaxobedezcaodesobedezcalasreglasparaobjetosajaxqueelusuario

global

pone.

ifModified

Permitequeelobjetoajaxseactivesolosilapaginaacargarsehamodificado.

processData

Pordefecto,cadaobjetoquenoseaunstringyseapasadodeotrodocumento,seratransformadoen
cadena.Paraevitarqueestopase,esteparametrosepuedeponerenfalse

Boolean:Pordefectotrue
Boolean:Pordefectofalse
Boolean:Pordefectotrue.
Funcin:Recibelosdatosquefueron

success

Permiteejecutarcdigoalserexitosounllamado.

timeout

Permitedefiniruntiempodeesperaantesdeejecutarunobjetoajax.

Nemro:Unnmerodemilisegundos

type

Indicaelmtodoquesevaausar

"GET"o"POST"

url

Indicalaurldelaquevaacargardatoselobjetoajax.

String:Laurllocaldeldocumento.

llamados

Ejemplos
Ahora,despuesdeveresacantidaddeparametrostantiles,pasemosalapartecool:Vercomoseusan
$.ajax({
url: "mi-pagina-cool.html",
success: function(datos){
alert(datos);
}
});

Elcdigomnimoquenecesitamosparahacerfuncionarajax.Sencilloyefectivo.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
async:false;
});

VamosacargarunJavaScript,usandolosparametrostype,url,dataTypeyasync.DataTypeesnecesriopuesdeotromodoelscriptnoseejecutara.Tamb
esbuenousarasyncen"false"sielscriptesvital:Asielusuarionopodrainteractuarhastaquesecargue.
$.ajax({
type: "POST",
url: "formulario.php",
data: "nombre=Juan&apellido=Luna",
success: function(datos){
alert( "Se guardaron los datos: " + datos);
}
});

Insertamosdatosenunapaginadephpdeformamuysencilla.

$.ajax({
url: "introduccion-a-jquery.htm",
async:true,
beforeSend: function(objeto){
alert("Adis, me voy a ejecutar");
},
complete: function(objeto, exito){
alert("Me acabo de completar")
if(exito=="success"){
alert("Y con xito");
}
},
contentType: "application/x-www-form-urlencoded",
dataType: "html",
error: function(objeto, quepaso, otroobj){
alert("Estas viendo esto por que fall");
alert("Pas lo siguiente: "+quepaso);
},
global: true,
ifModified: false,
processData:true,
success: function(datos){
alert(datos);
},
timeout: 3000,
type: "GET"
});

Unllamadoajaxcontodoslosparametros(menosdata,yaquenoibaamandardatos)yconsusopcionesendefault.Verdadquesepuedehacermucho?

Opcionespordefectoparalosobjetosajax
jQuerytambiennosdalaopciondeaadirparametrospordefectoatodoslosajaxquecarguemos,conlafuncion$.ajaxSetupylosparametrosyavistos:
$.ajaxSetup( {
url: "/xmlhttp/",
type: "POST",
contentType: "application/xhtml+xml"
} );

Estohariaquelosajaxllamadosbuscaransusarchivosacargarenlaruta"/xmlhttp/",conmtodo"POST"ylosjalaracomo"application/xhtml+xml".Deesta
manerasepuedeahorrarmuchotiempoyespacioalnotenerqueescribirlomismoentodoslosllamados.

Problemas
Elproblemamsfrecuentequeocurreconajaxescuandosetratadecargarporesteunapaginadeotroservidor.Porcuestionesdeseguridad,algunos
navegadoresnopermitenlaejecucindeestetipodellamados.Sinembargo,haytcnicas(hacks)quesepuedenusarparausarajaxcrossdomain.
Lamentablementenohablardeellashoy,peropuedesbuscarporajaxcrossdomain.

Bueno,estefuetodoeltutorialdeajaxporjQueryporelmomento.Existenotrasfunciones,como$.post()y$.get(),quesonmassencillasperomenosc00l,qu
tratarenotrotuto.
Porsiacaso,puedenrevisarladocumentacinoficialdeajaxenjQuery(linkeningls):http://docs.jquery.com/Ajax

Enviauncomentario

Cmocrearunmendesplegablecon
Jquery

Recargarpaginaalcerrarcolorboxo
nyroModal

LectordefeedsRSSenAJAXconJQu

Publicatucomentario

opuedes...

Elautordeesteartculohacerradoloscomentarios.Sitienespreguntasocomentarios,puedeshacerlos
enelforo
Entraalforoyparticipaenladiscusin

Estsregistradoen
Cristalabyquieres
publicartuURLyavatar?
Iniciasesin

Noestsregistradoan
peroquiereshacerloante
depublicartucomentario
Registrate

Blog Foros Tutoriales TutorialesdeFlash Ejemplos.fla Anime Videotutoriales Cursos CursodeFlash CursodeHTML Tags
CristalabfuncionagraciasaInfranetworking