Aquest guia proporciona una mica d'informació documental en Ajax, i llavors salta a la dreta en i el té engegat amb exemples.
JavaScript ha estat l'ús principal perquè XMLHttpRequest objecta per a un bon nombre d'anys ara, però només últimament començava a guanyar una mica de "fama". Molt del ruckus ha de fer amb les moltes aplicacions web avançades que tenen desenvolupadors de webs que ho veuen, drool i volen que el seu propi lloc tingui aquells mateixos aplicacions/trets avançats exactes. Però alguns d'això també han de fer amb el grup de persones a AdaptivePath que han anomenat aquesta aplicació Ajax
Ajax Beginners: Què al món és Ajax?
En poques paraules? Bé Ajax és una solució a interfícies de webs.
Comunament, l'usuari de webs introdueix algunes dades o fa una elecció simple, i fa clic a un botó que enllesteix aquella elecció o entrada de dades i envia les dades sobre al servidor. El servidor precipitadament observa les dades i retorna una pàgina web nova sencera. Havent de recarregar una pàgina totes les vegades que vol fer alguna cosa són molt molestes, disjuntiu i extremadament consumint hora per a l'usuari. XMLHttpRequest refà el paviment de la interacció de servidor de navegador a entre bastidors, així l'usuari només pot continuar jugant amb la mateixa pàgina, fins i tot mentre que els elements a la pàgina estan parlant amb el servidor!
Amb JavaScript sempre hem estat capaços a escriptura de costat de servidor sense tot que passa al navegador utilitzant uns quants trucs clàssics cap amunt de les nostres mànigues.
Caching formar dades a un arxiu amb JavaScript en un servidor és bo, però això normalment no torna informació útil al JavaScript que anomena això, així la seva eficàcia està molt limitada. Ajax, tanmateix, pot tornar un ple paquet de dades de l'escriptura que crida. Per això la Part de l'"XML" del nom - que realment és just allà per a aspectes de classes, classe de com la Part de "Java" de JavaScript, perquè les dades tornades poden ser text clar o qualsevol cosa que li agradi, si l'XML no és la seva elecció preferida.
Aquest de manera sola obre cap amunt de tantes possibilitats emocionants. Totes les submissions de forma, tots els esdeveniments de JavaScript, i qualsevol cosa més aplicació, pot ara interaccionar amb bases de dades de costat de servidor i poder de processament! Extracció de dades, autenticació de contrasenya, generació d'imatge - només l'anomena, Ajax el pot activar.
Posant Ajax A Pràctica
L'única cosa que limita aplicació web realçada d'Ajax és la seva imaginació i per suport de navegador. Els navegadors basats en Mozilla ho poden fer, Safari, i versions més noves d'Explorador d'Internet, i Òpera 8 però no Òpera 7. És millor encabir d'una manera alternativa de fer coses als usuaris que no són tan divertits com esperaria que fossin. També, Explorador d'Internet fa coses una mica diferentment (més definitivament) des de tots els altres navegadors, així és força essencial fer funcionar el codi per explicar per al 80% enutjós de la població que confien en Explorador.
Ara a la part emocionant! Generem una aplicació sincera que pot acceptar aportació des de l'usuari, passi'l a una mica de PHP al servidor que ho atura contra una base de dades, i torni el resultat al navegador en ús. L'assimilem en tres parts.
Primer, necessitem una forma de HTML. Com pot veure' més avall:
<Html> <head> <title>Report</title> <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <p>Welcome, estudiant. Si us plau introdueixi el seu assaig here:<textarea name="essay" id="essay"> </textarea> <input type="submit" name="submit" value="Submit" onClick="return grade(this.form.essay.value);"> </p> </form> </body> </html
Bitllet: Per a usuaris sense suport propi per a la nostra escriptura (xhr.js anomenat), la forma se sotmetrà just simplement a la pàgina de fallback a fallbackpage.php. Correcte, això és on entra el JavaScript, el prendrem lent.
funció grade(essay) {
La primera cosa que hem de fer és inicialitzar l'objecte. Hi ha dos camins que hem de fer això, per a navegadors diferents.
// versió Mozilla si (window.XMLHttpRequest) { xhr = XMLHttpRequest() nou;
} // I.E. versió més si (window.ActiveXObject) { xhr = ActiveXObject("Microsoft.XMLHTTP nou");
}
Llavors evitem l'aportació d'usuari per fer-ho segur d'URL:
essay=encodeURIComponent(essay);
i utilitzi el mètode obert de l'objecte per obrir una connexió nova a l'escriptura de PHP:
xhr.open("POST","grade.php");
El mètode exigeix dos arguments: primer, el mètode de HTTP (ACONSEGUEIXI o ENVIÏ); segon, l'URL de l'escriptura. Un encapçalament de HTTP ràpid afirma l'escriptura per al que està aconseguint, i llavors l'enviar mètode transmet la petició present:
xhr.setRequestHeader( 'Tipus de contingut, application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay);
Aquest últim pas no és necessari perquè GET demana, on totes les dades poden ser continguts a la corda de pregunta de l'URL.
Final Que Obté Resultats
Som finalment preparat per veure si la petició de HTTP que fèiem funcionava. La propietat de readyState compta des de les zero durant la petició, i demostracions 4 quan la pàgina de servidor s'ha carregat reeixidament.
xhr.onreadystatechange=function() { si (xhr.readyState==4) {
Si en efecte la petició present funcionava, llavors podem aconseguir la producció de l'escriptura de costat de servidor qüestionant la propietat de responseText, que conté una corda. Perquè més d'una escriptura de servidor complexa imprimia, una propietat de responseXML, que pot tenir un ple objecte de document de dades de l'XML, és una opció també accessible.
grau = xhr.responseText;
alerta ("Assaig de Niça. El seu grau és " + grau);
} retorn fals;
}
En conclusió, el tercer component constar d'escriptura de PHP, que bàsicament viu al servidor i espera pacientment que el JavaScript li passi algunes dades sucoses així pot créixer. Aquest exemple utilitza una mica de PHP, però qualsevol llengua que li agrada - Robí, Perl, C, ÀSPID - pot encarar les seves necessitats també. El cor d'aquesta escriptura d'exemple és una funció de llengua natural anomenada grade_essay() que puntua assaigs d'estudiants d'1 a 100, però jo redact per tan en part conservar espaiarà.
Funció de <?php grade_essay($essay) { retorn strlen($essay);
} $essay = urldecode(implode(file('php://input')));
$grade = grade_essay($essay);
eco $grade;
?>
El php://input agafa les dades de CORREU, que es posen a una corda, es descodifiquen i es passen a l'algoritme que classifica llest. L'algoritme torna un grau numèric. Finalment, només imprimim el grau amb eco - correntment, això mostraria al navegador, però ja que l'escriptura de PHP està funcionant "entre bastidors", la producció de corda es torna simplement al JavaScript que el cridava. Si necessita dades estructurades, un document de l'XML s'imprimiria amb una declaració d'eco d'exactament la mateixa manera, però el tipus de contingut de la pàgina de producció bàsicament s'ha de posar a text/xml.
El que l'usuari veu és això: Ell/Ell escriu el seu assaig a l'àrea de text al navegador, els clics Se Sotmeten, i dins d'instants una caixa d'alerta apareix donant-li un grau final a ell/ell sobre l'assaig. Invisiblement, l'assaig s'ha enviat al servidor, llegit i avaluat per un equip de follets de PHP, i inevitablement tornat amb un grau, sense mai haver de recarregar la pàgina. L'usuari pot modificar el seu assaig i representar-lo contínuament.
I allò és la substància general de l'objecte de XMLHttpRequest gairebé màgic! L'exemple és força simple i dret endavant, però els usos de l'objecte poden ser altament, multi llest.
Per a inspiració més llunyana i grans exemples d'aplicacions Ajax ingenioses pot momentàniament conduir fora de SimpleHelp.Net i visitar iGoogle, Pageflakes, Netflix i Netvibes.
Tanmateix, les dades i funcions que Ajax envia i representa és simplement fins a vostè.
{ 0 comentaris... afegeixi'n un ara }
Deixi un Comentari