Busca Instantânea Com Ajax - Imasters

12/04/12
Abril.com MaissitesAbril
Busca instantnea com Ajax
iMasters
AbrilMdia Distribuio Grfica AbrilEducao Assine
GrupoAbril
PORTAL
AGENDA
MULTIMDIA
BOX
JOBS
COLETIVOS
IMASTERSPRO
CODE
F RUM
FaaLogin/Ca
Ajax
Pesquisar...
Ajax
BuscainstantneacomAjax
Quarta-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(<head>)temosaestilizaoCSSeolinkparao script,buscaInstantanea.js.Atravsdatag<script>.nocorpodapgina(<body>),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 LTIMASNOTCIAS
VERMAISNOTCIAS
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
iMasters
Odiferencialdessapgina,estnautilizaodatag<noscript>.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)
2/7
12/04/12
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)
3/7
12/04/12
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.
Tweet
0
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
4/7
12/04/12
iMasters
Jo oRicardodeAlbuquerqueSi OlVittor,essesistemaboitestadonoIE,Firefox,OperaeNetscapeetodoselesfuncionou perfeitamente. VejanoJavaScriptconsoldedoFFevejaoerroqueestocorrendo.

H6anos Responder
vittor Opa,encontreioerro,euestavausandoocampoassim &ltinputname="cpf"onkeyup="buscacpf()"type="text"class="edit"size="20" maxlength="20"&gt noIEfuncionava,poremnoFFno! quandoeucoloquei &ltinputname="cpf"id="cpf"onkeyup="buscacpf()"type="text"class="edit"size="20" maxlength="20"&gt Funcionou! oid=""quearrumouaminhavida! ObrigadoLeandroeataprxima
H6anos 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.zip

H6anos 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
5/7
12/04/12
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,Porqueoresultadodeminhabuscaestcomerronosacentos
H1ano Responder
QUALASUAOPINI O?
Escrevaseucomentrioaqui...
PARCEIROS
6/7
12/04/12
iMasters
2001iMastersFFPAInformticaLtda Todososdireitosreservados.
SobreoiMa Polticadep Anuncie Faleconosc
7/7

Busca Instantânea Com Ajax - Imasters

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Busca Instantânea Com Ajax - Imasters

Diunggah oleh

Hak Cipta:

Format Tersedia

12/04/12

Busca instantnea com Ajax

Aaplicaodesenvolvidanocursoumsistem pedidoscomcarrinhodecomprasondeousu podeadicionar,removeremodificaraquantid produtosdeseucarrinho.

OcursodeEmailMarketingensinaatrabalha ferramentadeacordocomasrecomendaes tcnicas,respeitandoasdiretrizesdoCdigod Autorregulamentao,conformeaslimitaes programasdeemail.

Busca instantnea com Ajax

TcnicasdeProduoeEstratgias Conte doDigital

Omercadoestembuscadeconte dodema Aprendaaproduzirconte dodigitalcomquali garantaseulugarnomercadocomestecurso

Asegundafuno,abuscaInstantanea(),responsvelportodoodinmismodorecurso queserdesenvolvido.Vamoscomprendla: VerificamosseobrowsercomplacentecomDOMdoW3C.

Verificamosseacaixadebuscaestvaziaouseelacontmnomnimotrscaracteres. Assimdiminumosasobrecarganoservidor. ApsiniciarmosoAjax,indicamosomtodo(GET)comoqualtrabalharemos,aURLque realizarasrequisiesnoservidoreoterceiroparmetrocomoTRUE,paratrabalharmosde formaassncrona.Vejaumprintdessaparte:

AsrequisiesemAjaxpossuemcincoestados,sendoeles: 0(aindanoinicializado) 1(carregando) 2(carregado) 3(interativo) 4(completo)

Busca instantnea com Ajax

Trabalharemoscomdoisdeles:oestado1,paraexibirmosumamensagemdotipo: carregando...,aousurio.Eoestado4quesignificaqueesttudoprontoparatrabalharmos. Vejaoprintnovamente:

Busca instantnea com Ajax

hogs Ajaxmtobom!Parabenspeloartigo,vouverseeuescrevoalgumacoisaajax:)abrao leandrim,SUCESSO!

JooRicardodeAlbuquerqueSi Valeubrother,quebomquegostou.Ficareinoaguardodoseuartigo.Umabraoedivirta seanasfrias,heheh.

Laybows Serqexistealgoparecidopararealizarumabuscaembasedetextos?Arquivos.txt? Precisomuitodealgoassim.:]

Busca instantnea com Ajax

Jo oRicardodeAlbuquerqueSi OlVittor,essesistemaboitestadonoIE,Firefox,OperaeNetscapeetodoselesfuncionou perfeitamente. VejanoJavaScriptconsoldedoFFevejaoerroqueestocorrendo.

MaiconSantos Ola... TesteinoIEedeubeleza... MaisnoOpera8.5(navegadorqueeuuso)naumfunfo... Alguemtemalgumadica??

Jo oRicardodeAlbuquerqueSi OlLuis, Baixeoarquivocompleto,aqui: http://www.imasters.com.br/conteudo2/lvieira/27/buscaInstantanea.zip

Jo oRicardodeAlbuquerqueSi Cara,setempossibilidadeeuaindanoconheo,mascomcertezaseriaumsistemabem sobrecarregado.Imagine,abuscadogooglenessesistema.Umabrao.

carlosmarian Ol,Leandro Buscamuitolegal.Comopossocolocarpaginao?

Busca instantnea com Ajax

JulianoEloiFelisberto ParabnsLeandropeloTutorial. EstD+. Eratudoqueeuprecissava,agoraficamaisfcilimplementaralgumasrotinasnosistema queestoudesenvolvendo. Esperoumdiapoderdivulgaloassimqueestiverprontoepodercontribuircomalguns tutoriaistambm. Vcestdeparabns.

RafaelRanzolinPedroso Ol,parabnspeloartigo,mastemalgunslinksqueestooffline,serquevocpoderia postarosarquviosparadownload? Obrigado.

PriscilaRicardoAndrade Caras assimeuaprendoajax,maravilha!

Busca instantnea com Ajax

SobreoiMa Polticadep Anuncie Faleconosc

Anda mungkin juga menyukai