Začíname s AJAX

Táto príručka poskytuje základné informácie o Ajax, a potom skáče vpravo a dostane ste začali s príkladmi.

JavaScript bol hlavné použitie pre XMLHttpRequest objekty pre dobrú počet rokov, ale len nedávno sa to na začiatku získať nejaké "slávy". A veľa sa hluk má čo do činenia s radom moderných webových aplikácií s weboví vývojári, že je vidieť, slintat a chcú, aby ich vlastných stránkach to majú tie isté presné pokrokových aplikácií / funkcií. Ale niektorí to tiež má čo do činenia so skupinou ľudí, AdaptivePath, ktorí majú v tejto aplikácii s názvom Ajax

Ajax začiatočníkov: Čo na svete je Ajax?

V skratke? I Ajax je roztok na web rozhranie.

Bežne na webových používateľ zadá nejaká dáta, alebo je jednoduchá voľba, a klikne na tlačidlo dokončenie tohto výberu alebo zápis dát a dáta posiela cez na server. Tento server dodržuje bezhlavo údaje a odošle späť celú novú webovú stránku. Stavanie reload stránky zakaždým, keď budete chcieť niečo urobiť, je veľmi mrzuté, vyraďovacie a časovo-veľmi náročné pre používateľa. XMLHttpRequest resurfaces prehliadača-server interakciu do zákulisia, takže užívateľ môže zachovať len o hranie sa rovnakú stránku, hoci prvkov na stránke sa hovorí na server!

S JavaScript vždy sme boli schopní-server, bez skriptov na strane niečo deje v prehliadači pomocou niekoľkých klasických trikov naše rukávmi.

Caching podobe dát do súboru s JavaScript na serveri je dobrá, ale to zvyčajne nie je návrate akékoľvek užitočné informácie JavaScript, ktorý žiada ju, aby jeho účinnosť je veľmi obmedzený. Ajax sa však môžu získať plnú pozemku údajov vrátil z skript ju volá. Preto sa "XML" časť mená - čo je naozaj len tam vyzerá druhov, niečo ako je "Java" časť JavaScriptu, pretože sa vrátil údaje môžu byť jednoduchý text, alebo čokoľvek chcete, ak nie je vaša XML preferovanou voľbou.

To sám otvára tak veľa zaujímavých možností. Každá forma podania, JavaScript každom prípade, a bez ohľadu na ostatné aplikácie, sa teraz môže komunikovať s server-Side databáz a spracovanie moc! Dát, overovanie hesla, obrazom generácie - stačí názov, Ajax môžete aktivovať.

Ajax uvedenie do praxe

Jediná vec, ktorá obmedzuje Ajax-zosilnené webové aplikácie je vaša fantázia a prehliadač podporovať. Webové prehliadače Mozilla-to dokážeš, Safari a novšie verzie programu Internet Explorer a Opera 8, ale nie Opera 7. Je to medzerovou najlepšie v alternatívny spôsob, ako robiť veci pre užívateľov, ktorí nie sú tak vtipný ako nádeje, že by ste na ne byť. Tiež, Internet Explorer robí veci trochu inak (určite väčšina) od všetkých ostatných prehliadačov, tak je to docela podstatné, aby kód na účte za nepríjemný 80% obyvateľov, ktorí sa spoliehajú na Explorer.

Teraz sa súčasťou vzrušujúce! Poďme si vygenerujte jednoduché aplikácie, ktorá môže prijímať vstup od užívateľa, odovzdá ju do určitej PHP na serveri, ktorý kontroluje, že proti databázu, a vracia výsledok do prehliadača pri používaní. My asimilovať ich do troch častí.

Po prvé, musíme v HTML podobe. Ako ste 'môžete vidieť nižšie:

 <html> 
  <head> 
   <title> Správa </ title> 
   <script type='text/javascript' src='xhr.js'> </ script> </ head> <body> <form action="fallbackpage.php" METHOD="POST"> 
   <p> Vitaj, študent.  Prosím, zadajte svoje eseje tu: <textarea name="essay" id="essay"> 
   </ Textarea> <input type = "submit" name = "submit" value = "Odoslať" onclick = "return 
   stupňa (this.form.essay.value); "> 
   </ P> 
   </ Form> 
   </ Body> 
   </ Html

xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Poznámka: Pre používateľov, bez náležitej podpory pre náš skript (pomenovaný xhr.js), forma sa len jednoducho predloží havarijného stránku fallbackpage.php. Ok, toto je oblasť, kde prichádza v JavaScriptu, budeme brať to pomaly.

  funkcie triedy (Fejtón) (

Prvé, čo musíme urobiť, je inicializácia objektu. Existujú dva spôsoby, musíme to urobiť, pre rôzne prehliadače.

  / / Mozilla verzia 
      if (window.XMLHttpRequest) ( 
          XHR = new XMLHttpRequest (); 
      ) 
      / / IE verzia 
      else if (window.ActiveXObject) ( 
          XHR = new ActiveXObject ( "Microsoft.XMLHTTP"); 
      )

Potom sme unikli užívateľské vstupy, aby bolo bezpečné-URL:

      esej = encodeURIComponent (Fejtón);

a používania otvorenej metódy objektu otvoriť nové spojenia do PHP skriptu:

      xhr.open ( "POST", "grade.php");

Táto metóda vyžaduje dva argumenty: prvý je metóda HTTP (GET alebo POST), a po druhé, URL skriptu. Rýchly HTTP hlavička tvrdí, že skript pre to, čo je to dostať, a potom poslať metóda sa premietajú aktuálne žiadosti:

   xhr.setRequestHeader ( 
       'Content-Type', 
        'application / x-www-formulár-urlencoded; charset = UTF-8'); xhr.send (Fejtón);

Tento posledný krok nie je nutný pre GET žiadostí, v ktorej všetky údaje môžu byť obsiahnuté v reťazec dotazu v URL.

Získanie Konečné výsledky

Sme pripravení s konečnou platnosťou, aby ste zistili, či HTTP požiadavke sme pracovali. readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. V readyState majetok sa počíta od nuly až po podaní žiadosti, a ukazuje, 4 strane servera, kedy bol úspešne nahraný.

  Xhr.onreadystatechange = function () ( 
        if (xhr.readyState == 4) (

responseText property, which contains a string. Ak naozaj skutočná žiadosť pracoval, potom môžeme dostať výstup na server-skriptov na strane dotazom na responseText majetok, ktorý obsahuje celú rezec. responseXML property, which can hold a full document object of XML data, is an option also accessible. Pre viac komplex server skript výstup, jeden responseXML vlastníctva, ktoré môže držať plný Document Object XML dáta, je možnosť tiež prístupná.

  Trieda = xhr.responseText; 
        alert ( "Nice esej. Váš stupeň je" + trieda); 
      ) 
      return false; 
   )

Záverom možno konštatovať, že tretia zložka pozostáva z PHP skriptu, ktorý v podstate žije na server a čaká trpezlivo na JavaScript na niektorých priechodu je šťavnaté, takže dáta môžu prekvitať. Tento príklad používa PHP, ale vy ako akomkoľvek jazyku - Ruby, Perl, C, ASP - je schopný riešiť vaše potreby, ako je dobre. grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. Jadrom tohto príkladu je prirodzený jazyk-funkcia nazýva grade_essay (), aby pojednaní študent tried 1 až 100, ale budem redigovat, že časť k ochrane priestoru.

   <? Php 
   Funkcia grade_essay ($ esej) ( 
        návrat strlen ($ esej); 
   ) 
   $ = Esej urldecode (implode (file ( 'php: / / input'))); 
   $ = Grade_essay trieda ($ esej); 
   echo $ triedy; 
  ?>

php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. PHP: / / input mání POST dáta, ktorá sa dostane vložila do reťazca, dekódovať a na chytré triedenie algoritmus. Algoritmus vracia číselné triedy. echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Napokon, práve sme výstup triedy s echo - normálne by to malo zobrazovať v prehliadači, ale keďže PHP skript beží "v zákulisí", reťazec, výstupom sa jednoducho vrátili do JavaScript, ktorý nazval ju. text/xml . Ak budete potrebovať štruktúrovaných dát vo formáte XML dokumentu by výstup s ozvěnou v vyhlásenie, rovnako tak ale Content-Type pre výstup stránke v podstate musí byť nastavená tak, aby text / xml.

Čo používateľ vidí, je toto: Ona mu eseje svoje druhy do textovej oblasti v prehliadači, klikne na Odoslať a do kolónky okamihy v zázname objaví, dáva mu / jej konečný stupeň na esej. Neviditeľne, eseje, v ktorej bol odoslaný na server, čítať a vyhodnotené tímom PHP škriatka, a nevyhnutne sa vrátili platovej triede, bez byli s to načítať stránku. Užívateľ môže zmeniť svoje eseje a znovu ju priebežne.

A to je v Podstata všeobecných takmer Zázračná XMLHttpRequest! Tento príklad je docela jednoduché a vpred, ale na využitie objektu môže byť veľmi, multi chytrý.

Pre ďalšiu inšpiráciu a skvelé príklady geniálny Ajax aplikácie, ktoré možno momentálne sa nasmerovať z SimpleHelp.Net a návštevy iGoogle , Pageflakes , Netflix a Netvibes .