Busca instantânea com Ajax – iMasters
-
Upload
isaias-oliveira -
Category
Documents
-
view
185 -
download
2
Transcript of Busca instantânea com Ajax – iMasters
12/04/12Abril.com MaissitesAbril
Busca instantnea com Ajax
iMastersAbrilMdia Distribuio Grfica AbrilEducao Assine
GrupoAbril
PORTAL
AGENDA
MULTIMDIA
BOX
JOBS
COLETIVOS
IMASTERSPRO
CODE
F RUM
FaaLogin/Ca
Ajax
Pesquisar...
Ajax
BuscainstantneacomAjaxQuarta-feira, 11/01/2006 s 12h00, por Leandro Vieira
Olatodos!Hojefalareisobreumassuntoforadacoluna,mas,sobrealgoqueestem grandeascensonodesenvolvimentoweb.FalareisobreAjax,maisespecificamentesobre comodesenvolverumabuscainstantneacomessametodologia.Deantemo,vejaum exemplodessabuscaemfuncionamento,podendoassim,entendermelhoroqueiremos desenvolver. PartireidoprincpioquevocjpossuiumanoosobreAjax,ecasoessenosejaoseu caso,vejaesteslinksparacompreendereterumanoomelhordoassunto: Ajax:UmaNovaTcnicaparaAplicaesWeb AjaxVisoGeral(iMasters) VriostutoriaissobreAjax ResultadodoGoogleparaAjax Nossosingredientesparaodesenvolvimentodabuscainstantneasero: 01Umapgina(x)HTMLcontendooformulrioeaexibiodoresultadodabusca (buscaInstantanea.htm) 02Algunscdigosemjavascriptparaincrementarmosoajax(buscaInstantanea.js) 03DuaspginasemPHPresponsveisemrealizarabuscanobancodedados(busca.php ebuscaInstantanea.php).Vocsentenderooporquededuaspginas). Abuscafuncionarmesmoseojavascriptdoclienteestiverdesabilitado.Assim,tornamosa maisacessvel. Paraoartigonoficarmuitograndeecansativo,voufazerdaseguinteforma:desenvolverei aspginaseexplicareicadaumadelas.JquevoctemnoosobreAjaxecomcerteza sobredesenvolvimentoweb,nohoporquedesteartigosermuitominucioso. Primeirapgina,buscaInstantanea.htm,(cliquenonomeparabaixla).Essapginasuper simples,masvamosdestrinla:nohead()temosaestilizaoCSSeolinkparao script,buscaInstantanea.js.Atravsdatag.nocorpodapgina(),temoso formulrioparaarealizaodabuscaeumadivcomoatributoID(resultadoBusca)setado, paraexibirmosoresultadoepodermosmanipullaatravsdonossoscript. Nocampodetexto,utilizadoparadigitarotermodabusca,acionamosafuno: buscaInstantanea()atravsdoevento:onkeyup.(Parasabermaissobreoseventosem javascript,visite:http://www.w3.org/TR/REChtml40/interact/scripts.html#h18.2.3)CURSOSONLINE LTIMASNOTCIASVERMAISNOTCIAS
MVCemPHPnaprtica(Construindo sistemadepedidos)
Aaplicaodesenvolvidanocursoumsistem pedidoscomcarrinhodecomprasondeousu podeadicionar,removeremodificaraquantid produtosdeseucarrinho.
Planejandocampanhasdeemailma naprtica
OcursodeEmailMarketingensinaatrabalha ferramentadeacordocomasrecomendaes tcnicas,respeitandoasdiretrizesdoCdigod Autorregulamentao,conformeaslimitaes programasdeemail.
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
1/7
12/04/12
Busca instantnea com Ajax
iMasters
Odiferencialdessapgina,estnautilizaodatag.Paraaquelesqueestocom ojavascriptdobrowserativadoobotodesubmitficaoculto,sendoexibidoapenasparaos quenotemsuporteaessalinguagemclientside.Enessecasoosdadosdoformulrio serosubmetidoparaapginabusca.php. Agora,onossoscript"mgico",buscaInstantanea.js,(cliquenonomeparabaixlo).Embora oscriptestejatodocomentado,valedissertarumpoucosobreele. Oscript(buscaInstantanea.js)seiniciacomumafunodenomiada:openAjax(),quetemo objetivodeverificaraversoxmlhttp,realizandoumaanlisedomtodoutilizadopelo browseremquesto.Veja:
TcnicasdeProduoeEstratgias Conte doDigital
Omercadoestembuscadeconte dodema Aprendaaproduzirconte dodigitalcomquali garantaseulugarnomercadocomestecurso
Asegundafuno,abuscaInstantanea(),responsvelportodoodinmismodorecurso queserdesenvolvido.Vamoscomprendla: VerificamosseobrowsercomplacentecomDOMdoW3C.
Criamosduasvariveis:vartermo,varexibeResultado.Aprimeirapegaotermodigitadona caixadebuscaasegundarefereseaoIDdadivqueexibiroresultadodabusca.Observe:
Nestapartedoscript:
Verificamosseacaixadebuscaestvaziaouseelacontmnomnimotrscaracteres. Assimdiminumosasobrecarganoservidor. ApsiniciarmosoAjax,indicamosomtodo(GET)comoqualtrabalharemos,aURLque realizarasrequisiesnoservidoreoterceiroparmetrocomoTRUE,paratrabalharmosde formaassncrona.Vejaumprintdessaparte:
AsrequisiesemAjaxpossuemcincoestados,sendoeles: 0(aindanoinicializado) 1(carregando) 2(carregado) 3(interativo) 4(completo)
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
2/7
12/04/12
Busca instantnea com Ajax
iMasters
Trabalharemoscomdoisdeles:oestado1,paraexibirmosumamensagemdotipo: carregando...,aousurio.Eoestado4quesignificaqueesttudoprontoparatrabalharmos. Vejaoprintnovamente:
Agora,checaremosostatusdapgina.Veja:
Ostatus200siginificaOK,ouseja,arequisiofoisucedida.(Paraconhecerosdemais StatusHTTP,visite:http://www.w3.org/Protocols/rfc2616/rfc2616sec10.html) Agoracriaremosumavarivelquearmazenarosdadosqueoservidornosenviou. Lembrandoquehdoismetdosparaessemarzenamento,sendoeles: aja .responseTe tretornaosdadosdoservidorcomoumastringdetexto aja .responseXMLretornoosdadosdoservidorcomoumdocumentoXML. Apsrealizamosummaceteparaosacentos,semele(macete)teremossriosproblemas. Nota:emmeublogpessoal,faleidetalhamentesobreestemaceteparasetrabalharcom acentosemAjax,sedesejar,leiaopost:Ajaxeosacentos. Apsrecebermososdadosefazermosotratamentoparaosacentos,iremos"jogar"esses dadosretornadopeloservidor,ouseja,oresultadodabusca,dentrodadivquefoi referenciadanavarivel:exibeResultado.Vejaoprintfinal:
Agora,desenvolveremosaspginasquerealizaroabuscanobancodedados.Noinciodo artigoeudisseavocqueexplicariaoporquededuaspginasdebusca.Entovamosl. Apginabusca.phpumapginanormalcomoasoutrasquevoctemcostumede desenvolver.Elaserutilizadapelosusuriosquenavagamcombrowsersemsuporteao javascriptoucomomesmodesativado.JapginabuscaInstantanea.phpserutilizadapelo scriptquedesenvolvemos.Adiferenaentreasduas,queessa ltimafoiadaptadapara resolveroproblemasdosacentosquandotrabalhamoscomAjaxeelanocontmuma estruturacompletacome.Somente. InstruoSQLparagerarepopularatabelautilizada. Vejaapginabusca.php VejaapginabuscaInstantanea.php BaixeabuscaInstantneacompleta. Aspginasdebuscaestobemsimples,mas,vamosanalislas.AinstruoSQL: $query_rsBusca=sprintf("SELECT*FROMbusca_instantaneaWHEREtuto_tituloLIKE "%%%s%%"ORtuto_descLIKE"%%%s%%"LIMIT5", $colname_rsBusca,$colname_rsBusca)
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
3/7
12/04/12
Busca instantnea com Ajax
iMasters
Essaqueryselecionanomximocincoregistros(LIMIT5)databelabusca_instantanea,onde (WHERE)ottulo(tuto_titulo)eadescrio(tuto_desc)contmotermopresentenavarivel $colname_rsBusca,quearmazenaotermoinformadanacaixadebusca. Norestantedoscript,temosvriosechocomoeste: (pginabusca.php) (pginabuscaInstantanea.php) Observaes: Procureimostrarlhesomtodoqueutilizeiparadesenvolveresserecurso.Sevoco compreendeu,vaisesentirmaisseguroparaelaborarnovosrecursos,eporfavorme apresentehein!(risos). Leiaoslinksrelacionadosacima.Humagrandezaemconhecimentodentreeles LeiaopostemquefalosobreAjaxeosacentos E,esperoquetenhamgostadodoartigo.Umabraoeatoprximo.Tweet0
LeandroVieira trabalhacominternetdesde2002eatualmentediretoregerentedeprojetos daApiki,empresarefernciaemWordPressnoBrasil.palestranteecriador depluginsjQueryquesorefernciasmundiais,usadospelaprpria FundaoMozilla.autordediversoscursosdeWordPress,PHP,AJAXe jQuery. Pginadoautor Email Leia os ltimos artigos publicados por leandro_vieira OpenGraphProtocoleFacebook Oqueesperardaverso3.0doWordPress? CriandomenusepginasadministrativasnoWordPress Conheaautilidadedasfuneswp_headewp_footernostemasWordPress ConfiguraesavanadasparaoWordPress
21COMENT RIOS
COMENTETAMBM
hogs Ajaxmtobom!Parabenspeloartigo,vouverseeuescrevoalgumacoisaajax:)abrao leandrim,SUCESSO!H6anos Responder
JooRicardodeAlbuquerqueSi Valeubrother,quebomquegostou.Ficareinoaguardodoseuartigo.Umabraoedivirta seanasfrias,heheh.H6anos Responder
Laybows Serqexistealgoparecidopararealizarumabuscaembasedetextos?Arquivos.txt? Precisomuitodealgoassim.:]H6anos Responder
vittor Aicara,noIEfuncionou10,nofirefoxelenofuncionou!?!?oquetemosquemudar?!H6anos Responder
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
4/7
12/04/12
Busca instantnea com Ajax
iMasters
Jo oRicardodeAlbuquerqueSi OlVittor,essesistemaboitestadonoIE,Firefox,OperaeNetscapeetodoselesfuncionou perfeitamente. VejanoJavaScriptconsoldedoFFevejaoerroqueestocorrendo.H6anos Responder
vittor Opa,encontreioerro,euestavausandoocampoassim <inputname="cpf"onkeyup="buscacpf()"type="text"class="edit"size="20" maxlength="20"> noIEfuncionava,poremnoFFno! quandoeucoloquei <inputname="cpf"id="cpf"onkeyup="buscacpf()"type="text"class="edit"size="20" maxlength="20"> Funcionou! oid=""quearrumouaminhavida! ObrigadoLeandroeataprximaH6anos Responder
MaiconSantos Ola... TesteinoIEedeubeleza... MaisnoOpera8.5(navegadorqueeuuso)naumfunfo... Alguemtemalgumadica??H6anos Responder
Jo oRicardodeAlbuquerqueSi Cara,eutambmtesteinoOpera,eaquifunfoueestfunfandolegal.H6anos Responder
LawrenceCarvalho CadoarquivobuscaInstantanea.js?Noconsigofazeroseudownload...H6anos Responder
Jo oRicardodeAlbuquerqueSi OlLuis, Baixeoarquivocompleto,aqui: http://www.imasters.com.br/conteudo2/lvieira/27/buscaInstantanea.zipH6anos Responder
FredTavares Caragosteid+desse,temcomofazerparabuscarnaweb?H6anos Responder
Jo oRicardodeAlbuquerqueSi Cara,setempossibilidadeeuaindanoconheo,mascomcertezaseriaumsistemabem sobrecarregado.Imagine,abuscadogooglenessesistema.Umabrao.H6anos Responder
carlosmarian Ol,Leandro Buscamuitolegal.Comopossocolocarpaginao?H6anos Responder
ReneSarli Comofaoparacadastrareexcluirosdadosdabusca?H5anos Responder
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
5/7
12/04/12
Busca instantnea com Ajax
iMasters
RobsonCabral Estabuscafoimaioradiantonaminhavida.ValeuLeandro.H5anos Responder
JulianoEloiFelisberto ParabnsLeandropeloTutorial. EstD+. Eratudoqueeuprecissava,agoraficamaisfcilimplementaralgumasrotinasnosistema queestoudesenvolvendo. Esperoumdiapoderdivulgaloassimqueestiverprontoepodercontribuircomalguns tutoriaistambm. Vcestdeparabns.H3anos Responder
LeandroVieira Obrigado!Abraos.H3anos Responder
LeandroVieira Obrigado!Abraos.H3anos Responder
RafaelRanzolinPedroso Ol,parabnspeloartigo,mastemalgunslinksqueestooffline,serquevocpoderia postarosarquviosparadownload? Obrigado.H3anos Responder
PriscilaRicardoAndrade Caras assimeuaprendoajax,maravilha!H3anos Responder
Alan Leandro,PorqueoresultadodeminhabuscaestcomerronosacentosH1ano Responder
QUALASUAOPINI O?
Escrevaseucomentrioaqui...
PARCEIROS
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
6/7
12/04/12
Busca instantnea com Ajax
iMasters
2001iMastersFFPAInformticaLtda Todososdireitosreservados.
SobreoiMa Polticadep Anuncie Faleconosc
imasters.com.br/artigo/3804/ajax/busca-instantanea-com-ajax
7/7